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

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)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Remy Sharp
 
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
 
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
 
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
Christian Heilmann
 

Similar to HTML5 Games with CreateJS (20)

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)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
 
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...
 
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
 

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
 
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 (8)

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

Understanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdfUnderstanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdf
SEO Article Boost
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
Laura Szabó
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
Toptal Tech
 
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
cuobya
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
Design Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptxDesign Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptx
saathvikreddy2003
 
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfMeet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Florence Consulting
 
Azure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdfAzure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdf
AanSulistiyo
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
uehowe
 
7 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 20247 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 2024
Danica Gill
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
wolfsoftcompanyco
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
Trending Blogers
 
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
bseovas
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
uehowe
 
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
cuobya
 
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
ukwwuq
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
Search Result Showing My Post is Now Buried
Search Result Showing My Post is Now BuriedSearch Result Showing My Post is Now Buried
Search Result Showing My Post is Now Buried
Trish Parr
 

Recently uploaded (20)

Understanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdfUnderstanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdf
 
Gen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needsGen Z and the marketplaces - let's translate their needs
Gen Z and the marketplaces - let's translate their needs
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
 
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
Design Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptxDesign Thinking NETFLIX using all techniques.pptx
Design Thinking NETFLIX using all techniques.pptx
 
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfMeet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
 
Azure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdfAzure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdf
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
 
7 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 20247 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 2024
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
 
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
 
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
 
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
Search Result Showing My Post is Now Buried
Search Result Showing My Post is Now BuriedSearch Result Showing My Post is Now Buried
Search Result Showing My Post is Now Buried
 

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/