really fast html5 game development with createjs
Post on 16-Apr-2017
779 Views
Preview:
TRANSCRIPT
HTML5 Gameswith CreateJSDAVID KELLEHERJOIND.IN/14719
Flappy Bird
“Flappy Code” Hour of Code https://studio.code.org/flappy/10
Step 1: Flappy Tutorial
Step 2: ???
Step 3: PROFIT!
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");
Dave’s Dodgeball JS
// 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;}
Dave’s Dodgeball JS
// 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;}
Dave’s Dodgeball JS
// Create instances of ball graphicsballCatchable = 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 elementvar canvas = document.createElement("canvas");canvas.width = 600;canvas.height = 400;document.body.appendChild(canvas);
Dave’s Dodgeball JS
// 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;
Dave’s Dodgeball JS
// Add a ticker to the stage objectvar 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 Gameswith CreateJSDAVID KELLEHERJOIND.IN/14719
top related