澳门金沙30064在线网站[Canvas前端游戏开发]——FlappyBird详解

By admin in 计算机教程 on 2019年3月29日

[Canvas前端游戏开发]——FlappyBird详解

2016/01/03 · HTML5 ·
Canvas

原文出处: xingoo   

一直想自己做点小东西,直到最近看了本《HTML5游戏开发》,才了解游戏开发中的一点点入门知识。

本篇就针对学习的几个样例,自己动手实践,做了个FlappyBird,源码共享在度盘 ;也可以参考github,里面有更多的游戏样例。

canvas 制作flappy bird(像素小鸟)全流程,canvasflappy

游戏截图

澳门金沙30064在线网站 1

澳门金沙30064在线网站 2

flappy bird制作全流程:

澳门金沙30064在线网站 3

HTML5之Canvas

Canvas是Html5中用于绘图的元素,它可以绘制各种图形,比如长方形,多边形,圆形等等。如果想要了解Canvas的使用可以参考:

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

 

//如果想要使用canvas,首先需要获得上下文对象: ctx =
document.getElementById(‘canvas’).getContext(‘2d’);
//然后使用这个ctx绘制图形

1
2
3
//如果想要使用canvas,首先需要获得上下文对象:
ctx = document.getElementById(‘canvas’).getContext(‘2d’);
//然后使用这个ctx绘制图形

在cavas每个绘制都是独立的操作。比如下图的两个绘制图形,第二个会以覆盖的形式绘制,因此绘制图形的顺序就显得十分重要了。

澳门金沙30064在线网站 4

一、前言

像素小鸟这个简单的游戏于2014年在网络上爆红,游戏上线一段时间内appleStore上的下载量一度达到5000万次,风靡一时,

近年来移动web的普及为这样没有复杂逻辑和精致动画效果,但是趣味十足的小游戏提供了良好的环境,

同时借助各大社交软件平台的传播效应,创意不断的小游戏有着良好的营销效果,得到了很多的关注。

此前在网上查询了很多关于这个小游戏的资料,但是大多杂乱无章,自己的结合相关教程将这个游戏的主要框架整理出来,供大家一起学习。

澳门金沙30064在线网站,canvas之drawImage()

本篇的游戏开发中,主要使用的是依据图片绘制的api:drawImage(),它有两个基本的使用方法:

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);

1
2
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);

第一个api中,指定Image对象,然后给出绘制图片的x,y坐标以及宽度和高度即可。

第二个api中,第一组x,y,width,height则指定了裁剪图片的坐标尺寸,这在使用多元素的矢量图时很常用。比如:

澳门金沙30064在线网站 5

上面的图片中为了减少图片资源的请求数量,把很多的元素放在了一个图片中,此时就需要通过裁剪的方式,获取指定的图片元素。

二、技术要点

 基本JavaScript基础 ,canvas 基础, 面向对象的思想;

FlappyBird原理解析

其实这个游戏很简单,一张图就可以看懂其中的奥妙:

澳门金沙30064在线网站 6

其中背景和地面是不动的。

小鸟只有上和下两个动作,可以通过控制小鸟的y坐标实现。

上下的管子只会向左移动,为了简单实现,游戏中一个画面仅仅会出现一对管子,这样当管子移出左边的背景框,就自动把管子放在最右边!

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; }

1
2
3
4
5
6
7
8
9
10
11
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;
            }

很简单吧!

由于该游戏一共就这几个元素,因此把他们都放入一个Objects数组中,通过setInteral()方法,在一定间隔时间内,执行一次重绘

重绘的时候会先清除画面中的所有元素,然后按照新的元素的坐标一次绘制图形,这样就会出现移动的效果。

三、思路整理

模拟小鸟重力

由于这个游戏不涉及小鸟横向的运动,因此只要模拟出小鸟下落的动作以及上升的动作就可以了。

澳门金沙30064在线网站 7

上升:这个很简单,只要把小鸟的y坐标减去一定的值就可以了

下落:其实重力不需要使用gt^2来模拟,可以简单的指定两个变量,v1和gravity,这两个变量与setInterval()中的时间共同作用,就能模拟重力。

ver2 = ver1+gravity; bird.by += (ver2+ver1)*0.5;

1
2
ver2 = ver1+gravity;
bird.by += (ver2+ver1)*0.5;

整个游戏的逻辑比较简单:

首先游戏规则:鸟撞到管道上,地上要死亡,飞到屏幕外要死亡。

其次:鸟在飞翔的过程中,会掉落,类似落体运动,需要玩家不断点击屏幕让鸟向上飞。

再次就是:鸟和背景元素的相对移动的过程,鸟不动,背景左移。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门金沙30064在线网站 版权所有