我想把圣诞老人的GIF移到左边。到目前为止，我只输入左箭头的代码，但我无法移动它。我将div中的箭头图标设置为z-index为30（高于页面上的其他所有内容），所以它不应该是那样。任何帮助都非常感谢!!!!
Here是到目前为止游戏状态的链接，here是我的外部样式表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Santa Game</title>
<link rel="stylesheet" href="index.css">
<script>
var top = 350
var left = 1250
function move(rightorleft)
{
if(rightorleft == 'left')
{
document.getElementById("santa").style.position="absolute"
left = left - 10
document.getElementById("santa").style.left=left+"px"
}
else if(rightorleft == 'right')
{
document.getElementById("santa").style.position="absolute"
left = left + 10
document.getElementById("santa").style.left=left+"px"
}
}
</script>
</head>
<body>
<table>
<tr id="top">
<td>
<p id="p1">Help Santa avoid storms and the eyes of curious children to deliver all the presents on time!</h1>
<p id="p2">Santa score: 0</p>
</td>
</tr>
<tr>
<td id="middle">
<img class="clouds1" id="cloud1" src="cloud.png" width="200px">
<img class="clouds1" id="cloud2" src="cloud.png" width="200px">
<img class="clouds1" id="cloud3" src="cloud.png" width="200px">
<img class="clouds1" id="cloud4" src="cloud.png" width="200px">
<img class="clouds1" id="cloud5" src="cloud.png" width="200px">
<img class="storms" id="storm1" src="storm.png" width="150px">
<img class="storms" id="storm2" src="storm.png" width="150px">
<img class="storms" id="storm3" src="storm.png" width="150px">
<img class="storms" id="storm4" src="storm.png" width="150px">
<img class="clouds2" id="cloud7" src="cloud.png" width="150px">
<img class="clouds2" id="cloud8" src="cloud.png" width="150px">
<img class="clouds2" id="cloud9" src="cloud.png" width="150px">
<img class="clouds2" id="cloud10" src="cloud.png" width="150px">
<img class="clouds2" id="cloud11" src="cloud.png" width="150px">
<img class="clouds2" id="cloud12" src="cloud.png" width="150px">
<img class="clouds2" id="cloud6" src="cloud.png" width="150px">
<img id="santa" src="santa.gif" width="250px">
<img id="hill" src="hill.png" width="785px" height="100px">
<div id="kids"><img class="kids" id="kid1" src="kid1.png" width="100px">
<img class="kids" id="kid2" src="kid2.png" width="100px">
<img class="kids" id="kid3" src="kid3.png" width="100px">
<img class="kids" id="kid4" src="kid4.png" width="100px">
<img class="kids" id="kid5" src="kid5.png" width="100px"></div>
<div id="houses"><img class="houses" id="house1" src="house.gif" width="150px">
<img class="houses" id="house2" src="house.gif" width="150px">
<img class="houses" id="house3" src="house.gif" width="150px">
<img class="houses" id="house4" src="house.gif" width="150px">
<img class="houses" id="house5" src="house.gif" width="150px"></div>
</td>
</tr>
<tr>
<td id="bottom">
<div id="arrows">
<img src="up.png" width="30px"><br>
<img src="left.png" width="30px" onClick="move('left')">
<img src="right.png" width="30px"><br>
<img src="down.png" width="30px">
</div>
<div>
<button type="button">Start (Easy)</button>
<button type="button">Start (Hard)</button>
</div>
</td>
</tr>
</body>
答案 0 :(得分：0)
您必须添加 key事件，如下所示：
body.addEventListener('keydown', function () {
var key = event.keyCode;
if (key == 39) { //If pressed key is left
move('left');
}
if (key == 37) { //If pressed key is right
move('right');
}
});
你的JS中没有问题，实际上你的CSS，CSS #houses＆amp; #kids覆盖了您的按钮，使其无效。
使用以下CSS：
#middle{ background-image: url("background.jpg");
background-size: cover;
background-repeat: no-repeat;
}
table{ margin: auto;
border-collapse: collapse;
margin-top: -8px;
}
#p1{ font-size: 105%;
font-family: Helvetica;
color: white;
letter-spacing: 0.2px;
margin-left: 22px;
}
#p2{ font-family: Helvetica;
color: white;
margin-left: 22px;
}
td{ width: 770px;
border: 2px solid #003399;
}
#bottom{ font-size: 150%;
color: white;
background-color: #80aaff;
padding: 5px;
}
#top{ background-color: #80aaff;
line-height: 85%;
}
.clouds1{ position: absolute;
z-index: 0;
float: left;
}
#cloud2{ position: relative;
left: 137.5px;
}
#cloud3{ position: relative;
left: 82.5px;
}
#cloud4{ position: relative;
left: 37.5px;
}
#cloud5{ position: relative;
float: right;
top: -131px;
}
.storms{ padding: 20px;
z-index: 10;
position: relative;
bottom: 170px;
}
#storm4{ position: relative;
left: 130px;
bottom: 362px;
}
.clouds2{ position: absolute;
z-index: 20;
float: left;
bottom: 325.5px;
}
#cloud6{ position: relative;
bottom: 519.5px;
left: 180px;
}
#cloud7{ position: relative;
}
#cloud8{ position: relative;
right: 40px;
}
#cloud9{ position: relative;
right: 90px;
}
#cloud10{ position: relative;
bottom: 519.5px;
left: 320px;
}
#cloud11{ position: relative;
bottom: 519.5px;
left: 270px;
}
#cloud12{ position: relative;
bottom: 519.5px;
left: 220px;
}
#hill{ position: relative;
z-index: 0;
bottom: -5px;
}
#kids{
z-index: 10;
padding: 20px;
bottom: 49px;
position: absolute;
}
.kids{
padding: 22px;
position: relative;
bottom: 50px;
}
#houses{
z-index: 20;
bottom: 68px;
position: absolute;
}
.houses{
position: relative;
}
#arrows{ float: left;
padding-right: 30px;
z-index: 30;
}
button{ font-family: Helvetica;
font-size: 80%;
background-color: white;
color: #003399;
border: 2px solid #003399;
}
#santa{ position: absolute;
left: 1250px;
top: 350px;
z-index: 30;
}
答案 1 :(得分：0)
你好代码中有一些css问题我已经解决了。
您可以查看以下链接。
"https://jsfiddle.net/spankajd/tbjxba99/"