#javascript #html #css
Вопрос:
Я следовал этому уроку: https://stashable.blog/2018/12/30/make-a-dress-up-game-using-javascript-html-and-css/ и это сработало отлично, но я хотел бы кое-что изменить. В учебнике используется только одна кукла, а у меня есть несколько кукол (для цветов кожи), поэтому я рассматривал ее как другие варианты (обувь, брюки и т. Д.), И из-за этого игра в начале кажется пустой.
Это первый раз, когда я пытаюсь сделать что-то подобное (ну, я использовал flash для подобных вещей, когда мне было 10-12 лет, но я помню почти все, и я думаю, что это было по-другому…), и я понятия не имею, как делать то, что я хочу. Я догадался, что мне нужно что-то изменить в файле «.css», и попытался использовать:
фоновое изображение: url(«../img/doll1.png»);
в части #кукла {, но это не позволяет кнопке изменять изображение.
Я действительно заблудился здесь, и я не могу найти какое-либо решение или учебник в Интернете. Пожалуйста, помогите 🙁
var state = {
a: 0,
b: 0,
c: 0
};
function nexthairback() {
console.log("inside function nexthairback");
console.log(state.a);
var hairback = document.getElementById("hairback");
if (state.a === 0) {
hairback.setAttribute("class", "hairback1");
state.a ;
console.log(state.a);
} else
if (state.a === 1) {
hairback.setAttribute("class", "hairback2");
state.a = 0;
}
}
function nextdoll() {
console.log("inside function nextdoll");
console.log(state.b);
var doll = document.getElementById("doll");
if (state.b === 0) {
doll.setAttribute("class", "doll1");
state.b ;
console.log(state.b);
} else
if (state.b === 1) {
doll.setAttribute("class", "doll2");
state.b = 0;
}
}
function nexthairfront() {
console.log("inside function nexthairfront");
console.log(state.c);
var hairfront = document.getElementById("hairfront");
if (state.c === 0) {
hairfront.setAttribute("class", "hairfront1");
state.c ;
console.log(state.c);
} else
if (state.c === 1) {
hairfront.setAttribute("class", "hairfront2");
state.c = 0;
}
}
window.onload = init;
function init() {
console.log("window has loaded");
state.a = 0;
state.b = 0;
state.c = 0;
} #container {
position: absolute;
margin: auto;
width: 1200px;
height: 1540px;
background-color: white;
}
#background {
position: absolute;
width: 1000px;
height: 1340px;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
background-image: url("../img/background.png");
}
#hairback {
position: absolute;
width: 1000px;
height: 1340px;
}
#doll {
position: absolute;
width: 1000px;
height: 1340px;
}
#hairfront {
position: absolute;
width: 1000px;
height: 1340px;
}
.doll1 {
position: absolute;
width: 1000px;
height: 1340px;
background-image: url("../img/doll1.png");
}
.doll2 {
position: absolute;
width: 1000px;
height: 1340px;
background-image: url("../img/doll2.png");
}
.hairback1 {
position: absolute;
width: 1000px;
height: 1340px;
background-image: url("../img/hairback1.png");
}
.hairback2 {
position: absolute;
width: 1000px;
height: 1340px;
background-image: url("../img/hairback2.png");
}
.hairfront1 {
position: absolute;
width: 1000px;
height: 1340px;
background-image: url("../img/hairfront1.png");
}
.hairfront2 {
position: absolute;
width: 1000px;
height: 1340px;
background-image: url("../img/hairfront2.png");
} <html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<title> Dress up game</title>
<body>
<div id="container">
<div id="background">
<div id="hairback"></div>
<div id="doll"></div>
<div id="hairfront"></div>
</div>
<input type="button" value="NEXT" id="nexthairback" onclick="nexthairback()">
<input type="button" value="NEXT" id="nextdoll" onclick="nextdoll()">
<input type="button" value="NEXT" id="nexthairfront" onclick="nexthairfront()">
</div>
<script src="js/code.js"></script>
</body>
</html> Комментарии:
1. Если вам нужна лучшая помощь, пожалуйста, добавьте свой код сюда, желательно в виде фрагмента. В противном случае добавьте свой код с изображениями вывода
2. Как мне это сделать? Я должен добавить в содержимое файла, в котором написано «.js»? или «.html»? или «.css»? или их троих? Я в замешательстве.
3. Все три из них, если применимо. В вашем случае я чувствую, что HTML и JS необходимы.
4. Спасибо. Я попробую добавить их
5. Спасибо @axel !!! <3
Ответ №1:
Добро пожаловать в StackOverflow Blue Dots!
Мне очень неясно, чего именно вы хотите, но из того, что я понимаю, вы хотите сменить куклу на фоновое изображение, верно? Мы можем сделать это с помощью JavaScript.
Сначала мы получаем документ по идентификатору, который ему был присвоен в HTML.
const doll = document.getElementById("doll");
После этого мы хотим изменить стили, правильно? В частности, фоновое изображение, мы также можем сделать это в JavaScript!
doll.style.backgroundImage = "url('Put your image directory here')";
Теперь вы должны сами выяснить, как это сделать при нажатии кнопки, а также каждый раз изменять URL-адрес каталога изображений при нажатии кнопки. Удачи 😉
Комментарии:
1. Я не уверен, что понимаю это, но я все равно попробую, спасибо! если я сделаю куклу фоновым изображением, она всегда будет появляться, верно? Как вы думаете, будет ли яснее, если я загружу изображение того, что происходит, и того, что я хочу, чтобы произошло? Спасибо вам за все!
2. Я добавил картинку, которая, возможно, поможет 🙁 извините, английский не мой родной язык, и я не умею выражаться так хорошо, как хотелось бы. @SuchJitter
3. @Синие точки Загружают изображения, которые вы используете, в Интернет, а затем связывают их в css, фоновом изображении, которое вы используете, тогда мы также можем использовать их и помочь вам.