SlideShare uma empresa Scribd logo
1 de 44
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 sales
66 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
//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();
}
};
End & Questions
?
Thanks

Mais conteúdo relacionado

Mais procurados

The Ring programming language version 1.8 book - Part 59 of 202
The Ring programming language version 1.8 book - Part 59 of 202The Ring programming language version 1.8 book - Part 59 of 202
The Ring programming language version 1.8 book - Part 59 of 202Mahmoud Samir Fayed
 
HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!Phil Reither
 
Snake report ROHIT MALAV
Snake report ROHIT MALAVSnake report ROHIT MALAV
Snake report ROHIT MALAVRohit malav
 
Programming a Trojan Horse
Programming a Trojan HorseProgramming a Trojan Horse
Programming a Trojan HorseAngelina Rudenko
 
The Ring programming language version 1.5.2 book - Part 49 of 181
The Ring programming language version 1.5.2 book - Part 49 of 181The Ring programming language version 1.5.2 book - Part 49 of 181
The Ring programming language version 1.5.2 book - Part 49 of 181Mahmoud Samir Fayed
 
The Ring programming language version 1.7 book - Part 54 of 196
The Ring programming language version 1.7 book - Part 54 of 196The Ring programming language version 1.7 book - Part 54 of 196
The Ring programming language version 1.7 book - Part 54 of 196Mahmoud Samir Fayed
 
Scaling MongoDB; Sharding Into and Beyond the Multi-Terabyte Range
Scaling MongoDB; Sharding Into and Beyond the Multi-Terabyte RangeScaling MongoDB; Sharding Into and Beyond the Multi-Terabyte Range
Scaling MongoDB; Sharding Into and Beyond the Multi-Terabyte RangeMongoDB
 
Node meetup feb_20_12
Node meetup feb_20_12Node meetup feb_20_12
Node meetup feb_20_12jafar104
 
The Ring programming language version 1.5.4 book - Part 50 of 185
The Ring programming language version 1.5.4 book - Part 50 of 185The Ring programming language version 1.5.4 book - Part 50 of 185
The Ring programming language version 1.5.4 book - Part 50 of 185Mahmoud Samir Fayed
 
iOS Game Development with Cocos2D
iOS Game Development with Cocos2DiOS Game Development with Cocos2D
iOS Game Development with Cocos2DGreenwell
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientBin Shao
 
Strategies for refactoring and migrating a big old project to be multilingual...
Strategies for refactoring and migrating a big old project to be multilingual...Strategies for refactoring and migrating a big old project to be multilingual...
Strategies for refactoring and migrating a big old project to be multilingual...benjaoming
 

Mais procurados (15)

The Ring programming language version 1.8 book - Part 59 of 202
The Ring programming language version 1.8 book - Part 59 of 202The Ring programming language version 1.8 book - Part 59 of 202
The Ring programming language version 1.8 book - Part 59 of 202
 
HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!
 
Snake report ROHIT MALAV
Snake report ROHIT MALAVSnake report ROHIT MALAV
Snake report ROHIT MALAV
 
Programming a Trojan Horse
Programming a Trojan HorseProgramming a Trojan Horse
Programming a Trojan Horse
 
The Ring programming language version 1.5.2 book - Part 49 of 181
The Ring programming language version 1.5.2 book - Part 49 of 181The Ring programming language version 1.5.2 book - Part 49 of 181
The Ring programming language version 1.5.2 book - Part 49 of 181
 
Aditazz 01-ul
Aditazz 01-ulAditazz 01-ul
Aditazz 01-ul
 
Variables
VariablesVariables
Variables
 
The Ring programming language version 1.7 book - Part 54 of 196
The Ring programming language version 1.7 book - Part 54 of 196The Ring programming language version 1.7 book - Part 54 of 196
The Ring programming language version 1.7 book - Part 54 of 196
 
Scaling MongoDB; Sharding Into and Beyond the Multi-Terabyte Range
Scaling MongoDB; Sharding Into and Beyond the Multi-Terabyte RangeScaling MongoDB; Sharding Into and Beyond the Multi-Terabyte Range
Scaling MongoDB; Sharding Into and Beyond the Multi-Terabyte Range
 
Node meetup feb_20_12
Node meetup feb_20_12Node meetup feb_20_12
Node meetup feb_20_12
 
The Ring programming language version 1.5.4 book - Part 50 of 185
The Ring programming language version 1.5.4 book - Part 50 of 185The Ring programming language version 1.5.4 book - Part 50 of 185
The Ring programming language version 1.5.4 book - Part 50 of 185
 
iOS Game Development with Cocos2D
iOS Game Development with Cocos2DiOS Game Development with Cocos2D
iOS Game Development with Cocos2D
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
 
Cocos2dx 7.1-7.2
Cocos2dx 7.1-7.2Cocos2dx 7.1-7.2
Cocos2dx 7.1-7.2
 
Strategies for refactoring and migrating a big old project to be multilingual...
Strategies for refactoring and migrating a big old project to be multilingual...Strategies for refactoring and migrating a big old project to be multilingual...
Strategies for refactoring and migrating a big old project to be multilingual...
 

Destaque

#2 of HTML and CSS3
#2 of HTML and CSS3 #2 of HTML and CSS3
#2 of HTML and CSS3 Ahmed Yousef
 
PENGENDALIAN HIPERTENSI
PENGENDALIAN HIPERTENSIPENGENDALIAN HIPERTENSI
PENGENDALIAN HIPERTENSIanugrahwati
 
Curriculum vitae
Curriculum vitaeCurriculum vitae
Curriculum vitaechuanrui
 
Metode penelitian 5+6
Metode penelitian 5+6Metode penelitian 5+6
Metode penelitian 5+6anugrahwati
 
Eileen Shanahan Curriculum Vitae
Eileen Shanahan Curriculum VitaeEileen Shanahan Curriculum Vitae
Eileen Shanahan Curriculum VitaeEileen Shanahan
 
#1 of HTML and CSS3
#1 of HTML and CSS3 #1 of HTML and CSS3
#1 of HTML and CSS3 Ahmed Yousef
 
MobileMediaStrategies11DominicJacquesson
MobileMediaStrategies11DominicJacquessonMobileMediaStrategies11DominicJacquesson
MobileMediaStrategies11DominicJacquessonBriefing Media
 
Service Operation Processes
Service Operation ProcessesService Operation Processes
Service Operation Processesnuwulang
 
Stratégie de contenu numérique - Édition Restauration 2015
Stratégie de contenu numérique - Édition Restauration 2015Stratégie de contenu numérique - Édition Restauration 2015
Stratégie de contenu numérique - Édition Restauration 2015Gigi Huynh
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutIdean France
 
Les agences media et leurs sites internet
Les agences media et leurs sites internetLes agences media et leurs sites internet
Les agences media et leurs sites internetThomas Postclic
 
La refonte d’un intranet : 10 cles pour reussir votre projet
La refonte d’un intranet : 10 cles pour reussir votre projetLa refonte d’un intranet : 10 cles pour reussir votre projet
La refonte d’un intranet : 10 cles pour reussir votre projetPhilippeC
 
Etude de marché Beiersdorf/Nivea
Etude de marché Beiersdorf/NiveaEtude de marché Beiersdorf/Nivea
Etude de marché Beiersdorf/NiveaEdouard Kinziger
 

Destaque (20)

Safer sex
Safer sexSafer sex
Safer sex
 
Whattodo1
Whattodo1Whattodo1
Whattodo1
 
Comic strips
Comic stripsComic strips
Comic strips
 
New in html5
New in html5New in html5
New in html5
 
#2 of HTML and CSS3
#2 of HTML and CSS3 #2 of HTML and CSS3
#2 of HTML and CSS3
 
PENGENDALIAN HIPERTENSI
PENGENDALIAN HIPERTENSIPENGENDALIAN HIPERTENSI
PENGENDALIAN HIPERTENSI
 
Curriculum vitae
Curriculum vitaeCurriculum vitae
Curriculum vitae
 
February 19, 2011
February 19, 2011February 19, 2011
February 19, 2011
 
Metode penelitian 5+6
Metode penelitian 5+6Metode penelitian 5+6
Metode penelitian 5+6
 
Eileen Shanahan Curriculum Vitae
Eileen Shanahan Curriculum VitaeEileen Shanahan Curriculum Vitae
Eileen Shanahan Curriculum Vitae
 
#1 of HTML and CSS3
#1 of HTML and CSS3 #1 of HTML and CSS3
#1 of HTML and CSS3
 
MobileMediaStrategies11DominicJacquesson
MobileMediaStrategies11DominicJacquessonMobileMediaStrategies11DominicJacquesson
MobileMediaStrategies11DominicJacquesson
 
Presentation scoliosis
Presentation scoliosisPresentation scoliosis
Presentation scoliosis
 
Component Diagram
Component DiagramComponent Diagram
Component Diagram
 
Service Operation Processes
Service Operation ProcessesService Operation Processes
Service Operation Processes
 
Stratégie de contenu numérique - Édition Restauration 2015
Stratégie de contenu numérique - Édition Restauration 2015Stratégie de contenu numérique - Édition Restauration 2015
Stratégie de contenu numérique - Édition Restauration 2015
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
 
Les agences media et leurs sites internet
Les agences media et leurs sites internetLes agences media et leurs sites internet
Les agences media et leurs sites internet
 
La refonte d’un intranet : 10 cles pour reussir votre projet
La refonte d’un intranet : 10 cles pour reussir votre projetLa refonte d’un intranet : 10 cles pour reussir votre projet
La refonte d’un intranet : 10 cles pour reussir votre projet
 
Etude de marché Beiersdorf/Nivea
Etude de marché Beiersdorf/NiveaEtude de marché Beiersdorf/Nivea
Etude de marché Beiersdorf/Nivea
 

Semelhante a Game age ppt

JavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your codeJavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your codeLaurence Svekis ✔
 
Pointer Events in Canvas
Pointer Events in CanvasPointer Events in Canvas
Pointer Events in Canvasdeanhudson
 
Really Fast HTML5 Game Development with CreateJS
Really Fast HTML5 Game Development with CreateJSReally Fast HTML5 Game Development with CreateJS
Really Fast HTML5 Game Development with CreateJSDave Kelleher
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video gamedandylion13
 
Silverlight as a Gaming Platform
Silverlight as a Gaming PlatformSilverlight as a Gaming Platform
Silverlight as a Gaming Platformgoodfriday
 
Intro to Game Programming
Intro to Game ProgrammingIntro to Game Programming
Intro to Game ProgrammingRichard Jones
 
WP7 HUB_XNA overview
WP7 HUB_XNA overviewWP7 HUB_XNA overview
WP7 HUB_XNA overviewMICTT Palma
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricksdeanhudson
 
HTML5 Games with CreateJS
HTML5 Games with CreateJSHTML5 Games with CreateJS
HTML5 Games with CreateJSDave Kelleher
 
Intro to programming games with clojure
Intro to programming games with clojureIntro to programming games with clojure
Intro to programming games with clojureJuio Barros
 
building_games_with_ruby_rubyconf
building_games_with_ruby_rubyconfbuilding_games_with_ruby_rubyconf
building_games_with_ruby_rubyconftutorialsruby
 
building_games_with_ruby_rubyconf
building_games_with_ruby_rubyconfbuilding_games_with_ruby_rubyconf
building_games_with_ruby_rubyconftutorialsruby
 
Game Development for Nokia Asha Devices with Java ME #2
Game Development for Nokia Asha Devices with Java ME #2Game Development for Nokia Asha Devices with Java ME #2
Game Development for Nokia Asha Devices with Java ME #2Marlon Luz
 
Анатолій Ландишев - “Незв’язний код у Unity” GameCC 2017
Анатолій Ландишев - “Незв’язний код у Unity” GameCC 2017Анатолій Ландишев - “Незв’язний код у Unity” GameCC 2017
Анатолій Ландишев - “Незв’язний код у Unity” GameCC 2017Lviv Startup Club
 

Semelhante a Game age ppt (20)

JavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your codeJavaScript Advanced - Useful methods to power up your code
JavaScript Advanced - Useful methods to power up your code
 
Pointer Events in Canvas
Pointer Events in CanvasPointer Events in Canvas
Pointer Events in Canvas
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Real life XNA
Real life XNAReal life XNA
Real life XNA
 
Really Fast HTML5 Game Development with CreateJS
Really Fast HTML5 Game Development with CreateJSReally Fast HTML5 Game Development with CreateJS
Really Fast HTML5 Game Development with CreateJS
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
 
Silverlight as a Gaming Platform
Silverlight as a Gaming PlatformSilverlight as a Gaming Platform
Silverlight as a Gaming Platform
 
Intro to Game Programming
Intro to Game ProgrammingIntro to Game Programming
Intro to Game Programming
 
WP7 HUB_XNA overview
WP7 HUB_XNA overviewWP7 HUB_XNA overview
WP7 HUB_XNA overview
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
 
HTML5 Games with CreateJS
HTML5 Games with CreateJSHTML5 Games with CreateJS
HTML5 Games with CreateJS
 
Intro to programming games with clojure
Intro to programming games with clojureIntro to programming games with clojure
Intro to programming games with clojure
 
building_games_with_ruby_rubyconf
building_games_with_ruby_rubyconfbuilding_games_with_ruby_rubyconf
building_games_with_ruby_rubyconf
 
building_games_with_ruby_rubyconf
building_games_with_ruby_rubyconfbuilding_games_with_ruby_rubyconf
building_games_with_ruby_rubyconf
 
WP7 HUB_XNA
WP7 HUB_XNAWP7 HUB_XNA
WP7 HUB_XNA
 
MIDP: Game API
MIDP: Game APIMIDP: Game API
MIDP: Game API
 
Game Development for Nokia Asha Devices with Java ME #2
Game Development for Nokia Asha Devices with Java ME #2Game Development for Nokia Asha Devices with Java ME #2
Game Development for Nokia Asha Devices with Java ME #2
 
Unity3 d devfest-2014
Unity3 d devfest-2014Unity3 d devfest-2014
Unity3 d devfest-2014
 
Анатолій Ландишев - “Незв’язний код у Unity” GameCC 2017
Анатолій Ландишев - “Незв’язний код у Unity” GameCC 2017Анатолій Ландишев - “Незв’язний код у Unity” GameCC 2017
Анатолій Ландишев - “Незв’язний код у Unity” GameCC 2017
 
Dart - en ny platform til webudvikling af Rico Wind, Google
Dart - en ny platform til webudvikling af Rico Wind, GoogleDart - en ny platform til webudvikling af Rico Wind, Google
Dart - en ny platform til webudvikling af Rico Wind, Google
 

Último

Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin ClassesCeline George
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxVishalSingh1417
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxJisc
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024Elizabeth Walsh
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17Celine George
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701bronxfugly43
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSCeline George
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptxMaritesTamaniVerdade
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...Nguyen Thanh Tu Collection
 

Último (20)

Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 

Game age ppt

  • 4.
  • 6.
  • 7.
  • 10.
  • 11.
  • 12.
  • 13. gaming hardware 17,797 gaming software 44,730 online gaming 11,899 Total 74,426
  • 15. vs
  • 16. logic
  • 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); }
  • 36. 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); };
  • 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; }
  • 42. 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(); }
  • 43. 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(); } };