JavaScript游戏上的箭头键不起作用
[英]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>
2 个解决方案
解决方案1
0 2016-12-12 06:11:12
您必须添加一个 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;
}
解决方案2
0 2016-12-12 06:19:31
您好，您的代码中有一些CSS问题，我已经解决了。
您可以检查以下链接。
"https://jsfiddle.net/spankajd/tbjxba99/"
在JavaScript中创建对象作为函数-并在游戏中使用箭头键控制它们
[英]Creating objects in javascript as functions - and control them with arrow keys in game
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.