time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > Html5 canvas实现的贪吃蛇游戏

Html5 canvas实现的贪吃蛇游戏

时间:2013-03-15 23:15 点击:1636次 字体:[ ]




 在我的理解里,游戏就是可以交互的动画。所以游戏的原理跟动画是差不多的。

相信动画的原理大家都知道,就是通过一系列的变化来让静态的图片达到动的效果。

不过游戏与动画不同的是,游戏是可以交互的。也就是说,用户对游戏有一定的控制权。游戏也会根据用户的操作来反馈给用户不同的动画,当然也会记录用户在整个游戏中的表现。一般会用分数显示的反馈给用户,他在整个游戏中的表现。

大多数的canvas游戏,是通过不断的擦除canvas然后重绘被擦除的部分。并改变被擦除前那一部分的所有元素的位置或者颜色来达到动画的效果。当然也有部分游戏是根据用户的某个操作来激活某个动作。比如五子棋,就是通过用户在棋盘上的点击来添加一个新的棋子来构成游戏。

当然既然是canvas游戏,对canvas的一些API就一定要熟悉啦,不过不熟悉也没关系拉。 在游戏中用到的API我都会逐一介绍它的用法和用处。下面就正式开始进入游戏开发的过程吧。

【游戏结构】

既然是做游戏,大家可以先想一想。游戏都有哪些基本元素。简单分析一下应该有如下几点是每个游戏都共有 。

开始,暂停,结束。 这三点应该是大多游戏都有的,然后如果要整个游戏运转,肯定会对游戏里面的画面进行更新。  如此一来,就又多了一个更新。这四点应该就是游戏的基础配置了,如此一来我们就可以根据以上四点来搭建一个游戏的基本结构了。 为了以后的游戏也可以同样的使用,我把它写成了一个父函数,可以供游戏的具体函数来继承。 我称它为gamebase

。下面是gamebase函数的所有代码。

  1. /** 
  2.  * @author cat 
  3.  */ 
  4.  
  5. function GameBase(){ 
  6.     this.event = {                //存储游戏事件 
  7.         death : function(){}, 
  8.         updates : [] 
  9.     }; 
  10.     this.FPS = 1000 / 60;        //游戏刷新速度 
  11.     this.play = false;            //是否开始 
  12.  
  13. GameBase.prototype = { 
  14.     constructor : GameBase, 
  15.  
  16.     //游戏更新的单步骤 
  17.     step : function(){ 
  18.         throw new Error('此方法必须被覆盖!'); 
  19.     }, 
  20.  
  21.     //是否在运行 
  22.     isPlay : function(){ 
  23.         return this.play; 
  24.     }, 
  25.  
  26.     //添加事件 
  27.     bind : function(listen, callback, time){ 
  28.         if(listen == 'death'){ 
  29.             this.event['death'] = callback; 
  30.         }else if(listen == 'update'){ 
  31.             this.event['updates'] ? true : this.event['updates'] = []; 
  32.             time || (callback.time == time, callback.timer = 0); 
  33.             this.event['updates'].push(callback); 
  34.         } 
  35.         return this
  36.     }, 
  37.  
  38.     //删除事件 
  39.     unbind : function(listen, fn){ 
  40.         if(listen == 'death'){ 
  41.             this.event['death'] = function(){}; 
  42.         }else if(listen == 'update'){ 
  43.             var i = 0, len = this.event.updates.length; 
  44.             for(; i < len && fn == this.event.updates[i]; i++){ 
  45.                 this.event.updates.splice(i, 1); 
  46.             } 
  47.         } 
  48.         return this
  49.     }, 
  50.  
  51.     //游戏开始函数 
  52.     start : function(){ 
  53.         var self = this
  54.         self.startTime = new Date().getTime(); 
  55.         if(!self.isPlay()){    //避免重复开始 
  56.             self.timer = self.timer = setInterval(function(){ 
  57.                 self.step(); 
  58.             },self.FPS); 
  59.             self.play = true
  60.         } 
  61.     }, 
  62.  
  63.     //游戏停止函数 
  64.     stop : function(){ 
  65.         this.play = false
  66.         clearInterval(this.timer); 
  67.     }, 
  68.  
  69.     //游戏结束函数 
  70.     death : function(){ 
  71.         this.stop(); 
  72.         this.event['death'].call(this); 
  73.     }, 
  74.  
  75.     //游戏更新函数 
  76.     update : function(){ 
  77.         var updates = this.event['updates'], i = 0, len = updates.length, now = new Date().getTime(), update, time;  
  78.         for(; update = updates[i], i < len; i++){ 
  79.             update.time ? (now - (update.timer || 0) > update.time) && (update.timer == now, update.call(this)) : update.call(this); 
  80.         } 
  81.     } 
  82.  
  83. //两个工具方法 
  84. var lynx = { 
  85.     extend : function(parent, child){ 
  86.         var fn = function(){}; 
  87.         fn.prototype = parent.prototype; 
  88.         child.prototype = new fn(); 
  89.         child.prototype.constructor = child; 
  90.         return child; 
  91.     }, 
  92.     mix : function(target, source){ 
  93.         var hasOwn = Object.prototype.hasOwnProperty; 
  94.         if( !target || !source ) return
  95.         var override = typeof arguments[arguments.length - 1] === "boolean" ? arguments[arguments.length - 1] : true, prop; 
  96.         for (prop in source) { 
  97.             if (hasOwn.call(source, prop) && (override || !(prop in target))) { 
  98.                 target[prop] = source[prop]; 
  99.             } 
  100.         } 
  101.         return target; 
  102.     } 



本文地址 : http://www.fengfly.com/plus/view-212081-1.html
标签: HTML5 canvas 游戏 贪吃蛇
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: