SlideShare a Scribd company logo
HTML5 Games
with CreateJS
DAVID KELLEHER
JOIND.IN/14719
Flappy Bird
 “Flappy Code” Hour of Code
 https://studio.code.org/flappy/10
Step 1: Flappy Tutorial
Step 2: ???
Step 3: PROFIT!
“Under the Hood”
 Dave’s Dodgeball
 http://www.davidk.net/game/
Game Theory
Player
UI: Info, Feedback
Decision / Action
Outcome: Win, Loss
Parts of a Web Game
Strategy
Dexterity
Luck
Gameplay
Events
User Input
• Mouse Move
• Click, Mouseup, Mousedown
• Drag and Drop, Swipe
• Key Input
Game Event
• Timer, Tick
• Collision (Hit Test)
• User Defined
Dave’s Dodgeball
 Player
 Person in the gym
 User Interface
 Score (integer displayed in text field
 Position of player
 Position, direction, and speed of balls (Luck)
Dave’s Dodgeball
 Decision / Action
 Move to avoid ball or attempt catch (Strategy)
 Click fast and accurately to attempt catch (Skill)
 Outcome
 Game over when uncaught ball hits player
Dave’s Dodgeball
 Rules
 Balls thrown from top, random times and direction
 Player moves horizontally, tracking mouse move
 Player clicks on ball directly in front to catch
 Player scores 1 point for each ball caught
 Game ends when uncaught ball hits player
Variations
Object Oriented
Object Oriented
Don’t try this with
procedural coding
strategy. That would be
a game loop with a
massively complex
controller.
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);
}
...
Game Frameworkds
 CreateJS – extends the HTML5 <canvas>
 EaselJS
 TweenJS
 SoundJS
 PreloadJS
 Works with Angular, TogetherJS, other libraries
 Publish from Flash Pro to CreateJS
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>
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());
}
});
Atari Arcade
 https://www.atari.com/arcade/developers
 Atari Arcade SDK (extends CreateJS)
https://github.com/AtariAdmin/AtariArcadeSDK
HTML5 Games
with CreateJS
DAVID KELLEHER
JOIND.IN/14719

More Related Content

What's hot

Steam Learn: Javascript and OOP
Steam Learn: Javascript and OOPSteam Learn: Javascript and OOP
Steam Learn: Javascript and OOP
inovia
 
HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011
Robert Nyman
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.js
jeresig
 
Security Bootcamp 2013 lap trinh web an toan
Security Bootcamp 2013   lap trinh web an toanSecurity Bootcamp 2013   lap trinh web an toan
Security Bootcamp 2013 lap trinh web an toan
Security Bootcamp
 
Security Bootcamp 2013 - Lap trinh web an toan
Security Bootcamp 2013 - Lap trinh web an toanSecurity Bootcamp 2013 - Lap trinh web an toan
Security Bootcamp 2013 - Lap trinh web an toan
Security Bootcamp
 
лукьянченко л.а. пос 10а
лукьянченко л.а. пос 10алукьянченко л.а. пос 10а
лукьянченко л.а. пос 10а
l10bov
 
Skills for innovation: Learner-centered design a key challenge for the 21st c...
Skills for innovation: Learner-centered design a key challenge for the 21st c...Skills for innovation: Learner-centered design a key challenge for the 21st c...
Skills for innovation: Learner-centered design a key challenge for the 21st c...
@cristobalcobo
 

What's hot (7)

Steam Learn: Javascript and OOP
Steam Learn: Javascript and OOPSteam Learn: Javascript and OOP
Steam Learn: Javascript and OOP
 
HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011
 
Processing and Processing.js
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.js
 
Security Bootcamp 2013 lap trinh web an toan
Security Bootcamp 2013   lap trinh web an toanSecurity Bootcamp 2013   lap trinh web an toan
Security Bootcamp 2013 lap trinh web an toan
 
Security Bootcamp 2013 - Lap trinh web an toan
Security Bootcamp 2013 - Lap trinh web an toanSecurity Bootcamp 2013 - Lap trinh web an toan
Security Bootcamp 2013 - Lap trinh web an toan
 
лукьянченко л.а. пос 10а
лукьянченко л.а. пос 10алукьянченко л.а. пос 10а
лукьянченко л.а. пос 10а
 
Skills for innovation: Learner-centered design a key challenge for the 21st c...
Skills for innovation: Learner-centered design a key challenge for the 21st c...Skills for innovation: Learner-centered design a key challenge for the 21st c...
Skills for innovation: Learner-centered design a key challenge for the 21st c...
 

Similar to Really Fast HTML5 Game Development with CreateJS

HTML5 Games with CreateJS
HTML5 Games with CreateJSHTML5 Games with CreateJS
HTML5 Games with CreateJS
Dave Kelleher
 
Game age ppt
Game age pptGame age ppt
Game age ppt
Ahmed Yousef
 
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
 
CreateJS
CreateJSCreateJS
CreateJS
Jorge Solis
 
Node meetup feb_20_12
Node meetup feb_20_12Node meetup feb_20_12
Node meetup feb_20_12
jafar104
 
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
 
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
 
Clickable DIVs and other icebergs
Clickable DIVs and other icebergsClickable DIVs and other icebergs
Clickable DIVs and other icebergs
Ben Buchanan
 
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
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
Remy Sharp
 
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
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
Jussi Pohjolainen
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
Remy Sharp
 
Game dev 101 part 3
Game dev 101 part 3Game dev 101 part 3
Game dev 101 part 3
Christoffer Noring
 
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
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
Paul Irish
 

Similar to Really Fast HTML5 Game Development with CreateJS (20)

HTML5 Games with CreateJS
HTML5 Games with CreateJSHTML5 Games with CreateJS
HTML5 Games with CreateJS
 
Game age ppt
Game age pptGame age ppt
Game age ppt
 
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...
 
CreateJS
CreateJSCreateJS
CreateJS
 
Node meetup feb_20_12
Node meetup feb_20_12Node meetup feb_20_12
Node meetup feb_20_12
 
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
 
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
 
Clickable DIVs and other icebergs
Clickable DIVs and other icebergsClickable DIVs and other icebergs
Clickable DIVs and other icebergs
 
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)
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
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
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Game dev 101 part 3
Game dev 101 part 3Game dev 101 part 3
Game dev 101 part 3
 
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
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
 

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

Uml Diagrams for Web Developers
Uml Diagrams for Web DevelopersUml Diagrams for Web Developers
Uml Diagrams for Web Developers
 
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

Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
LucaBarbaro3
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
SAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloudSAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloud
maazsz111
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 

Recently uploaded (20)

Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
SAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloudSAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloud
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 

Really Fast HTML5 Game Development with CreateJS

  • 1. HTML5 Games with CreateJS DAVID KELLEHER JOIND.IN/14719
  • 2. Flappy Bird  “Flappy Code” Hour of Code  https://studio.code.org/flappy/10
  • 3. Step 1: Flappy Tutorial Step 2: ??? Step 3: PROFIT!
  • 4. “Under the Hood”  Dave’s Dodgeball  http://www.davidk.net/game/
  • 6. Player UI: Info, Feedback Decision / Action Outcome: Win, Loss Parts of a Web Game
  • 8. Events User Input • Mouse Move • Click, Mouseup, Mousedown • Drag and Drop, Swipe • Key Input Game Event • Timer, Tick • Collision (Hit Test) • User Defined
  • 9. Dave’s Dodgeball  Player  Person in the gym  User Interface  Score (integer displayed in text field  Position of player  Position, direction, and speed of balls (Luck)
  • 10. Dave’s Dodgeball  Decision / Action  Move to avoid ball or attempt catch (Strategy)  Click fast and accurately to attempt catch (Skill)  Outcome  Game over when uncaught ball hits player
  • 11. Dave’s Dodgeball  Rules  Balls thrown from top, random times and direction  Player moves horizontally, tracking mouse move  Player clicks on ball directly in front to catch  Player scores 1 point for each ball caught  Game ends when uncaught ball hits player
  • 14. Object Oriented Don’t try this with procedural coding strategy. That would be a game loop with a massively complex controller.
  • 15. 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
  • 16. 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); } ...
  • 17. Game Frameworkds  CreateJS – extends the HTML5 <canvas>  EaselJS  TweenJS  SoundJS  PreloadJS  Works with Angular, TogetherJS, other libraries  Publish from Flash Pro to CreateJS
  • 18. 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>
  • 19. Dave’s Dodgeball JS // Create gym background instance var gym = new createjs.Bitmap("img/gym.jpg");
  • 20. 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; }
  • 21. 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; }
  • 22. Dave’s Dodgeball JS // Create instances of ball graphics ballCatchable = new createjs.Bitmap("img/ball-catch.png"); ballCaught = new createjs.Bitmap("img/star.gif")
  • 23. 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;
  • 24. Dave’s Dodgeball JS // Ball class continued ... // Handler for mousedown listener ball.addEventListener("mousedown", function() { ball.image = ballCatchable.image; ball.catchable = true; });
  • 25. 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(); } } } });
  • 26. 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) );
  • 27. Dave’s Dodgeball JS // Ball class continued ... // Provide "public" access to the ball object this.getBall = function() { return(ball); } }
  • 28. Dave’s Dodgeball JS // Make HTML5 canvas element var canvas = document.createElement("canvas"); canvas.width = 600; canvas.height = 400; document.body.appendChild(canvas);
  • 29. 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;
  • 30. Dave’s Dodgeball JS // Add a ticker to the stage object var tickHandle = createjs.Ticker.on("tick", stage); createjs.Ticker.setFPS(60);
  • 31. 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()); } });
  • 32. Atari Arcade  https://www.atari.com/arcade/developers  Atari Arcade SDK (extends CreateJS) https://github.com/AtariAdmin/AtariArcadeSDK
  • 33. HTML5 Games with CreateJS DAVID KELLEHER JOIND.IN/14719