废话不多说,代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>贪吃蛇</title>
  6. <script>
  7. var map; //地图类对象
  8. var snake; //蛇类对象
  9. var food; //食物类对象
  10. var timer; //定时器对象
  11. var sum=0; //分数
  12.  
  13. //地图类
  14. function Map()
  15. {
  16. this.width=800; //地图宽度
  17. this.height=400; //地图高度
  18. this.position='absolute'; //定位方式
  19. this.color='#cccccc'; //地图颜色
  20. this._map=null; //保存地图dom元素
  21.  
  22. this.show=function()
  23. {
  24. //用于显示地图
  25. //创建地图div元素
  26. this._map = document.createElement('div');
  27. //设置地图样式
  28. this._map.style.width = this.width + 'px';
  29. this._map.style.height = this.height + 'px';
  30. this._map.style.position = this.position ;
  31. this._map.style.backgroundColor = this.color ;
  32.  
  33. //将地图div元素追加到body标签之间
  34. document.getElementsByTagName('body')[0].appendChild(this._map);
  35. };
  36. }
  37.  
  38. //食物类
  39. function Food()
  40. {
  41. this.width=20; //宽度
  42. this.height=20; //高度
  43. this.position='absolute'; //定位方式
  44. this.color='#00ff00'; //食物颜色
  45. this._food=null; //用于保存食物dom元素
  46. this.x=0; //横向第几个格
  47. this.y=0; //纵向第几个格
  48.  
  49. this.show=function()
  50. {
  51. //用于显示食物
  52. if(this._food==null)
  53. {
  54. this._food=document.createElement('div');
  55.  
  56. //设置食物样式
  57. this._food.style.width = this.width + 'px';
  58. this._food.style.height = this.height + 'px';
  59. this._food.style.position = this.position ;
  60. this._food.style.backgroundColor = this.color ;
  61.  
  62. map._map.appendChild(this._food);
  63. }
  64. //如果之前创建过,只需要重新设置坐标
  65. this.x=Math.floor(Math.random()*40);
  66. this.y=Math.floor(Math.random()*20);
  67. this._food.style.left = this.x*this.width+'px';
  68. this._food.style.top = this.y*this.height+'px';
  69. };
  70. }
  71.  
  72. //蛇类
  73. function Snake()
  74. {
  75. this.width=20; //蛇节宽度
  76. this.height=20; //蛇节高度
  77. this.position='absolute'; //蛇节定位方式
  78. this.direct=''; //蛇的移动方向
  79. //所有蛇节全部信息
  80. this.body=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]];
  81.  
  82. this.setDirect = function(code)
  83. {
  84. switch(code)
  85. {
  86. case 37:
  87. this.direct='left';
  88. break;
  89. case 38:
  90. this.direct='up';
  91. break;
  92. case 39:
  93. this.direct='right';
  94. break;
  95. case 40:
  96. this.direct='down';
  97. break;
  98. }
  99. }
  100.  
  101. this.show=function()
  102. {
  103. //用于显示蛇
  104. for(var i=0;i<this.body.length;i++)
  105. {
  106. if(this.body[i][3]==null)
  107. {
  108. this.body[i][3] = document.createElement('div');
  109. this.body[i][3].style.width = this.width +'px';
  110. this.body[i][3].style.height = this.height +'px';
  111. this.body[i][3].style.position = this.position;
  112. this.body[i][3].style.backgroundColor = this.body[i][2];
  113. map._map.appendChild(this.body[i][3]);
  114. }
  115. //设置蛇节的横纵坐标
  116. this.body[i][3].style.left=this.body[i][0]*this.width+'px';
  117. this.body[i][3].style.top=this.body[i][1]*this.height+'px';
  118. }
  119. }
  120.  
  121. this.move = function()
  122. {
  123. //移动蛇身
  124. var length = this.body.length-1;
  125. for(var i=length;i>0;i--)
  126. {
  127. //让后面的蛇节的坐标等于前面蛇节的坐标
  128. this.body[i][0]=this.body[i-1][0]; //横坐标
  129. this.body[i][1]=this.body[i-1][1]; //纵坐标
  130.  
  131. }
  132. switch(this.direct)
  133. {
  134. case 'right':
  135. this.body[0][0]=this.body[0][0]+1;
  136. break;
  137. case 'down':
  138. this.body[0][1]=this.body[0][1]+1;
  139. break;
  140. case 'left':
  141. this.body[0][0]=this.body[0][0]-1;
  142. break;
  143. case 'up':
  144. this.body[0][1]=this.body[0][1]-1;
  145. break;
  146. default:
  147. return;
  148. }
  149.  
  150. //判断蛇吃到食物
  151. if(this.body[0][0]==food.x&&this.body[0][1]==food.y)
  152. {
  153. var x=this.body[length][0];
  154. var y=this.body[length][1];
  155. sum++;
  156. document.title='分数:'+sum+'分';
  157. this.body.push([x,y,'blue',null]);
  158. food.show();
  159. }
  160.  
  161. //判断撞墙死
  162. if(this.body[0][0]<0 || this.body[0][0]>39 ||this.body[0][1]<0 ||this.body[0][1]>19)
  163. {
  164. alert('撞墙死');
  165. clearTimeout(timer);
  166. return;
  167. }
  168.  
  169. //吃到自己死
  170. for(var i=1;i<this.body.length;i++)
  171. {
  172. if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1])
  173. {
  174. alert('吃到自己死');
  175. clearTimeout(timer);
  176. return;
  177. }
  178. }
  179.  
  180. this.show();
  181. }
  182. }
  183.  
  184. window.onload = function()
  185. {
  186. map = new Map(); //实例化地图类对象
  187. map.show(); //显示地图
  188.  
  189. food=new Food(); //实例化食物类对象
  190. food.show(); //显示食物
  191.  
  192. snake = new Snake(); //实例化蛇类对象
  193. snake.show();
  194. timer = setInterval('snake.move()',100);
  195.  
  196. document.onkeydown = function()
  197. {
  198. var code;
  199. if(window.event)
  200. {
  201. code=window.event.keyCode;
  202. }else
  203. {
  204. code = event.keyCode;
  205. }
  206. snake.setDirect(code);
  207. };
  208.  
  209. }
  210. </script>
  211. </head>
  212. <body>
  213.  
  214. </body>
  215. </html>

运行截图:

Javascript基础示例:用JS写简易版贪吃蛇(面向对象)的更多相关文章

  1. JavaScript 实现简易版贪吃蛇(Day_13)

    时光永远在变迁,你始终要丢下过去. 使用语言 JavaScript  概述 运用JavaScript  实现简易版<贪吃蛇>.     Html 页面 1 <!DOCTYPE htm ...

  2. javascript基础入门之js中的结构分支与循环语句

    javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...

  3. javascript基础入门之js中的数据类型与数据转换01

    javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM)        js中的打印语句:        数据类型        变量      ...

  4. 「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏

    回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ...

  5. OC版贪吃蛇

    昨天写了一个js版贪吃蛇,今天突然想写一个OC版的,来对比一下两种语言的区别 oc版功能,适配所有尺寸iphone,可暂停,可设置地图和蛇的比例,可加速 对比一下会发现js版的相对OC版的会简单一些, ...

  6. TOJ 3973 Maze Again && TOJ 3128 简单版贪吃蛇

    TOJ3973传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=3973 时间限制(普通 ...

  7. 如何用python制作贪吃蛇以及AI版贪吃蛇

    用python制作普通贪吃蛇 哈喽,大家不知道是上午好还是中午好还是下午好还是晚上好! 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很 ...

  8. Netty核心组件介绍及手写简易版Tomcat

    Netty是什么: 异步事件驱动框架,用于快速开发高i性能服务端和客户端 封装了JDK底层BIO和NIO模型,提供高度可用的API 自带编码解码器解决拆包粘包问题,用户只用关心业务逻辑 精心设计的Re ...

  9. js实现简易版validate

    需求分析 项目中需要根据选择不同的类型,显示不同的表单,采用的方法是css隐藏显示不需要的表单,但是这个表单字段都是必填的,尝试把不同的表单放在不同的form里,提交时根据不同的类型调用miniui自 ...

随机推荐

  1. php正则表达式匹配函数

    <?php function show($var=null){ if(empty($var))  { echo 'null'; }else if(is_array($var) || is_obj ...

  2. Javascript 【JSON对象】

    var box = JSON.parse(json);     //将字符串解析为JSON var json = JSON.stringify(box);    //讲JSON转换为字符串 var b ...

  3. IE下图片切换的时候,图片总是切换不成功---根本问题是IE缓存图片

    作为WEB设计者,为了在网页展示上加强用户体验,经常会利用图象载入显示状态方法,这自然需要Image对象的onload事件. 在firefox浏览器下完成开发后,可是在IE浏览器中进行调试总不能被调用 ...

  4. 缓存 Array.length 是老生常谈的小优化

    问题 缓存 Array.length 是老生常谈的小优化. // 不缓存 for (var i = 0; i < arr.length; i++) { ... } // 缓存 var len = ...

  5. UVA 10954 Add All

    题意: 给出n个数,要将n个数相加,每次相加所得的值为当次的计算量,完成所有的求和运算后,要求总的计算量最小. 分析: 直接一个优先队列,由小到大排序,每次前两个相加就好. 代码: #include ...

  6. UVA 1615 Highway

    题意: 有一条沿x轴正方向,长为L的高速公路,n个村庄,要求修建最少的公路出口数目,使得每个村庄到出口的距离不大于D. 分析: 每个村子可建出口的距离是(l-d,r+d).将所有区间按右端点排序,若需 ...

  7. Excel 用row()函数 在Excel中自动添加序号,

    1.如图 2.用if条件根据产品名称判断是否有值进而序号自动添加 If(G9="","",Row()-8)

  8. 实现Jquery触发一事件后,停留5秒,再接着触发下面的事件

    这里是一个广告位的Jquery的代码,有两个不同的广告位,一个是中间浮动显示的,显示5秒后自动消失,并限定每天仅出现一次(Cookie实现): //=====================广告位的j ...

  9. 泛型编程中的Concept, Model和Policy

    A crude explanation Concept A set of requirements on a type, e.g. a RandomAccessible concept require ...

  10. 新手讲树:证明任意二叉树度为零的节点n0,永远比度为2的节点n2多1个

    证明:   设度为1的节点个数为n1,因为二叉树的所有节点的度都小于等于2, 所以n=n0+n1+n2; 又因为二叉树中,除了根节点所有的节点都有一个进入节点的分支,假设B为所有的分支,那么n=B+1 ...