Complete HTML5 game Production Guide

 

Introduction

 

Create canvas

 

Game loop

 

Hello world

 

Create player

 

Keyboard Control

 

A: Use jQuery Hotkeys.

 

B: mobile player

 

Add more game elements

 

Shells

 

Enemy

 

Use Images

 

Collision Detection

 

Sound

 

Introduction

 

Do you want to use HTML5 Canvas to create a game? Follow this tutorial and you will immediately go to the road.

 

To read this tutorial, you must be at least familiar with javascript.

 

You can first play this game or directly read the article and download the game source code.

 

 

 

Create canvas

 

Before drawing anything, we must create a canvas. Because this is a complete guide, and we will use jQuery.

 

Var CANVAS_WIDTH = 480;

Var CANVAS_HEIGHT = 320;

 

Var canvasElement = $ ("<canvas width = '" + CANVAS_WIDTH +

"'Height = '" + CANVAS_HEIGHT + "'> </canvas> ");

Var canvas = canvasElement. get (0). getContext ("2d ");

CanvasElement. appendTo ('body ');

 

 

Game loop

 

To present consistent and smooth game animations to players, we need to render the canvas frequently to fool the players' eyes.

 

Var FPS = 30;

SetInterval (function (){

Update ();

Draw ();

}, 1000/FPS );

Now, regardless of the implementation in update and draw, it is important to know that setInterval () will periodically execute update and draw.

 

 

 

Hello world

 

Now we have set up a loop shelf. Let's modify the update and draw methods to write some text to the screen.

 

Function draw (){

Canvas. fillStyle = "#000"; // Set color to black

Canvas. fillText ("Sup Bro! ", 50, 50 );

}

Experts remind you to execute the program when you slightly change some code, so that you can quickly find the place where the program goes wrong.

 

The static text is displayed normally. Because we already have a loop, we can easily make the text move ~~~

 

Var textX = 50;

Var textY = 50;

 

Function update (){

TextX + = 1;

TextY + = 1;

}

 

Function draw (){

Canvas. fillStyle = "#000 ";

Canvas. fillText ("Sup Bro! ", TextX, textY );

}

Execute the program. If you follow the above step by step, you can see the text moving. However, the last text remains on the screen because we have not erased the canvas. Now we add the erasure Method to the draw method.

 

Function draw (){

Canvas. clearRect (0, 0, CANVAS_WIDTH, CANVAS_HEIGHT );

Canvas. fillStyle = "#000 ";

Canvas. fillText ("Sup Bro! ", TextX, textY );

}

Now you can see that the text is moving on the screen. It is a real game, just a semi-finished product.

 

 

 

Create player

 

Create an object that contains all information about the player and use the draw method. A simple object contains all the player information.

 

Var player = {

Color: "# 00A ",

X: 220,

Y: 270,

Width: 32,

Height: 32,

Draw: function (){

Canvas. fillStyle = this. color;

Canvas. fillRect (this. x, this. y, this. width, this. height );

}

};

We now use a solid color rectangle to represent the player. When we add it to the game, we need to clear the canvas and draw the player.

 

Function draw (){

Canvas. clearRect (0, 0, CANVAS_WIDTH, CANVAS_HEIGHT );

Player. draw ();

}

 

 

Keyboard Control

 

Use jQuery Hotkeys

JQuery Hotkeys plugin makes it easier to be compatible with different browsers when dealing with keyboard behavior. So that developers do not have to worry about the keyCode and charcode of different browsers. We bind events as follows:

 

$ (Document). bind ("keydown", "left", function (){...});

Mobile player

Function update (){

If (keydown. left ){

Player. x-= 2;

}

 

If (keydown. right ){

Player. x + = 2;

}

}

Does it feel fast enough to move? So we can improve its moving speed.

 

Function update (){

If (keydown. left ){

Player. x-= 5;

}

 

If (keydown. right ){

Player. x + = 5;

}

 

Player. x = player. x. clamp (0, CANVAS_WIDTH-player. width );

}

We can easily add other elements, such as shells:

 

Function update (){

If (keydown. space ){

Player. shoot ();

}

 

If (keydown. left ){

Player. x-= 5;

}

 

If (keydown. right ){

Player. x + = 5;

}

 

Player. x = player. x. clamp (0, CANVAS_WIDTH-player. width );

}

 

Player. shoot = function (){

Console. log ("Pew pew ");

// :) Well at least adding the key binding was easy...

};

 

 

Add more game elements

 

Shells

First, we need a set to store it:

 

Var playerBullets = [];

Then, we need a constructor to create shells:

 

Function Bullet (I ){

I. active = true;

 

I. xVelocity = 0;

I. yVelocity =-I. speed;

I. width = 3;

I. height = 3;

I. color = "#000 ";

 

I. inBounds = function (){

Return I. x> = 0 & I. x <= CANVAS_WIDTH &&

I. y> = 0 & I. y <= CANVAS_HEIGHT;

};

 

I. draw = function (){

Canvas. fillStyle = this. color;

Canvas. fillRect (this. x, this. y, this. width, this. height );

};

 

I. update = function (){

I. x + = I. xVelocity;

I. y + = I. yVelocity;

 

I. active = I. active & I. inBounds ();

};

 

Return I;

}

When a player fires, we need to add shells to the set:

 

Player. shoot = function (){

Var bulletPosition = this. midpoint ();

 

PlayerBullets. push (Bullet ({

Speed: 5,

X: bulletPosition. x,

Y: bulletPosition. y

}));

};

 

Player. midpoint = function (){

Return {

X: this. x + this. width/2,

Y: this. y + this. height/2

};

};

Modify the update and draw methods to enable fire:

 

Function update (){

...

PlayerBullets. forEach (function (bullet ){

Bullet. update ();

});

 

PlayerBullets = playerBullets. filter (function (bullet ){

Return bullet. active;

});

}

Function draw (){

...

PlayerBullets. forEach (function (bullet ){

Bullet. draw ();

});

}

Enemy

Enemies = [];

 

Function Enemy (I ){

I = I | {};

 

I. active = true;

I. age = Math. floor (Math. random () * 128 );

 

I. color = "# A2B ";

 

I. x = CANVAS_WIDTH/4 + Math. random () * CANVAS_WIDTH/2;

I. y = 0;

I. xVelocity = 0

I. yVelocity = 2;

 

I. width = 32;

I. height = 32;

 

I. inBounds = function (){

Return I. x> = 0 & I. x <= CANVAS_WIDTH &&

I. y> = 0 & I. y <= CANVAS_HEIGHT;

};

 

I. draw = function (){

Canvas. fillStyle = this. color;

Canvas. fillRect (this. x, this. y, this. width, this. height );

};

 

I. update = function (){

I. x + = I. xVelocity;

I. y + = I. yVelocity;

 

I. xVelocity = 3 * Math. sin (I. age * Math. PI/64 );

 

I. age ++;

 

I. active = I. active & I. inBounds ();

};

 

Return I;

};

 

Function update (){

...

 

Enemies. forEach (function (enemy ){

Enemy. update ();

});

 

Enemies = enemies. filter (function (enemy ){

Return enemy. active;

});

 

If (Math. random () <0.1 ){

Enemies. push (Enemy ());

}

};

 

Function draw (){

...

 

Enemies. forEach (function (enemy ){

Enemy. draw ();

});

}

 

 

Use Images

 

Player. sprite = Sprite ("player ");

 

Player. draw = function (){

This. sprite. draw (canvas, this. x, this. y );

};

 

Function Enemy (I ){

...

 

I. sprite = Sprite ("enemy ");

 

I. draw = function (){

This. sprite. draw (canvas, this. x, this. y );

};

 

...

}

 

 

Collision Detection

 

Function collides (a, B ){

Return a. x <B. x + B. width &&

A. x + a. width> B. x &&

A. y <B. y + B. height &&

A. y + a. height> B. y;

}

Function handleCollisions (){

PlayerBullets. forEach (function (bullet ){

Enemies. forEach (function (enemy ){

If (collides (bullet, enemy )){

Enemy. explode ();

Bullet. active = false;

}

});

});

 

Enemies. forEach (function (enemy ){

If (collides (enemy, player )){

Enemy. explode ();

Player. explode ();

}

});

}

 

Function update (){

...

HandleCollisions ();

}

Function Enemy (I ){

...

 

I. explode = function (){

This. active = false;

// Extra Credit: Add an explosion graphic

};

 

Return I;

};

 

Player. explode = function (){

This. active = false;

// Extra Credit: Add an explosion graphic and then end the game

};

 

 

Add sound

 

Function Enemy (I ){

...

 

I. explode = function (){

This. active = false;

// Extra Credit: Add an explosion graphic

};

 

Return I;

};

 

Player. explode = function (){

This. active = false;

// Extra Credit: Add an explosion graphic and then end the game

};

DNT brick house reminder: Following the above steps, we probably learned about the production process of various elements of a game. This type of game is enough to be done once, and there is no need to do it again, there are no difficult algorithms. They are all about processes and experience. If you want to take a good look and do something cool, it is something that artists have worked hard to cut corners, or the developer is involved in some performance optimization and collision optimization. Repeat the last one-read it and don't be a treasure.

 

Original link http://www.html5rocks.com/en/tutorials/canvas/notearsgame/#toc-player-movement

 

From being an Anet brick house