用canvas做了一个贪吃蛇小游戏

开始界面

游戏界面

结束界面
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>贪吃蛇</title> 
  6. <style> 
  7. body{background: #666;text-align: center;} 
  8. canvas{margin: 50px auto 0;/*border: 2px solid green;*/} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <canvas id="snake" width="800" height="500"></canvas> 
  13. <script> 
  14. /** 
  15. * Created by linyufeng on 2017/7/26. 
  16. */ 
  17. var width = 800;//游戏宽度 
  18. var height = 500;//游戏高度 
  19. var flag = false;//控制游戏是否结束 
  20. var snakeArr;//存放身体坐标 
  21. var food;//指定食物 
  22. var direction;//运动方向 
  23. var snakeMove;//自动运动(定时器) 
  24. var size = 20;//食物和蛇大小 
  25. var speed = 1000;//运动速度 
  26. var highScore = 0;//最高分数 
  27. var snake = document.getElementById('snake').getContext('2d');//获取canvas对象 
  28. //重置游戏 
  29. function reset(){ 
  30. flag = true;//开始游戏 
  31. snakeArr = [{x:size*10,y:size*10},{x:size*10,y:size*10+size},{x:size*10,y:size*10+2*size}];//生成身体 
  32. food = createFood();//随机食物 
  33. direction = 39;//指定默认运动方向: 37左 38上 39右 40下 
  34. } 
  35. //开始游戏 
  36. function start(){ 
  37. drawRect({x:0,y:0,w:width,h:width}); 
  38. drawText({text:'贪 吃 蛇',x:width/2,y:150,font:'64px 微软雅黑'}); 
  39. drawText({text:'开 始 游 戏',x:width/2,y:250,font:'34px 微软雅黑'}); 
  40. drawText({text:'最高分数: '+highScore,x:width/2,y:350,font:'24px 微软雅黑'}); 
  41. drawText({text:'按Enter键开始游戏',x:width/2,y:width/2,font:'24px 微软雅黑'}); 
  42. } 
  43. //结束游戏 
  44. function end(){ 
  45. clearInterval(snakeMove); 
  46. flag = false; 
  47. var score = snakeArr.length-3; 
  48. highScore = highScore<score?score:highScore; 
  49. drawText({text:'游 戏 结 束',x:width/2,y:150,font:'64px 微软雅黑'}); 
  50. drawText({text:'游戏分数: '+score,x:width/2,y:250,font:'34px 微软雅黑'}); 
  51. drawText({text:'最高分数: '+highScore,x:width/2,y:350,font:'24px 微软雅黑'}); 
  52. drawText({text:'按Enter键开始游戏',x:width/2,y:width/2,font:'24px 微软雅黑'}); 
  53. } 
  54. //初始化游戏 
  55. function init(){ 
  56. reset(); 
  57. draw(); 
  58. snakeMove = setInterval(function(){ 
  59. update(direction); 
  60. },speed); 
  61. } 
  62. //画游戏界面 
  63. function draw(){ 
  64. snake.clearRect(0,0,width,height);//清屏 
  65. drawRect({x:0,y:0,w:width,h:width});//画背景 
  66. drawSnake(snakeArr);//画蛇 
  67. drawCircle(food.x,food.y);//画食物 
  68. drawText({text:'分数: '+(snakeArr.length-3),x:10,y:10,font:'24px 微软雅黑',baseline:'top',align:'left'});//画分数 
  69. } 
  70. //随机产生食物 
  71. function createFood(){ 
  72. var x = parseInt(Math.random()*(width/size))*size; 
  73. var y = parseInt(Math.random()*(height/size))*size; 
  74. return {x:x, y:y}; 
  75. } 
  76. //身体运动和碰撞检测 
  77. function update(direction){ 
  78. var head = snakeArr[0]; 
  79. if(!flag){ 
  80. return;//结束游戏 
  81. } 
  82. var newHead = {}; 
  83. if(direction == 37){//左 
  84. newHead = {x:head.x-size,y:head.y}; 
  85. }else if(direction == 38){//上 
  86. newHead = {x:head.x,y:head.y-size}; 
  87. }else if(direction == 39){//右 
  88. newHead = {x:head.x+size,y:head.y}; 
  89. }else if(direction == 40){//下 
  90. newHead = {x:head.x,y:head.y+size}; 
  91. } 
  92. //身体自身碰撞检测 
  93. for (var i = 0; i < snakeArr.length; i++) { 
  94. var snake = snakeArr[i]; 
  95. if(snake.x==newHead.x && snake.y==newHead.y){ 
  96. end(); 
  97. return; 
  98. } 
  99. } 
  100. //墙壁碰撞检测 
  101. if(head.x<=0 || head.x>=width || head.y<=0 || head.y>=height){ 
  102. end(); 
  103. return; 
  104. }else{ 
  105. //食物碰撞检测 
  106. if(newHead.x==food.x && newHead.y==food.y){ 
  107. snakeArr.unshift(food);//添身体 
  108. food = createFood(); 
  109. }else{ 
  110. snakeArr.unshift(newHead);//添头 
  111. snakeArr.pop();//去尾 
  112. } 
  113. draw(); 
  114. } 
  115. } 
  116. //游戏开始画面 
  117. start(); 
  118. //绑定鼠标控制事件 
  119. document.addEventListener('keydown',function(e){ 
  120. e.preventDefault(); 
  121. /******************************************* 
  122. * 37 Left（左箭头） 
  123. * 38 Up（上箭头） 
  124. * 39 Right（右箭头） 
  125. * 40 Down（下箭头） 
  126. * ******************************************/ 
  127. var code = e.keyCode || e.which; 
  128. /*************************************** 
  129. * 只对上下左右键和Enter键生效,屏蔽其他键! 
  130. * *************************************/ 
  131. if(code==37 || code==38 || code==39 || code==40 || code==13){ 
  132. /******************************************** 
  133. * 如果游戏未开始或者已结束,此时按下Enter键开始游戏 
  134. * ******************************************/ 
  135. if(code==13){ 
  136. if(flag==false){ 
  137. init(); 
  138. } 
  139. }else{ 
  140. /****************************************** 
  141. * 如果蛇的运动方向是上,那么不能向下运动 
  142. * 如果蛇的运动方向是下,那么不能向上运动 
  143. * 如果蛇的运动方向是左,那么不能向右运动 
  144. * 如果蛇的运动方向是右,那么不能向左运动 
  145. * ****************************************/ 
  146. if(Math.abs(code-direction)==2){ 
  147. return;//不允许这种移动方式 
  148. } 
  149. direction = code; 
  150. update(direction); 
  151. } 
  152. } 
  153. }); 
  154. /****************************************************************** 
  155. * 封装公共方法: 
  156. * 1. 画矩形 
  157. * 2. 写文字 
  158. * 3. 画小方块 
  159. * ****************************************************************/ 
  160. /** 
  161. * @func: 画矩形 
  162. * @params: {x} x坐标 
  163. * @params: {y} y坐标 
  164. * @params: {w} 宽度 
  165. * @params: {h} 高度 
  166. * @color: {color} 颜色 
  167. * */ 
  168. function drawRect(option){ 
  169. /************************************************************** 
  170. * 说明:canvas对象应该从外部传入,但是为了避免每次调用方法时都要传入,就固定写死了! 
  171. * ************************************************************/ 
  172. snake.beginPath(); 
  173. snake.fillStyle = option.color || '#000'; 
  174. snake.fillRect(option.x,option.y,option.w,option.h); 
  175. snake.closePath(); 
  176. } 
  177. /** 
  178. * @func: 写文字 
  179. * @params: {x} x坐标 
  180. * @params: {y} y坐标 
  181. * @params: {w} 宽度 
  182. * @params: {h} 高度 
  183. * @params: {color} 颜色 
  184. * @params: {baseline} 文字上下对齐方式 
  185. * @params: {align} 文字左右对齐方式 
  186. * */ 
  187. function drawText(option){ 
  188. snake.beginPath(); 
  189. snake.fillStyle = option.color || '#fff'; 
  190. snake.fontFamily = '微软雅黑'; 
  191. snake.font = option.font; 
  192. snake.textBaseline = option.baseline || 'middle'; 
  193. snake.textAlign = option.align || 'center'; 
  194. snake.fillText(option.text,option.x,option.y); 
  195. snake.closePath(); 
  196. } 
  197. /** 
  198. * @func: 画小方块 
  199. * @params: {x} x坐标 
  200. * @params: {y} y坐标 
  201. * */ 
  202. function drawSquare(x,y){ 
  203. snake.beginPath(); 
  204. snake.fillStyle = '#fff'; 
  205. snake.fillRect(x+1,y+1,size-2,size-2); 
  206. snake.closePath(); 
  207. } 
  208. /** 
  209. * @func: 画食物 
  210. * @params: {x} x坐标 
  211. * @params: {y} y坐标 
  212. * */ 
  213. function drawCircle(x,y){ 
  214. snake.beginPath(); 
  215. snake.arc(x+size/2, y+size/2, size/2, 0, Math.PI*2,true); 
  216. snake.fillStyle = '#0f0'; 
  217. snake.fill(); 
  218. snake.closePath(); 
  219. } 
  220. /** 
  221. * @func: 画蛇 
  222. * @params: {arr} 蛇身体坐标 
  223. * */ 
  224. function drawSnake(arr){ 
  225. for (var i = 0; i < arr.length; i++) { 
  226. var snake = arr[i]; 
  227. drawSquare(snake.x,snake.y) 
  228. } 
  229. } 
  231. </script> 
  232. </body> 
  233. </html> 

canvas贪吃蛇游戏的更多相关文章

  1. H5实现的可自定义贪吃蛇游戏

    原创游戏,使用lufylegend.js开发 用canvas实现的贪吃蛇游戏,与一般的贪吃蛇游戏不同,图片经过美工设计,代码设计支持扩展和自定义. 游戏元素丰富,包括障碍物(仙人掌),金币(奖励),苹 ...

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

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

  3. 使用electron为贪吃蛇游戏创建全局快捷键

    上图就是我们的简体版贪吃蛇游戏,我们可以看到使用键盘上面的上下左右可以对贪吃蛇进行控制. The picture above is our simplified version of Snake Ea ...

  4. 贪吃蛇游戏（printf输出C语言版本）

    这一次我们应用printf输出实现一个经典的小游戏—贪吃蛇,主要难点是小蛇数据如何存储.如何实现转弯的效果.吃到食物后如何增加长度. 1 构造小蛇 首先,在画面中显示一条静止的小蛇.二维数组canva ...

  5. Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录

    一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...

  6. 用C++实现的贪吃蛇游戏

    我是一个C++初学者,控制台实现了一个贪吃蛇游戏. 代码如下: //"贪吃蛇游戏"V1.0 //李国良于2016年12月29日编写完成 #include <iostream& ...

  7. WebGL实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  8. 100行JS实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  9. JS贪吃蛇游戏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. ubuntu下cmake编译opencv 3.4.3源码；

    在进行编译前,准备工作: 1)  到opencv官网下载源码(https://opencv.org/releases.html): 2)  安装qt(http://download.qt.io/); ...

  2. 体验Hadoop3.0生态圈-CDH6.1时代的来临

    体验Hadoop3.0生态圈-CDH6.1时代的来临 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我在公司使用的是CDH5.15.1这个发行版本,具体的部署文档之前也有给大家分享 ...

  3. Hadoop序列化-流量汇总案例

    Hadoop序列化案例-流量汇总需求 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Hadoop序列化 1>.为什么要序列化 一般来说,“活的”对象只生存在内存里,关机断 ...

  4. twitter分布式主键id生成器

    pom <!--生成id--> <dependency> <groupId>com.github.bingoohuang</groupId> <a ...

  5. java生产环境增量发版陷阱【原】

    前言 在生产环境,我们为了降低发版风险,一般都只做增量发布,不做全量发布. 除非项目只有一到两人开发,对时间线和代码脉络结构一清二楚,才可全量发布. 然而增量发布也是有一定隐藏陷阱在里面的,以下就是笔 ...

  6. ArcGis Python脚本——ArcGIS 中使用的 Python 是什么版本

    Python 编程语言用于自 9.0 起的各版本 ArcGIS 中,并被整合到 ArcMap 和 ArcGIS for Server 的自动安装中. ArcGIS 将在完整安装过程中安装下列 Pyth ...

  7. Mac 键盘符号 及VSCode快捷键 说明

    Mac 键盘符号说明 ⌘ == Command ⇧ == Shift ⇪ == Caps Lock ⌥ == Option ⌃ == Control ↩ == Return/Enter ⌫ == De ...

  8. CorelDrawX8安装时提示已安装另一个版本

    (1)首先卸载VIsualC++ 2015 运行库. (2)如果有VisualC++ 2017运行库,卸载VisualC++2017运行库,即可.

  9. Spring 快速开始 Profile 和 Bean

    和maven profile类似,Spring bean definition profile 有两个组件:声明和激活. [栗子:开发测试环境使用HyperSQL 生产环境使用JNDI上下文根据配置查 ...

  10. 【bzoj 3786】星系探索

    Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其余的所有星球均有且仅有一个依赖星球.主星球 ...