SlideShare a Scribd company logo
HTML5 Games
with CreateJS
TWITTER: @david_kelleher
SLIDES: slideshare.net/davekelleher/
Game: davidk.net/game/
Outline
 Game Theory
 Object Oriented Concepts
 HTML5 Game Frameworks
 CreateJS Overview
 Code for Dodgeball Game
 Other CreateJS Features
 Atari SDK
Game Theory
Player
UI: Info, Feedback
Decision / Action
Outcome: Win, Loss
Parts of a Web Game
Player
 Cartoon character in gym
UI / Feedback
 Score (text field)
 Position of player
 Balls: position, direction, speed
Strategy
Dexterity
Luck
Gameplay Decisions/Actions
Decision / Action
 Strategy: Avoid or catch ball?
 Dexterity: Click to “catch” ball
Outcome
 Score point for touching clicked
(catchable) ball
 End game when hit by unclicked
ball
Object Oriented
Object Oriented
A procedural coding strategy
would have a game loop with a
massively complex controller.
Use an object oriented coding
strategy instead.
Object Oriented
 Blinky speeds up as you eat dots
 Pinky tends to move counterclockwise
 Inky makes unpredictable turns
 Clyde doesn’t always chase pac man
Object Oriented
 In JavaScript, classes can be defined using the
constructor and prototype methods.
Here is use of the constructor:
 function MyClass () {
var myPrivateVariable;
...
this.publicGetVar = function() {
return(myPrivateVariable);
}
...
Events
User Input
• Mouse Move
• Click, Mouseup, Mousedown
• Drag and Drop, Swipe
• Key Input
Game Event
• Timer, Tick
• Collision (Hit Test)
• User Defined
HTML5
Frameworks
Game Frameworks
 CreateJS: 2D, like working in Flash
 Phaser: 2D, more game focused
 ThreeJS: 3D, large community
 Babylon: 3D, more gaming focused
CreateJS
CreateJS
 EaselJS: Core <canvas> features
 TweenJS: Animation library
 SoundJS: Audio library
 PreloadJS: Asset manager
CreateJS
Dodgeball Code
Dave’s Dodgeball HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Dodgeball</title>
<script src="https://code.createjs.com/easeljs-0.8.0.min.js">
</script>
<script src="https://code.createjs.com/tweenjs-0.6.0.min.js">
</script>
</head>
<body>
<script src="js/game.js"></script>
</body>
</html>
CreateJS Classes Used
EaselJS TweenJS
• Stage
• Ticker
• Bitmap
• Text
• MouseEvent
• Tween
• Ease
Dave’s Dodgeball JS
// Create gym background instance
var gym = new createjs.Bitmap("img/gym.jpg");
Dave’s Dodgeball JS
// Create score instance
var score = new createjs.Text(0, 'bold 50px sans-serif', '#FFF');
score.x = 20;
score.y = 20;
score.value = 0; // custom property
// method for scoring a point
score.point = function () {
score.value++;
this.text = this.value;
}
Dave’s Dodgeball JS
// Create player instance
var player = new createjs.Bitmap("img/player.png");
player.x = 232;
player.y = 275;
player.alive = true; // custom property
player.die = function () {
player.alive = false;
player.image = new createjs.Bitmap("img/player-
dead.png").image;
}
Dave’s Dodgeball JS
// Create instances of ball graphics
ballCatchable = new createjs.Bitmap("img/ball-catch.png");
ballCaught = new createjs.Bitmap("img/star.gif")
Dave’s Dodgeball JS
// Define a Ball "class"
function Ball () {
var ball = new createjs.Bitmap("img/ball.png");
ball.catchable = false;
ball.caught = false;
ball.x = Math.floor((Math.random() * 600) + 1);
ball.scaleX = .25;
ball.scaleY = .25;
ball.regX = ball.image.width / 2;
ball.regY = ball.image.height / 2;
Dave’s Dodgeball JS
// Ball class continued ...
// Handler for mousedown listener
ball.addEventListener("mousedown", function() {
ball.image = ballCatchable.image;
ball.catchable = true;
});
Dave’s Dodgeball JS
// Ball class continued ...
// Handler for tick event listener (HitTest)
ball.on("tick", function() {
if (this.y<500) {
var xDist = this.x - player.x - 70;
var yDist = this.y - player.y - 30;
// Using pythagorus
var distance = Math.sqrt(xDist*xDist + yDist*yDist);
if ((distance < 50) && (this.caught == false)) {
if ((ball.catchable == true) &&
(player.alive == true)) {
ball.caught = true;
ball.image = ballCaught.image;
ball.regX = 130;
ball.regY = 130;
score.point();
} else {
player.die();
}
}
}
});
Dave’s Dodgeball JS
// Ball class continued ...
// Move the ball
ball.moveToX = Math.floor((Math.random() * 600) + 1);
ball.moveTime = Math.floor((Math.random() * 100) + 2000);
createjs.Tween.get(ball)
.to({scaleX:.75,
scaleY:.75,
x:ball.moveToX,
y:500,
rotation:1440},
ball.moveTime,
createjs.Ease.getPowOut(1.5)
);
Dave’s Dodgeball JS
// Ball class continued ...
// Provide "public" access to the ball object
this.getBall = function() { return(ball); }
}
Dave’s Dodgeball JS
// Make HTML5 canvas element
var canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 400;
document.body.appendChild(canvas);
Dave’s Dodgeball JS
// Make Create.js stage
var stage = new createjs.Stage(canvas);
stage.addChild(gym);
stage.addChild(score);
stage.addChild(player);
// Handler for mousemove listener (player follows mouse)
stage.on("stagemousemove", function(evt) {
if (player.alive == true) player.x = evt.stageX-68;
});
stage.mouseMoveOutside = true;
Dave’s Dodgeball JS
// Add a ticker to the stage object
var tickHandle = createjs.Ticker.on("tick", stage);
createjs.Ticker.setFPS(60);
Dave’s Dodgeball JS
// Ticker continued ...
createjs.Ticker.addEventListener("tick", function() {
// Add ball instance
randomNumber = Math.floor((Math.random() * 60) + 1);
if ((randomNumber == 1) && (player.alive == true)) {
stage.addChild(new Ball().getBall());
}
});
More CreateJS
SpriteSheet
SpriteSheet Class
var data = {
images: ["sprites.jpg"],
frames: {width:50, height:50},
animations: {
stand:0,
run:[1,5],
jump:[6,8,"run"]
}
};
Drag and Drop
object.on("pressmove", function(evt) {
evt.target.x = evt.stageX;
evt.target.y = evt.stageY;
});
Atari Arcade SDK
Atari Arcade
 https://www.atari.com/arcade/developers
 Atari Arcade SDK (extends CreateJS)
https://github.com/AtariAdmin/AtariArcadeSDK
HTML5 Games
with CreateJS
TWITTER: @david_kelleher
SLIDES: slideshare.net/davekelleher/
Game: davidk.net/game/

More Related Content

Similar to HTML5 Games with CreateJS

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
Dave Kelleher
 
CreateJS
CreateJSCreateJS
CreateJS
Jorge Solis
 
Game age ppt
Game age pptGame age ppt
Game age ppt
Ahmed Yousef
 
Snake in the DOM!
Snake in the DOM!Snake in the DOM!
Snake in the DOM!
Gil Steiner
 
Kick start with j query
Kick start with j queryKick start with j query
Kick start with j query
Md. Ziaul Haq
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
Oswald Campesato
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
Oswald Campesato
 
circ.db.dbcircleserver(1).py#!usrlocalbinpython3im.docx
circ.db.dbcircleserver(1).py#!usrlocalbinpython3im.docxcirc.db.dbcircleserver(1).py#!usrlocalbinpython3im.docx
circ.db.dbcircleserver(1).py#!usrlocalbinpython3im.docx
christinemaritza
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
Remy Sharp
 
Create online games with node.js and socket.io
Create online games with node.js and socket.ioCreate online games with node.js and socket.io
Create online games with node.js and socket.io
grrd01
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
PL dream
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Remy Sharp
 
Browser based games
Browser based gamesBrowser based games
Browser based games
Matthew Leach
 
Visual Component Testing -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Visual Component Testing  -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...Visual Component Testing  -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Visual Component Testing -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Applitools
 
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
Laurence Svekis ✔
 
jQuery Loves You
jQuery Loves YoujQuery Loves You
jQuery Loves You
DotNetMarche
 
Game Development With HTML5
Game Development With HTML5Game Development With HTML5
Game Development With HTML5
Gil Megidish
 
Game dev 101 part 3
Game dev 101 part 3Game dev 101 part 3
Game dev 101 part 3
Christoffer Noring
 
jQuery Foot-Gun Features
jQuery Foot-Gun FeaturesjQuery Foot-Gun Features
jQuery Foot-Gun Features
dmethvin
 
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
 

Similar to HTML5 Games with CreateJS (20)

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
 
CreateJS
CreateJSCreateJS
CreateJS
 
Game age ppt
Game age pptGame age ppt
Game age ppt
 
Snake in the DOM!
Snake in the DOM!Snake in the DOM!
Snake in the DOM!
 
Kick start with j query
Kick start with j queryKick start with j query
Kick start with j query
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
circ.db.dbcircleserver(1).py#!usrlocalbinpython3im.docx
circ.db.dbcircleserver(1).py#!usrlocalbinpython3im.docxcirc.db.dbcircleserver(1).py#!usrlocalbinpython3im.docx
circ.db.dbcircleserver(1).py#!usrlocalbinpython3im.docx
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Create online games with node.js and socket.io
Create online games with node.js and socket.ioCreate online games with node.js and socket.io
Create online games with node.js and socket.io
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
Browser based games
Browser based gamesBrowser based games
Browser based games
 
Visual Component Testing -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Visual Component Testing  -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...Visual Component Testing  -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Visual Component Testing -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
 
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
 
jQuery Loves You
jQuery Loves YoujQuery Loves You
jQuery Loves You
 
Game Development With HTML5
Game Development With HTML5Game Development With HTML5
Game Development With HTML5
 
Game dev 101 part 3
Game dev 101 part 3Game dev 101 part 3
Game dev 101 part 3
 
jQuery Foot-Gun Features
jQuery Foot-Gun FeaturesjQuery Foot-Gun Features
jQuery Foot-Gun Features
 
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...
 

More from Dave Kelleher

Uml Diagrams for Web Developers
Uml Diagrams for Web DevelopersUml Diagrams for Web Developers
Uml Diagrams for Web Developers
Dave Kelleher
 
Semantic HTML5 and JSON-LD
Semantic HTML5 and JSON-LDSemantic HTML5 and JSON-LD
Semantic HTML5 and JSON-LD
Dave Kelleher
 
Database Design and Normalization
Database Design and NormalizationDatabase Design and Normalization
Database Design and Normalization
Dave Kelleher
 
Debugging PHP Code
Debugging PHP CodeDebugging PHP Code
Debugging PHP Code
Dave Kelleher
 
Cinematic UX Design
Cinematic UX DesignCinematic UX Design
Cinematic UX Design
Dave Kelleher
 
Cryptocurrencies
CryptocurrenciesCryptocurrencies
Cryptocurrencies
Dave Kelleher
 
Cinematic UX Design
Cinematic UX DesignCinematic UX Design
Cinematic UX Design
Dave Kelleher
 
Semantic HTML5 and Microdata
Semantic HTML5 and MicrodataSemantic HTML5 and Microdata
Semantic HTML5 and Microdata
Dave Kelleher
 
Reverse Card Sort for UX Testing
Reverse Card Sort for UX TestingReverse Card Sort for UX Testing
Reverse Card Sort for UX Testing
Dave Kelleher
 

More from Dave Kelleher (9)

Uml Diagrams for Web Developers
Uml Diagrams for Web DevelopersUml Diagrams for Web Developers
Uml Diagrams for Web Developers
 
Semantic HTML5 and JSON-LD
Semantic HTML5 and JSON-LDSemantic HTML5 and JSON-LD
Semantic HTML5 and JSON-LD
 
Database Design and Normalization
Database Design and NormalizationDatabase Design and Normalization
Database Design and Normalization
 
Debugging PHP Code
Debugging PHP CodeDebugging PHP Code
Debugging PHP Code
 
Cinematic UX Design
Cinematic UX DesignCinematic UX Design
Cinematic UX Design
 
Cryptocurrencies
CryptocurrenciesCryptocurrencies
Cryptocurrencies
 
Cinematic UX Design
Cinematic UX DesignCinematic UX Design
Cinematic UX Design
 
Semantic HTML5 and Microdata
Semantic HTML5 and MicrodataSemantic HTML5 and Microdata
Semantic HTML5 and Microdata
 
Reverse Card Sort for UX Testing
Reverse Card Sort for UX TestingReverse Card Sort for UX Testing
Reverse Card Sort for UX Testing
 

Recently uploaded

Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur
 
Quiz Quiz Hota Hai (School Quiz 2018-19)
Quiz Quiz Hota Hai (School Quiz 2018-19)Quiz Quiz Hota Hai (School Quiz 2018-19)
Quiz Quiz Hota Hai (School Quiz 2018-19)
Kashyap J
 
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
ffg01100
 
Dewanstudio Project Portfolio 2023 show case
Dewanstudio Project Portfolio 2023 show caseDewanstudio Project Portfolio 2023 show case
Dewanstudio Project Portfolio 2023 show case
DEWANSTUDIO.COM
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99
 
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdfHow-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
Dolphin Data Lab
 
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
mahigarg2024#G05
 
2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage
Zsolt Nemeth
 
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai AvailableChennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
shamrisumri
 
PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024
Bestdesign2hub
 
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptxDraya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
ashishkumarrana9
 
6 Reasons to Use a VPN | 3S VPN Server App
6 Reasons to Use a VPN | 3S VPN Server App6 Reasons to Use a VPN | 3S VPN Server App
6 Reasons to Use a VPN | 3S VPN Server App
VPN Server
 
Steps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a companySteps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a company
sivaraman163206
 
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx
byubyu7
 
Book dating , international dating phgra
Book dating , international dating phgraBook dating , international dating phgra
Book dating , international dating phgra
thomaskurtha9
 
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
shamrisumri
 
AWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaipromAWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaiprom
ธนาพัฒน์ ลิ้มสายพรหม
 
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhấtBai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
Thiên Đường Tình Yêu
 
UMN degree offer diploma Transcript
UMN degree offer diploma TranscriptUMN degree offer diploma Transcript
UMN degree offer diploma Transcript
cenocb
 
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptxSlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
NandakumarP24
 

Recently uploaded (20)

Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
 
Quiz Quiz Hota Hai (School Quiz 2018-19)
Quiz Quiz Hota Hai (School Quiz 2018-19)Quiz Quiz Hota Hai (School Quiz 2018-19)
Quiz Quiz Hota Hai (School Quiz 2018-19)
 
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
 
Dewanstudio Project Portfolio 2023 show case
Dewanstudio Project Portfolio 2023 show caseDewanstudio Project Portfolio 2023 show case
Dewanstudio Project Portfolio 2023 show case
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
 
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdfHow-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
 
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
 
2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage
 
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai AvailableChennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
 
PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024
 
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptxDraya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
 
6 Reasons to Use a VPN | 3S VPN Server App
6 Reasons to Use a VPN | 3S VPN Server App6 Reasons to Use a VPN | 3S VPN Server App
6 Reasons to Use a VPN | 3S VPN Server App
 
Steps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a companySteps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a company
 
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx
 
Book dating , international dating phgra
Book dating , international dating phgraBook dating , international dating phgra
Book dating , international dating phgra
 
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
 
AWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaipromAWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaiprom
 
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhấtBai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
 
UMN degree offer diploma Transcript
UMN degree offer diploma TranscriptUMN degree offer diploma Transcript
UMN degree offer diploma Transcript
 
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptxSlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
 

HTML5 Games with CreateJS

  • 1. HTML5 Games with CreateJS TWITTER: @david_kelleher SLIDES: slideshare.net/davekelleher/ Game: davidk.net/game/
  • 2. Outline  Game Theory  Object Oriented Concepts  HTML5 Game Frameworks  CreateJS Overview  Code for Dodgeball Game  Other CreateJS Features  Atari SDK
  • 4. Player UI: Info, Feedback Decision / Action Outcome: Win, Loss Parts of a Web Game
  • 6. UI / Feedback  Score (text field)  Position of player  Balls: position, direction, speed
  • 8. Decision / Action  Strategy: Avoid or catch ball?  Dexterity: Click to “catch” ball
  • 9. Outcome  Score point for touching clicked (catchable) ball  End game when hit by unclicked ball
  • 11. Object Oriented A procedural coding strategy would have a game loop with a massively complex controller. Use an object oriented coding strategy instead.
  • 12. Object Oriented  Blinky speeds up as you eat dots  Pinky tends to move counterclockwise  Inky makes unpredictable turns  Clyde doesn’t always chase pac man
  • 13. Object Oriented  In JavaScript, classes can be defined using the constructor and prototype methods. Here is use of the constructor:  function MyClass () { var myPrivateVariable; ... this.publicGetVar = function() { return(myPrivateVariable); } ...
  • 14. Events User Input • Mouse Move • Click, Mouseup, Mousedown • Drag and Drop, Swipe • Key Input Game Event • Timer, Tick • Collision (Hit Test) • User Defined
  • 16. Game Frameworks  CreateJS: 2D, like working in Flash  Phaser: 2D, more game focused  ThreeJS: 3D, large community  Babylon: 3D, more gaming focused
  • 18. CreateJS  EaselJS: Core <canvas> features  TweenJS: Animation library  SoundJS: Audio library  PreloadJS: Asset manager CreateJS
  • 20. Dave’s Dodgeball HTML5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Dodgeball</title> <script src="https://code.createjs.com/easeljs-0.8.0.min.js"> </script> <script src="https://code.createjs.com/tweenjs-0.6.0.min.js"> </script> </head> <body> <script src="js/game.js"></script> </body> </html>
  • 21. CreateJS Classes Used EaselJS TweenJS • Stage • Ticker • Bitmap • Text • MouseEvent • Tween • Ease
  • 22. Dave’s Dodgeball JS // Create gym background instance var gym = new createjs.Bitmap("img/gym.jpg");
  • 23. Dave’s Dodgeball JS // Create score instance var score = new createjs.Text(0, 'bold 50px sans-serif', '#FFF'); score.x = 20; score.y = 20; score.value = 0; // custom property // method for scoring a point score.point = function () { score.value++; this.text = this.value; }
  • 24. Dave’s Dodgeball JS // Create player instance var player = new createjs.Bitmap("img/player.png"); player.x = 232; player.y = 275; player.alive = true; // custom property player.die = function () { player.alive = false; player.image = new createjs.Bitmap("img/player- dead.png").image; }
  • 25. Dave’s Dodgeball JS // Create instances of ball graphics ballCatchable = new createjs.Bitmap("img/ball-catch.png"); ballCaught = new createjs.Bitmap("img/star.gif")
  • 26. Dave’s Dodgeball JS // Define a Ball "class" function Ball () { var ball = new createjs.Bitmap("img/ball.png"); ball.catchable = false; ball.caught = false; ball.x = Math.floor((Math.random() * 600) + 1); ball.scaleX = .25; ball.scaleY = .25; ball.regX = ball.image.width / 2; ball.regY = ball.image.height / 2;
  • 27. Dave’s Dodgeball JS // Ball class continued ... // Handler for mousedown listener ball.addEventListener("mousedown", function() { ball.image = ballCatchable.image; ball.catchable = true; });
  • 28. Dave’s Dodgeball JS // Ball class continued ... // Handler for tick event listener (HitTest) ball.on("tick", function() { if (this.y<500) { var xDist = this.x - player.x - 70; var yDist = this.y - player.y - 30; // Using pythagorus var distance = Math.sqrt(xDist*xDist + yDist*yDist); if ((distance < 50) && (this.caught == false)) { if ((ball.catchable == true) && (player.alive == true)) { ball.caught = true; ball.image = ballCaught.image; ball.regX = 130; ball.regY = 130; score.point(); } else { player.die(); } } } });
  • 29. Dave’s Dodgeball JS // Ball class continued ... // Move the ball ball.moveToX = Math.floor((Math.random() * 600) + 1); ball.moveTime = Math.floor((Math.random() * 100) + 2000); createjs.Tween.get(ball) .to({scaleX:.75, scaleY:.75, x:ball.moveToX, y:500, rotation:1440}, ball.moveTime, createjs.Ease.getPowOut(1.5) );
  • 30. Dave’s Dodgeball JS // Ball class continued ... // Provide "public" access to the ball object this.getBall = function() { return(ball); } }
  • 31. Dave’s Dodgeball JS // Make HTML5 canvas element var canvas = document.createElement("canvas"); canvas.width = 600; canvas.height = 400; document.body.appendChild(canvas);
  • 32. Dave’s Dodgeball JS // Make Create.js stage var stage = new createjs.Stage(canvas); stage.addChild(gym); stage.addChild(score); stage.addChild(player); // Handler for mousemove listener (player follows mouse) stage.on("stagemousemove", function(evt) { if (player.alive == true) player.x = evt.stageX-68; }); stage.mouseMoveOutside = true;
  • 33. Dave’s Dodgeball JS // Add a ticker to the stage object var tickHandle = createjs.Ticker.on("tick", stage); createjs.Ticker.setFPS(60);
  • 34. Dave’s Dodgeball JS // Ticker continued ... createjs.Ticker.addEventListener("tick", function() { // Add ball instance randomNumber = Math.floor((Math.random() * 60) + 1); if ((randomNumber == 1) && (player.alive == true)) { stage.addChild(new Ball().getBall()); } });
  • 37. SpriteSheet Class var data = { images: ["sprites.jpg"], frames: {width:50, height:50}, animations: { stand:0, run:[1,5], jump:[6,8,"run"] } };
  • 38. Drag and Drop object.on("pressmove", function(evt) { evt.target.x = evt.stageX; evt.target.y = evt.stageY; });
  • 40. Atari Arcade  https://www.atari.com/arcade/developers  Atari Arcade SDK (extends CreateJS) https://github.com/AtariAdmin/AtariArcadeSDK
  • 41. HTML5 Games with CreateJS TWITTER: @david_kelleher SLIDES: slideshare.net/davekelleher/ Game: davidk.net/game/