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


前段时间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图片。





标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2