game age ppt
DESCRIPTION
my session on DEVENT2 @DEVMIX Team With Ahmed DaifTRANSCRIPT
![Page 1: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/1.jpg)
YoussifDaif
![Page 2: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/2.jpg)
Education !!
![Page 3: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/3.jpg)
gametutorials
aplusmath
Visualmaththreading
vectorkids
![Page 4: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/4.jpg)
![Page 5: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/5.jpg)
Simulation
![Page 6: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/6.jpg)
![Page 7: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/7.jpg)
![Page 8: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/8.jpg)
real Business
![Page 9: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/9.jpg)
70,000,000
![Page 10: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/10.jpg)
![Page 11: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/11.jpg)
![Page 12: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/12.jpg)
![Page 13: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/13.jpg)
gaming hardware 17,797
gaming software 44,730
online gaming 11,899
Total 74,426
![Page 14: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/14.jpg)
types...
![Page 15: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/15.jpg)
vs
![Page 16: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/16.jpg)
logic
![Page 17: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/17.jpg)
Sports
![Page 18: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/18.jpg)
Strategy
![Page 19: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/19.jpg)
Shooting
![Page 20: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/20.jpg)
Racing
![Page 21: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/21.jpg)
Online OR Web
![Page 22: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/22.jpg)
1,000,000,000 $
Online games sales66 B $
![Page 23: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/23.jpg)
no programming language ..!
![Page 24: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/24.jpg)
Components ...
![Page 25: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/25.jpg)
Let's Play ...
![Page 26: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/26.jpg)
Welcome!Catch Devmix
![Page 27: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/27.jpg)
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/>
![Page 28: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/28.jpg)
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
![Page 29: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/29.jpg)
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";
![Page 30: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/30.jpg)
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";
![Page 31: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/31.jpg)
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";
![Page 32: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/32.jpg)
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";
![Page 33: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/33.jpg)
Define Game Objects
var hero = {speed: 256 // movement in pixels per second};var monster = {};var dx ={}var dxCaught = 0;var lvl,mover0,mover1;
![Page 34: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/34.jpg)
Handle keyboard controls
var keysDown = {};addEventListener("keydown", function (e) {keysDown[e.keyCode] = true;}, false);addEventListener("keyup", function (e) {delete keysDown[e.keyCode];}, false);
![Page 35: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/35.jpg)
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);}
![Page 36: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/36.jpg)
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);};
![Page 37: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/37.jpg)
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(??);
![Page 38: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/38.jpg)
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(??);}};
![Page 39: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/39.jpg)
Let's play this game!
reset();var then = Date.now();setInterval(main, 1); // Execute as fast as possible
![Page 40: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/40.jpg)
The main game loop
var main = function () {var now = Date.now();var delta = now - then;update(delta / 1000);render();then = now;};
![Page 41: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/41.jpg)
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;}
![Page 42: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/42.jpg)
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();}
![Page 43: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/43.jpg)
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();}};
![Page 44: Game age ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061206/5483367db47959dd0c8b4a19/html5/thumbnails/44.jpg)
End & Questions
?Thanks