16
rated 0 times
[
18]
[
2]
/ answers: 1 / hits: 19478
/ 10 Years ago, sun, december 28, 2014, 12:00:00
Essentially, I keep getting the message document is not defined when I run my .js doc on command line. I'm trying to create a super basic game where the user helps the squirrel get to the chestnuts by using arrow keys. So far I can't move the squirrel yet, and I suspect it has to do with the document is not defined error that I'm getting (lines 1-3 and maybe also 52 in the link).
You can find my code (html, css and js) in the following jsfiddle link
(http://jsfiddle.net/8Lbkcsq2/)
var squirrelImg = document.getElementById(squirrelImg);
var forest = document.getElementById(forest);
var chestnutImg = document.getElementById(chestnutsImg);
var squirrel = {
name: Mr. Squirrel,
has_chestnuts: false,
hungry: true
};
var chestnuts = {
name: chestnuts
};
var positionLeft = 0;
var positionTop = 0;
function move(e) {
// 39 for right arrow
if (e.keyCode === 39) {
if (positionLeft < 850) {
positionLeft += 50;
squirrelImg.style.left = positionLeft + px;
}
}
// 40 for down arrow
if (e.keyCode === 40) {
if (positionTop < 600) {
positionTop += 50;
squirrelImg.style.top = positionTop + px;
}
}
// 37 for left arrow
if (e.keyCode === 37) {
positionLeft -= 50;
if (positionLeft < 0) {
positionLeft += 50; // CHANGE TO +=50 LATER
}
squirrelImg.style.left = positionLeft + px;
}
// 38 for up arrow
if (e.keyCode === 38) {
positionTop -= 100;
if (positionTop < 0) {
positionTop += 50; // CHANGE TO +=50 LATER
}
squirrelImg.style.top = positionTop + px;
}
foundChestnuts();
}
document.onKeyDown = move();
function foundChestnuts() {
if ((squirrelImg.style.top == 300px) && (squirrelImg.style.left == 750px)) {
squirrel.has_chestnuts = true;
alert(Thank you for helping Mr. Squirrel find his chestnuts!);
var eat = confirm(Should Mr.Squirrel eat his chestnuts?);
if (eat === true) {
alert(Time to eat!);
alert(Yum! Mr. Squirrel isn't hungry anymore!);
} else {
alert(I guess Mr. Squirrel can wait a little longer...);
}
} else {
squirrel.has_chestnuts = false;
}
}body {
background-color: #b5916c;
}
h3 {
font-weight: bold;
text-decoration: underline;
}
p {
font-family:'Dancing Script', cursive;
font-size: large;
}
#forest {
background-image: url(http://s21.postimg.org/jyht762hj/forestfloor.jpg);
width: 850px;
height: 600px;
position: relative;
/*opacity: 0.5;*/
}
#squirrelImg {
position: absolute;
background-image: url(http://s24.postimg.org/wkqh9by4x/squirrel.png);
height: 100px;
width: 100px;
left: 0;
top: 0;
}
#chestnutsImg {
position: absolute;
background-image: url(http://s28.postimg.org/kgiubxhnd/chestnuts.jpg);
height: 100px;
width: 100px;
left: 750px;
top: 300px;
}<body>
<h3>A Plea from Mr. Squirrel:</h3>
<p>My dearest human,</p>
<p>I seem to have misplaced my chestnuts and I am quite famished.</p>
<p>Would you mind assisting me in locating them?</p>
<p>Much obliged!</p>
<div id=forest>
<div id=squirrelImg></div>
<div id=chestnutsImg></div>
</div>
</body>
More From » html
