View
963
Download
3
Category
Preview:
DESCRIPTION
my session on DEVENT2 @DEVMIX Team With Ahmed Daif
Citation preview
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";
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";
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";
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";
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
Recommended