"HTML5 Game Frame Craftyjs" a simple table tennis game Example __ Front

The CRAFTYJS is a GPL-and MIT dual-licensed, JavaScript-based open source HTML5 framework, the biggest feature of which is that it does not use a typical class and inheritance system, but rather provides developers with an entity (entity) and component (component) structure to organize code. This organizational structure can give your code a lot of flexibility.

Website address: http://craftyjs.com/

First, the basic structure of CRAFTYJS programming:

Entity

All objects in the game are treated as entities, such as text, players, and so on. We use CRAFTY.E () to create an entity, such as

var myentity = crafty.e ("2D");

The code above creates an entity that has only one component "2D". So what is the component.

Component

component is used to provide functionality for entities, the so-called provision function is actually provides the entity and the method, in the above example "2D" is a component, and is the crafty provides a predefined component, "The 2D" component can enable your entity to have the coordinates, the high, the width and so on basic attribute, We can set these properties to set the location of the entity, such as:

Myentity.attr (x:200,y:200,w:10,h:100);

The above code. attr () is a function used to set the properties of the entity, which is provided by the core object of crafty (later in detail), where we set the position of the entity to (200,200), W represents the width of the entity, and H represents the height of the entity.

Now that we have an entity, but the entity does not listen to the canvas, we need other components to complete the task.

Canvas and Dom

The two predefined components provide two methods for drawing entities, which are known by name, one that uses canvas to draw entities, and one that uses DOM to draw entities. The following uses canvas to redefine our entity:

var myentity = crafty.e ("2d,canvas");

Myentity.attr (x:200,y:200,w:10,h:100);

This allows our entities to be drawn on the screen in a canvas way, if you want to use the DOM to draw the entity as long as you replace the component.

var myentity = crafty.e ("2d,dom");

Myentity.attr (x:200,y:200,w:10,h:100);

Note: There's a color problem here, the above code I did not experiment with, but in my previous experience, the default color of the entity drawn with canvas is black, the default is white when using DOM, if you want to set the color need to use another name color component, this component provides. Color () function to set the entity properties.

See here you can see why crafty is very flexible and if you want to support SVG graphics later, just define an SVG component.

This is all about using components, and components can be customized, crafty.c () function definition, because it's not used in the example, so let's not say,

Here is the table tennis game code (in order to simplify the official online example, without using the scoreboard)

Crafty.init (by);
Crafty.background (' RGB (127,127,127) ');

Racket (two rectangles in fact).
crafty.e ("Paddle, 2d, DOM, Color, Multiway")
	. Color (' RGB (255,0,0) ')
	. attr ({x:20, y:100, W:10, h:100}) C5/>.multiway (4, {W: -90, s:90});
CRAFTY.E ("Paddle, 2d, DOM, Color, Multiway")
	. Color (' RGB (0,255,0) ')
	. attr ({x:580, y:100, W:10, h:100})
	. Multiway (4, {up_arrow: -90, down_arrow:90});

Ball
CRAFTY.E ("2d, DOM, Color, collision")
	. Color (' RGB (0,0,255) ')
	. attr ({x:300, y:150, W:10, H:10,
  dx:crafty.math.randomint (2, 5), 
			dY:Crafty.math.randomInt (2, 5)})
	. bind (' Enterframe ', function () {
		//hit Floor or roof
		if (this.y <= 0 | | this.y->= 290)
			This.dy *=-1;

		if (This.x >) {
			this.x = +;
		}
		if (This.x <) {
			this.x = +;
		}

		This.x + = THIS.DX;
		This.y + = This.dy;
	})
	. Onhit (' Paddle ', function () {
	this.dx *=-1;
})

First of all, there's something in the code that I haven't said, first of all,

Crafty.init (600,300);

Initialization code, must have, used to create the game stage, 600 indicates the width of the stage, 300 indicates the height of the stage.

Crafy.background ("RGB (127,127,127)"));

This code is used to set the background color, and the back color is set to gray.

Then the components paddle and collision

Component paddle is an undefined component that does not provide any functionality, only its identity, where we know that you can add an undefined component to an entity. This component is used only in the Onhit () function of the predefined components provided by the system, the collision component for collision detection, and the Onhit () function provided by the collision to invoke its callback function when the collision is generated.

There is also a multiway component, which is used to set the keyboard response, is to use the keyboard to control two rackets, this component provides the Multiway () function.

About game Logic

Play the game will know = =,w and S key control left racket, right side key control right racket.

(First write, where did not read understand tell me, I change)