Arrow keys on JavaScript game not working
Question
I am trying to move the santa gif to the left. 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. 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">
<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 answers
solution1
0 2016-12-12 06:11:12
You have to add a key event, like as follows:
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.
Use the following 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;
}
solution2
0 2016-12-12 06:19:31
hello there was some css issue in your code which is i solved.
You can check on following link.
"https://jsfiddle.net/spankajd/tbjxba99/"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to detect arrow keys in a Javascript game?
Arrow Keys in Car Game
Javascript function for moving div with arrow keys not working?
Arrow keys not working in firefox with given javascript
Creating objects in javascript as functions - and control them with arrow keys in game
Javascript onChange arrow keys
Arrow Keys Not Working on Form
Arrow keys not working in Firefox
autocomplete arrow keys not working
arrow keys not working in fancybox
Related Tags