Game age ppt

gametutorials
aplusmath
Visualmaththreading
vectorkids

gaming hardware 17,797
gaming software 44,730
online gaming 11,899
Total 74,426

1,000,000,000 $
Online games sales
66 B $

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/>

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

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";

characters
• Then Create The Hero :) :-
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero.png";

characters
Then Create DX (The queen) :-
var dxReady = false;
var dxImage = new Image();
dxImage.onload = function () {
dxReady = true;
};
dxImage.src = "images/dx.png";

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";

Define Game Objects
var hero = {
speed: 256 // movement in pixels per second
};
var monster = {};
var dx ={}
var dxCaught = 0;
var lvl,mover0,mover1;

Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);

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);
}

Draw everything
//score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Goblins caught: " + monstersCaught,
32, 32);
};

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(??);

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(??);
}
};

Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as
possible

The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};

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;
}

Update game objects
//Are they touching?
if (
hero.x <= (dx.x + 32)
&& dx.x <= (hero.x + 32)
&& hero.y <= (dx.y + 32)
&& dx.y <= (hero.y + 32)
) {
++dxCaught;
reset();
}

Update game objects
if(lvl > 2 && hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
reset();
}
};

Game age ppt

More Related Content

What's hot (15)

Viewers also liked (20)

Similar to Game age ppt (20)

Recently uploaded (20)

Game age ppt