Canvas front-end game development--flappybird detailed

Always want to do something small, until recently read this "HTML5 game development", only to understand the game development of a little bit of knowledge of getting started.

This article on the study of a few examples, their hands-on practice, did a flappybird, source sharing in the dial, you can also refer to GitHub, there are more examples of the game. (You can click on the bottom "read the original" download source code)

Game

HTML5 's Canvas

Canvas is the element used for drawing in Html5, which can draw various shapes, such as rectangles, polygons, circles, and so on. If you want to understand the use of canvas, you can refer to:

Http://www.w3school.com.cn/tags/html_ref_canvas.asp

If you want to use canvas, you first need to get the context object:

Ctx=document.getelementbyid (' canvas '). GetContext (' 2d ');

Then use this CTX to draw the graph

Each drawing in Cavas is a standalone operation. For example, two drawings are drawn, the second one is drawn in the form of overrides, so the order of drawing is very important.

The DrawImage of canvas

In this game development, the main use is based on the image of the api:drawimage, it has two basic methods of use:

Ctx.drawimage (Image,this.bx,this.by,this.bwidth,this.bheight);

Ctx.drawimage (Image,x,y,width,height,this.px,this.py,this.pwidth,this.pheight);

In the first API, you specify an image object, and then give the x, y coordinates of the drawing picture and the width and height.

In the second API, the first set of x,y,width,height specifies the coordinate dimensions of the cropped picture, which is often used when using multi-element vectors. Like what:

In the above image in order to reduce the number of requests for picture resources, put a lot of elements in a picture, it is necessary to cut through the way to get the specified picture elements.

Flappybird principle Analysis

In fact, this game is very simple, a picture can read the mystery of it:

Where the background and ground are motionless.

Birds only up and down two actions can be achieved by controlling the y-coordinate of the bird.

The top and bottom of the pipe will only move to the left, in order to achieve a simple implementation, a picture in the game will only appear a pair of tubes, so when the tube moved out of the left side of the background box, the pipe will automatically put on the right!

if (up_pipe.px+up_pipe.pwidth>0) {

UP_PIPE.PX-= velocity;

DOWN_PIPE.PX-= velocity;

}else{

UP_PIPE.PX = 400;

DOWN_PIPE.PX = 400;

Up_pipe.pheight = 100+math.random*200;

down_pipe.py = Up_pipe.pheight+pipe_height;

Down_pipe.pheight = 600-down_pipe.py;

Isscore = true;

}

It's simple!

Since the game is a total of these elements, put them all into a objects array, through the Setinteral method, in a certain interval of time, to perform a redraw.

When redrawing, all the elements in the screen are cleared, then the graphics are drawn at once according to the coordinates of the new element, so that the effect of movement occurs.

Simulated bird gravity

Since this game does not involve the bird's lateral movement, it is possible to simulate the movement of the bird's whereabouts as well as the ascending action.

Ascent: This is simple, just subtract a certain value from the y-coordinate of the bird.

Drop: In fact, Gravity does not need to use gt^2 to simulate, you can simply specify two variables, v1 and gravity, these two variables and setinterval time together, you can simulate the gravity.

Ver2 = ver1+gravity;

Bird.by + = (ver2+ver1) *0.5;

Collision detection

In the game the bird touches the pipe or the ground will count the game end:

Where the detection of the pipeline on condition 1 is:

(bird.bx+bird.bwidth>up_pipe.px) && (bird.by>up_pipe.py) && (bird.bx+bird.bwidth<up_ Pipe.px+up_pipe.pwidth) && (bird.by<up_pipe.py+up_pipe.pheight)) | |

(bird.bx+bird.bwidth>up_pipe.px) && (bird.by>up_pipe.py) && (bird.bx+bird.bwidth<up_ Pipe.px+up_pipe.pwidth) && (bird.by<up_pipe.py+up_pipe.pheight))

The detection of the pipeline under condition 2 is:

(bird.bx>down_pipe.px) && (bird.by>down_pipe.py) && (bird.bx<down_pipe.px+down_ Pipe.pwidth) && (bird.by<down_pipe.py+down_pipe.pheight)) | |

(bird.bx>down_pipe.px) && (bird.by+bird.bheight>down_pipe.py) && (bird.bx<down_pipe.px+ Down_pipe.pwidth) && (bird.by+bird.bheight<down_pipe.py+down_pipe.pheight))

Condition 3 The ground detection is the simplest, for:

Bird.by+bird.bheight>ground.bgy

If these three conditions are met, the loop is cleared and the game end message is prompted, even if the game is over.

Fractional calculation

The calculation of fractions is similar to collision detection by setting a switch that is set to true when the pipe is re-appearing. When the score is added to 1 o'clock, set to false.

The bird's leftmost x-coordinate is considered successful if it exceeds the x+width of the tube.

if (Isscore && bird.bx>up_pipe.px+up_pipe.pwidth) {

Score + = 1;

Isscore = false;

if (score>0 && score%10 = = = 0) {

velocity++;

}

}

After passing, the score plus 1, the speed of +1.

All source code

<! DOCTYPE html>

<title>flappy bird</title>

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>

<script type= "Text/javascript" >

Edit by Xingoo

Fork on my GITHUB:HTTPS://GITHUB.COM/XINGHALO/CODEJS/TREE/MASTER/HTML5

var ctx;

var cwidth = 400;

var cheight = 600;

var objects =;

var birdindex = 0;

var ver1 = 10;

var ver2;

var gravity = 2;

var pipe_height = 200;

var velocity = 10;

var Tid;

var score = 0;

var isscore = false;

var birds = ["./images/0.gif", "./images/1.gif", "./images/2.gif"];

var back = new Background (0,0,400,600, "./images/bg.png");

var up_pipe = new Uppipe (0,0,100,200, "./images/pipe.png");

var down_pipe = new Downpipe (0,400,100,200, "./images/pipe.png");

var ground = new Background (0,550,400,200, "./images/ground.png");

var bird = new Bird (80,300,40,40,birds);

Objects.push (back);

Objects.push (Up_pipe);

Objects.push (Down_pipe);

Objects.push (ground);

Objects.push (bird);

function Uppipe (X,Y,WIDTH,HEIGHT,IMG_SRC) {

THIS.PX = x;

this.py = y;

This.pwidth = width;

This.pheight = height;

THIS.IMG_SRC = IMG_SRC;

This.draw = Drawuppipe;

}

function Downpipe (X,Y,WIDTH,HEIGHT,IMG_SRC) {

THIS.PX = x;

this.py = y;

This.pwidth = width;

This.pheight = height;

THIS.IMG_SRC = IMG_SRC;

This.draw = Drawdownpipe;

}

function drawuppipe{

var image = new Image;

IMAGE.SRC = THIS.IMG_SRC;

Ctx.drawimage (Image,150,500,150,800,this.px,this.py,this.pwidth,this.pheight);

}

function drawdownpipe{

var image = new Image;

IMAGE.SRC = THIS.IMG_SRC;

Ctx.drawimage (Image,0,500,150,500,this.px,this.py,this.pwidth,this.pheight);

}

function Background (X,Y,WIDTH,HEIGHT,IMG_SRC) {

THIS.BGX = x;

This.bgy = y;

This.bgwidth = width;

This.bgheight = height;

var image = new Image;

IMAGE.SRC = IMG_SRC;

this.img = image;

This.draw = DRAWBG;

}

function drawbg{

Ctx.drawimage (This.img,this.bgx,this.bgy,this.bgwidth,this.bgheight);

}

function Bird (X,Y,WIDTH,HEIGHT,IMG_SRCS) {

THIS.BX = x;

this.by = y;

This.bwidth = width;

This.bheight = height;

This.imgs = Img_srcs;

This.draw = Drawbird;

}

function drawbird{

birdindex++;

var image = new Image;

IMAGE.SRC = this.imgs[birdindex%3];

Ctx.drawimage (Image,this.bx,this.by,this.bwidth,this.bheight);

}

function calculator{

if (Bird.by+bird.bheight>ground.bgy | |

(bird.bx+bird.bwidth>up_pipe.px) && (bird.by>up_pipe.py) && (bird.bx+bird.bwidth<up_ Pipe.px+up_pipe.pwidth) && (bird.by<up_pipe.py+up_pipe.pheight)) | |

(bird.bx+bird.bwidth>up_pipe.px) && (bird.by>up_pipe.py) && (bird.bx+bird.bwidth<up_ Pipe.px+up_pipe.pwidth) && (bird.by<up_pipe.py+up_pipe.pheight)) | |

(bird.bx>down_pipe.px) && (bird.by>down_pipe.py) && (bird.bx<down_pipe.px+down_ Pipe.pwidth) && (bird.by<down_pipe.py+down_pipe.pheight)) | |

(bird.bx>down_pipe.px) && (bird.by+bird.bheight>down_pipe.py) && (bird.bx<down_pipe.px+ Down_pipe.pwidth) && (bird.by+bird.bheight<down_pipe.py+down_pipe.pheight)) {

Clearinterval (TID);

Ctx.fillstyle = "RGB (255,255,255)";

Ctx.font = "30px Accent";

Ctx.filltext ("You Got" +score+ "!", 110,100)

Return

}

Ver2 = ver1+gravity;

Bird.by + = (ver2+ver1) *0.5;

if (up_pipe.px+up_pipe.pwidth>0) {

UP_PIPE.PX-= velocity;

DOWN_PIPE.PX-= velocity;

}else{

UP_PIPE.PX = 400;

DOWN_PIPE.PX = 400;

Up_pipe.pheight = 100+math.random*200;

down_pipe.py = Up_pipe.pheight+pipe_height;

Down_pipe.pheight = 600-down_pipe.py;

Isscore = true;

}

if (Isscore && bird.bx>up_pipe.px+up_pipe.pwidth) {

Score + = 1;

Isscore = false;

if (score>0 && score%10 = = = 0) {

velocity++;

}

}

Ctx.fillstyle = "RGB (255,255,255)";

Ctx.font = "30px Accent";

if (score>0) {

Score%10!==0?ctx.filltext (score,180,100): Ctx.filltext ("great!" +SCORE,120,100);

}

}

function drawall{

Ctx.clearrect (0,0,cwidth,cheight);

var i;

for (i=0;i<objects.length;i++) {

Objects[i].draw;

}

Calculator

}

function KeyUp (e) {

var e = e| | Event

var Currkey = e.keycode| | e.which| | E.charcode;

Switch (Currkey) {

Case 32:

Bird.by-= 80;

Break

}

}

function init{

CTX = document.getElementById (' canvas '). GetContext (' 2d ');

Document.onkeyup = KeyUp;

Drawall;

Tid = SetInterval (drawall,80);

}

</script>

<body onload= "INIT;" >

<canvas id= "Canvas" width= "height=" style= "margin-left:200px" >

Your Browser isn't support canvas!

</canvas>

</body>

Summarize

In the Learning game development, I suddenly miss the University of Physics. At that time very puzzled, learn what physics computer science, and then contact game development to know, there is no certain physical knowledge, can not simulate the various scenes in the game. And through this simple little game, also picked up a lot of old knowledge.

Canvas front-end game development--flappybird detailed