零基础HTML5游戏制作教程 第3章 图形的移动
来源:互联网 发布:网络安全技术的重要性 编辑:程序博客网 时间:2024/05/18 03:55
第3章 图形的移动
一,移动的原理
其实无论你看电影也好,玩游戏也好,电影或游戏中的人物都是不会移动的。电影是一张张静态的照片,游戏是一个个静态的画面。你之所以觉得电影中的人物移动了,是因为很多张照片在很短时间内连续放映的结果。游戏也是同样道理。
所以,游戏的基本原理,其实就是每隔一小段时间(比如0.1秒),根据游戏数据(各物体的状态、坐标等)重新绘制整个游戏画面。
我们需要2个函数来完成这个目标:
context.clearRect()和setInterval()
context.clearRect(x,y,width,height)的作用是用于清空一片矩形范围内的图像。4个参数分别表示该清除区域的左上角的x坐标、y坐标、宽度、长度。如果把坐标改成0,0,以及canvas的宽度和高度,那么就可以清空整个画布内的图像。
setInterval(code,millisec)是一个用于每隔一定时间间隔就执行一遍特定代码的函数,可以将其用于定时刷新屏幕上的图像。
二,移动的实现
下面我们来绘制一个方块并使之移动。
var cvs=getElementById("canvas");var ctx=cvs.getContext("2d");cvs.fillStyle="green";self.setInterval("move()",100);function move(){cvs.clearRect(0,0,cvs.width,cvs.height); x=x+50; ctx.fillRect(x,y,100,100);}
这样,我们就得到一个不停向右移动的方块,如下图所示。
在上一章,我们学会了绘制图形;在本章,我们成功地使这个图形运动起来了。但这还是很不够的,因为我们发现,我们只能看着这个方块自己移动,我们并不能控制她移动的方向或者速度。游戏很重要的一点就是交互,所以我们必须控制这个方块的运动。
本来本章应该接下去讲怎么利用键盘控制图形的移动。但是为了使本“零起点”教程尽可能简单化,我倾向于把不同的内容放在独立的章节中单独讲,这样可以让每一章都只讲一个知识点。那么这章就这样了。
- 零基础HTML5游戏制作教程 第3章 图形的移动
- 零基础HTML5游戏制作教程 第2章 简单图形的绘制
- 零基础HTML5游戏制作教程 第4章 移动的控制
- 零基础HTML5游戏制作教程 第1章
- 零基础HTML5游戏制作教程 第6章 贪吃蛇的实现及代码
- 零基础HTML5游戏制作教程 第5章 碰撞检测
- HTML5移动网站制作教程
- HTML5移动网站制作教程
- HTML5游戏的制作
- HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
- 3D数学基础:图形与游戏开发 第3章笔记
- 3D数学基础:图形与游戏开发(第6章3D向量类)笔记
- 3D数学基础:图形与游戏开发第4章笔记
- 3D数学基础:图形与游戏开发第5章笔记
- 3D数学基础:图形与游戏开发(第7章矩阵)笔记
- HTML5教程实例-用Canvas制作线性渐变图形
- HTML5教程实例-用Canvas制作径向渐变图形
- html5移动开发制作基于模拟现实物理效果的游戏
- android app如何检查和管理activity 的结果
- 欧拉四面体公式
- 双向循环链表
- android获得所有的安装app列表,并运行指定app
- c/c++ 2进制打印输出
- 零基础HTML5游戏制作教程 第3章 图形的移动
- Eclipse android 开发工具报错 R.java not generating
- 第17周项目--胖子伤不起
- CentOS 7.0安装遨游浏览器
- application:didFinishLaunchingWithOptions
- BZOJ 2693 jzptab 莫比乌斯反演
- 关于struct调用sizeof的一个问题
- archetype:generate
- 2014年十大网络用语