HTML and CSS Reference
In-Depth Information
Defining the numbered box
In this step, we will define the core game object of the game. We draw a square shape and
add a number value to the box. We will learn how to create a prototype inheritance, which
is one of the most important concepts when creaing a JavaScript game.
Engage thrusters
Let's use the following steps to create a square-shaped numbered box.
1. First, we put the width and height of the box in game.setting so that we can
easily adjust the box's size in future:
game.setting = {
boxWidth: 50,
boxHeight: 50,
// existing settings here
}
2. Next, we define the rectangle shape as illustrated in the following code snippet.
We are going to use it quite often before we apply graphics:
// RectShape
;(function(){
var game = this.game || (this.game={});
game.RectShape = (function(){
function RectShape(width, height, style){
createjs.Container.call(this); // super init
// set default shape style for missing ones.
style = style || {};
style.strokeWidth = style.strokeWidth || 0;
style.strokeColor = style.strokeColor || '';
style.fillColor = style.fillColor || 'rgba(255, 0, 0, 1)';
// draw the rect with graphics API
var shape = new createjs.Shape();
shape.graphics
.setStrokeStyle(style.strokeWidth)
.beginStroke(style.strokeColor)
.beginFill(style.fillColor)
.drawRect(0, 0, width, height);
this.addChild(shape);
 
Search WWH ::




Custom Search