27. What Do First?
• Create HTML File With name index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>catch Devmix </title>
</head>
<body>
<script src="js/game.js"></script>
</body>
<html/>
28. And Then
• Create game.js file and Put this
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
//Here We create Canvas With required Deminsion
29. Put Background and our
characters
• First put Background :-
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
30. Put Background and our
characters
• Then Create The Hero :) :-
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero.png";
31. Put Background and our
characters
Then Create DX (The queen) :-
var dxReady = false;
var dxImage = new Image();
dxImage.onload = function () {
dxReady = true;
};
dxImage.src = "images/dx.png";
32. Put Background and our
characters
• Then Create Our Enemy if it was hard or very hard :-
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster.png";
33. Define Game Objects
var hero = {
speed: 256 // movement in pixels per second
};
var monster = {};
var dx ={}
var dxCaught = 0;
var lvl,mover0,mover1;
34. Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
35. Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
if (dxReady) {
ctx.drawImage(dxImage, dx.x, dx.y);
}
37. Reset the game when the Hero
catches a enemy
var reset = function () {
clearInterval(mover0);
clearInterval(mover1);
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Throw the dx somewhere on the screen randomly
dx.x = 32 + (Math.random() * (canvas.width - 94));
dx.y = 32 + (Math.random() * (canvas.height - 94));
If(lvl > 0)
mover0 = setInterval(??);
38. Reset the game when the Hero
catches a enemy
// Throw the monster somewhere on the screen randomly
//if it was hard or very hard
If(lvl > 2){
monster.x = 32 + (Math.random() * (canvas.width - 94));
monster.y = 32 + (Math.random() * (canvas.height - 94));
mover1 = setInterval(??);
}
};
39. Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as
possible
40. The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};
41. Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
}