JavaScript游戏上的箭头键不起作用

Question

I am trying to move the santa gif to the left. 我试图将圣诞老人gif移到左侧。 So far I have only put in the code for the left arrow but I cannot get it to move. 到目前为止，我只输入了左箭头的代码，但无法移动。 I have my arrow icons in a div set to a z-index of 30 (higher than everything else on the page) so it shouldn't be that. 我将div中的箭头图标设置为z索引为30（高于页面上的所有其他元素），因此不应该这样。 Any help is much appreciated!!!! 任何帮助深表感谢！！！！

Here is the link to what the game looks like so far, and here is my external style sheet. 这是到目前为止游戏外观的链接，这是我的外部样式表。

<!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">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="up.png" width="30px"><br>
                    <img src="left.png" width="30px" onClick="move('left')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="right.png" width="30px"><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="down.png" width="30px">
                </div>
                <div>
                    <button type="button">Start (Easy)</button>
                    <button type="button">Start (Hard)</button>
                </div>
            </td>
        </tr>           
</body>

Answer 1

~~You have to add a key event, like as follows:~~ ~~您必须添加一个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'); } });

Update 更新

It's not problem in your JS actually it's problem in your CSS, in your CSS #houses & #kids overlaying your buttons which making them not working. 这不是您的JS中的问题，实际上是您的CSS中的问题，您的CSS #houses和#kids覆盖了按钮，这使它们无法正常工作。

Use the following CSS: 使用以下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;
}

Answer 2

hello there was some css issue in your code which is i solved. 您好，您的代码中有一些CSS问题，我已经解决了。

You can check on following link. 您可以检查以下链接。

"https://jsfiddle.net/spankajd/tbjxba99/"

JavaScript游戏上的箭头键不起作用

问题描述

2 个解决方案

解决方案1
0 2016-12-12 06:11:12

Update 更新

解决方案2
0 2016-12-12 06:19:31

JavaScript游戏上的箭头键不起作用

问题描述

2 个解决方案

解决方案1 0 2016-12-12 06:11:12

Update 更新

解决方案2 0 2016-12-12 06:19:31

解决方案1
0 2016-12-12 06:11:12

解决方案2
0 2016-12-12 06:19:31