Game age ppt

YoussifDaif

Education !!

gametutorials

aplusmath

Visualmaththreading

vectorkids

Simulation

real Business

70,000,000

gaming hardware 17,797

gaming software 44,730

online gaming 11,899

Total 74,426

types...

vs

logic

Sports

Strategy

Shooting

Racing

Online OR Web

1,000,000,000 $

Online games sales66 B $

no programming language ..!

Components ...

Let's Play ...

Welcome!Catch Devmix

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


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


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


• 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

//scorectx.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 randomlydx.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 hardIf(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 uphero.y -= hero.speed * modifier;}if (40 in keysDown) { // Player holding downhero.y += hero.speed * modifier;}if (37 in keysDown) { // Player holding lefthero.x -= hero.speed * modifier;}if (39 in keysDown) { // Player holding righthero.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();}};

End & Questions

?Thanks