Really Fast HTML5 Game Development with CreateJS

HTML5 Gameswith CreateJSDAVID KELLEHERJOIND.IN/14719

Flappy Bird

“Flappy Code” Hour of Code https://studio.code.org/flappy/10

https://studio.code.org/flappy/10

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/

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 instancevar gym = new createjs.Bitmap("img/gym.jpg");


// Create score instancevar 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 pointscore.point = function () { score.value++; this.text = this.value;}


// Create player instancevar player = new createjs.Bitmap("img/player.png");player.x = 232;player.y = 275;player.alive = true; // custom propertyplayer.die = function () { player.alive = false; player.image = new createjs.Bitmap("img/player-dead.png").image;}


// Create instances of ball graphicsballCatchable = new createjs.Bitmap("img/ball-catch.png");ballCaught = new createjs.Bitmap("img/star.gif")


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


// Ball class continued ...

// Handler for mousedown listener ball.addEventListener("mousedown", function() { ball.image = ballCatchable.image; ball.catchable = true; });



// 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(); } } } });



// 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) );



// Provide "public" access to the ball object this.getBall = function() { return(ball); }}


// Make HTML5 canvas elementvar canvas = document.createElement("canvas");canvas.width = 600;canvas.height = 400;document.body.appendChild(canvas);


// Make Create.js stagevar 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;


// Add a ticker to the stage objectvar tickHandle = createjs.Ticker.on("tick", stage);createjs.Ticker.setFPS(60);


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



https://github.com/AtariAdmin/AtariArcadeSDK

https://github.com/AtariAdmin/AtariArcadeSDK

HTML5 Gameswith CreateJSDAVID KELLEHERJOIND.IN/14719

Technology

Really Fast HTML5 Game Development with CreateJS