[英]Arrow keys on JavaScript game not working
我試圖將聖誕老人gif移到左側。 到目前為止,我只輸入了左箭頭的代碼,但無法移動。 我將div中的箭頭圖標設置為z索引為30(高於頁面上的所有其他元素),因此不應該這樣。 任何幫助深表感謝!!!!
<!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>
您必須添加一個 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
和#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;
}
您好,您的代碼中有一些CSS問題,我已經解決了。
您可以檢查以下鏈接。
"https://jsfiddle.net/spankajd/tbjxba99/"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.