您所在的位置:开发 > Web > 技术热点 > 一个HTML 5 躲避游戏的实现(1)

一个HTML 5 躲避游戏的实现(1)

2012-09-24 11:11 Billyellow's Billyellow's 字号:T | T
一键收藏,随时查看,分享好友!

HTML5写游戏和传统的游戏思路完全一样,同样也是不停刷新屏幕,游戏实际上也就是图片的适时摆放问题,HTML5无非就只用到了一个canvas(画布)的性质用来摆放图片。

AD:

前段时间BrowserQuest激起了我对html5的乐趣,接下来记下一个小型html5躲避游戏的实现。

先上图

QQ20120921 3

游戏很简单,键盘控制人物上下左右移动,躲开怪物,时间越长越牛x。

主要是两部分组成:一部分就是人物、地图的结构搭建,另一部分就是让英雄、怪物相应地动起来。

HTML5写游戏和传统的游戏思路完全一样,同样也是不停刷新屏幕,游戏实际上也就是图片的适时摆放问题,HTML5无非就只用到了一个canvas(画布)的性质用来摆放图片。

Step 1 做好准备

新建一个html文件,命名为index.html,用作游戏的容器。代码如下:

  1. <html>   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
  4. <title>html5 game</title>   
  5. </head>   
  6. <body>   
  7. <h1>html5 game</h1>   
  8. <script type="text/javascript" src="move.js"></script>   
  9. </body>   
  10. </html> 

ps:script的引用最好放在body里放在body会有问题。

再新建个文件,move.js

  1. var canvas = document.createElement("canvas"); //创建元素canvas,即我们要用的画布   
  2. var ctx = canvas.getContext("2d");//说明我们要用的画布是2d,因为canvas也有WebGL支持3d   
  3. canvas.width = 512;//设置画布的长宽   
  4. canvas.height = 480;   
  5. document.body.appendChild(canvas);//前面基本信息都设置好了之后,将这个元素添加到body标签下。 

这样画布就算是搭建好了。

顺带在下面加几个和图片有关的函数。

  1. var bgReady = false;   
  2. var bgImage = new Image();   
  3. bgImage.src = "move/background.png";   
  4. bgImage.onload = function(){   
  5. bgReady = true;   
  6. }   
  7.     
  8. var heroReady = false;   
  9. var heroImage = new Image();   
  10. heroImage.src = "move/hero.png";   
  11. heroImage.onload = function(){   
  12. heroReady = true;   
  13. }   
  14.     
  15. var monsterReady = false;   
  16. var monsterImage = new Image();   
  17. monsterImage.src = "move/monster.png";   
  18. monsterImage.onload = function(){   
  19. monsterReady = true;   

这个游戏用了三张图片,依次为背景、英雄、怪物。这段代码很容易理解,为了不在图片没有加载完成的时候就draw图片。

内容导航
 第 1 页:Step 1 做好准备  第 2 页:Step 2 定义原型
 第 3 页:Step 3 游戏动起来!  第 4 页:Step 4 程序入口



分享到:

热点职位

更多>>

热点专题

更多>>

读书

系统分析师考试辅导(2007版)
《系统分析师考试辅导(2007版)》内容涵盖了最新的系统分析师考试大纲信息系统综合知识的所有知识点,分析了近3年信息系统分析

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i