The Run Down:
Making the Canvas
<!-- Canvas-->
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
Loading the Images
<!--Background-->
var bgReady = false;
var bgImg = new Image();
bgImg.onload = function(){
bgReady = true;
};
bgImg.src = "C:/Users/Bao/Desktop/OpenText Presentation Projects/htmlgame/grass.jpg";
<!--Worm--->
var wormReady = false;
var wormImg = new Image();
wormImg.onload = function(){
wormReady = true;
};
wormImg.src = "C:/Users/Bao/Desktop/OpenText Presentation Projects/htmlgame/worm.png";
<!--apple-->
var appleReady = false;
var appleImg = new Image();
appleImg.onload = function(){
appleReady = true;
};
appleImg.src = "C:/Users/Bao/Desktop/OpenText Presentation Projects/htmlgame/s-Apple.png";
var bgReady = false;
var bgImg = new Image();
bgImg.onload = function(){
bgReady = true;
};
bgImg.src = "C:/Users/Bao/Desktop/OpenText Presentation Projects/htmlgame/grass.jpg";
<!--Worm--->
var wormReady = false;
var wormImg = new Image();
wormImg.onload = function(){
wormReady = true;
};
wormImg.src = "C:/Users/Bao/Desktop/OpenText Presentation Projects/htmlgame/worm.png";
<!--apple-->
var appleReady = false;
var appleImg = new Image();
appleImg.onload = function(){
appleReady = true;
};
appleImg.src = "C:/Users/Bao/Desktop/OpenText Presentation Projects/htmlgame/s-Apple.png";
Setting Up the Game Objects
<!-- object-->
var worm = {
speed: 250,
x:0,
y:0
};
var apple = {
speed: 150,
x:0,
y:0
};
var appleEaten = 0;
var worm = {
speed: 250,
x:0,
y:0
};
var apple = {
speed: 150,
x:0,
y:0
};
var appleEaten = 0;
Key Board Input (Are the keys down?)
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
Resetting the objects
var reset = function(){
worm.x = canvas.width/2;
worm.y = canvas.height/2;
apple.x = Math.floor((Math.random()*canvas.width)+1);
apple.y = Math.floor((Math.random()*canvas.height)+1);
}
worm.x = canvas.width/2;
worm.y = canvas.height/2;
apple.x = Math.floor((Math.random()*canvas.width)+1);
apple.y = Math.floor((Math.random()*canvas.height)+1);
}
Updating the Objects
var update = function(modifier){
if(38 in keysDown){<!--up-->
worm.y -= worm.speed*modifier;
}
if(40 in keysDown){<!--down-->
worm.y += worm.speed*modifier;
}
if(37 in keysDown){<!--left-->
worm.x-= worm.speed*modifier;
}
if(39 in keysDown){<!--right-->
worm.x += worm.speed*modifier;
}
<!-- the running apple-->
if(87 in keysDown){<!--up-->
apple.y -= worm.speed*modifier;
}
if(83 in keysDown){<!--down-->
apple.y += worm.speed*modifier;
}
if(65 in keysDown){<!--left-->
apple.x-= worm.speed*modifier;
}
if(68 in keysDown){<!--right-->
apple.x += worm.speed*modifier;
}
<!--STAY IN THE MAP-->
if(worm.x<0){
worm.x = 500;
}
if(worm.x>500){
worm.x = 0;
}
if(worm.y<0){
worm.y = 500;
}
if(worm.y>500){
worm.y = 0;
}
<!--apple-->
if(apple.x<0){
apple.x = 500;
}
if(apple.x>500){
apple.x = 0;
}
if(apple.y<0){
apple.y = 500;
}
if(apple.y>500){
apple.y = 0;
}
<!-- Hitboxish stuff-->
if(worm.x <= (apple.x+50) && worm.y <= (apple.y+50) && apple.x <= (worm.x+50) && apple.y <= (worm.y+50)){
appleEaten +=1;
reset();
}
}
if(38 in keysDown){<!--up-->
worm.y -= worm.speed*modifier;
}
if(40 in keysDown){<!--down-->
worm.y += worm.speed*modifier;
}
if(37 in keysDown){<!--left-->
worm.x-= worm.speed*modifier;
}
if(39 in keysDown){<!--right-->
worm.x += worm.speed*modifier;
}
<!-- the running apple-->
if(87 in keysDown){<!--up-->
apple.y -= worm.speed*modifier;
}
if(83 in keysDown){<!--down-->
apple.y += worm.speed*modifier;
}
if(65 in keysDown){<!--left-->
apple.x-= worm.speed*modifier;
}
if(68 in keysDown){<!--right-->
apple.x += worm.speed*modifier;
}
<!--STAY IN THE MAP-->
if(worm.x<0){
worm.x = 500;
}
if(worm.x>500){
worm.x = 0;
}
if(worm.y<0){
worm.y = 500;
}
if(worm.y>500){
worm.y = 0;
}
<!--apple-->
if(apple.x<0){
apple.x = 500;
}
if(apple.x>500){
apple.x = 0;
}
if(apple.y<0){
apple.y = 500;
}
if(apple.y>500){
apple.y = 0;
}
<!-- Hitboxish stuff-->
if(worm.x <= (apple.x+50) && worm.y <= (apple.y+50) && apple.x <= (worm.x+50) && apple.y <= (worm.y+50)){
appleEaten +=1;
reset();
}
}
Displaying
var display = function(){
if(bgReady == true){
ctx.drawImage(bgImg,0 ,0);
}
if(wormReady == true){
ctx.drawImage(wormImg,worm.x,worm.y);
}
if(appleReady == true){
ctx.drawImage(appleImg,apple.x,apple.y);
}
<!--Scoring Text-->
ctx.font = 'bold 36pt Calibri';
ctx.fillText('Apple Eaten: '+ appleEaten, 500, 10);
ctx.textAlign = "right";
ctx.textBaseline = "top";
if(bgReady == true){
ctx.drawImage(bgImg,0 ,0);
}
if(wormReady == true){
ctx.drawImage(wormImg,worm.x,worm.y);
}
if(appleReady == true){
ctx.drawImage(appleImg,apple.x,apple.y);
}
<!--Scoring Text-->
ctx.font = 'bold 36pt Calibri';
ctx.fillText('Apple Eaten: '+ appleEaten, 500, 10);
ctx.textAlign = "right";
ctx.textBaseline = "top";
Main Loop
<!-- Main -->
var main = function(){
var now = Date.now();
var delta = now-then;
update(delta/1000);
display();
then = now;
requestAnimationFrame(main);
}
var main = function(){
var now = Date.now();
var delta = now-then;
update(delta/1000);
display();
then = now;
requestAnimationFrame(main);
}
Running The Game
var then = Date.now();
reset();
main();
reset();
main();