用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. function start(){ 

  36. drawRect({x:0,y:0,w:width,h:width}); 

  37. drawText({text:'贪 吃 蛇',x:width/2,y:150,font:'64px 微软雅黑'}); 

  38. drawText({text:'开 始 游 戏',x:width/2,y:250,font:'34px 微软雅黑'}); 

  39. drawText({text:'最高分数: '+highScore,x:width/2,y:350,font:'24px 微软雅黑'}); 

  40. drawText({text:'按Enter键开始游戏',x:width/2,y:width/2,font:'24px 微软雅黑'}); 



  41. //结束游戏 

  42. function end(){ 

  43. clearInterval(snakeMove); 

  44. flag = false; 

  45. var score = snakeArr.length-3; 

  46. highScore = highScore<score?score:highScore; 

  47. drawText({text:'游 戏 结 束',x:width/2,y:150,font:'64px 微软雅黑'}); 

  48. drawText({text:'游戏分数: '+score,x:width/2,y:250,font:'34px 微软雅黑'}); 

  49. drawText({text:'最高分数: '+highScore,x:width/2,y:350,font:'24px 微软雅黑'}); 

  50. drawText({text:'按Enter键开始游戏',x:width/2,y:width/2,font:'24px 微软雅黑'}); 



  51. //初始化游戏 

  52. function init(){ 

  53. reset(); 

  54. draw(); 

  55. snakeMove = setInterval(function(){ 

  56. update(direction); 

  57. },speed); 



  58. //画游戏界面 

  59. function draw(){ 

  60. snake.clearRect(0,0,width,height);//清屏 

  61. drawRect({x:0,y:0,w:width,h:width});//画背景 

  62. drawSnake(snakeArr);//画蛇 

  63. drawCircle(food.x,food.y);//画食物 

  64. drawText({text:'分数: '+(snakeArr.length-3),x:10,y:10,font:'24px 微软雅黑',baseline:'top',align:'left'});//画分数 



  65. //随机产生食物 

  66. function createFood(){ 

  67. var x = parseInt(Math.random()*(width/size))*size; 

  68. var y = parseInt(Math.random()*(height/size))*size; 

  69. return {x:x, y:y}; 



  70. //身体运动和碰撞检测 

  71. function update(direction){ 

  72. var head = snakeArr[0]; 

  73. if(!flag){ 

  74. return;//结束游戏 



  75. var newHead = {}; 

  76. if(direction == 37){//左 

  77. newHead = {x:head.x-size,y:head.y}; 

  78. }else if(direction == 38){//上 

  79. newHead = {x:head.x,y:head.y-size}; 

  80. }else if(direction == 39){//右 

  81. newHead = {x:head.x+size,y:head.y}; 

  82. }else if(direction == 40){//下 

  83. newHead = {x:head.x,y:head.y+size}; 



  84. //身体自身碰撞检测 

  85. for (var i = 0; i < snakeArr.length; i++) { 

  86. var snake = snakeArr[i]; 

  87. if(snake.x==newHead.x && snake.y==newHead.y){ 

  88. end(); 

  89. return; 





  90. //墙壁碰撞检测 

  91. if(head.x<=0 || head.x>=width || head.y<=0 || head.y>=height){ 

  92. end(); 

  93. return; 

  94. }else{ 

  95. //食物碰撞检测 

  96. if(newHead.x==food.x && newHead.y==food.y){ 

  97. snakeArr.unshift(food);//添身体 

  98. food = createFood(); 

  99. }else{ 

  100. snakeArr.unshift(newHead);//添头 

  101. snakeArr.pop();//去尾 



  102. draw(); 





  103. //游戏开始画面 

  104. start(); 

  105. //绑定鼠标控制事件 

  106. document.addEventListener('keydown',function(e){ 

  107. e.preventDefault(); 

  108. /******************************************* 

  109. * 37 Left(左箭头) 

  110. * 38 Up(上箭头) 

  111. * 39 Right(右箭头) 

  112. * 40 Down(下箭头) 

  113. * ******************************************/ 

  114. var code = e.keyCode || e.which; 

  115. /*************************************** 

  116. * 只对上下左右键和Enter键生效,屏蔽其他键! 

  117. * *************************************/ 

  118. if(code==37 || code==38 || code==39 || code==40 || code==13){ 

  119. /******************************************** 

  120. * 如果游戏未开始或者已结束,此时按下Enter键开始游戏 

  121. * ******************************************/ 

  122. if(code==13){ 

  123. if(flag==false){ 

  124. init(); 



  125. }else{ 

  126. /****************************************** 

  127. * 如果蛇的运动方向是上,那么不能向下运动 

  128. * 如果蛇的运动方向是下,那么不能向上运动 

  129. * 如果蛇的运动方向是左,那么不能向右运动 

  130. * 如果蛇的运动方向是右,那么不能向左运动 

  131. * ****************************************/ 

  132. if(Math.abs(code-direction)==2){ 

  133. return;//不允许这种移动方式 



  134. direction = code; 

  135. update(direction); 





  136. }); 

  137. /****************************************************************** 

  138. * 封装公共方法: 

  139. * 1. 画矩形 

  140. * 2. 写文字 

  141. * 3. 画小方块 

  142. * ****************************************************************/ 

  143. /** 

  144. * @func: 画矩形 

  145. * @params: {x} x坐标 

  146. * @params: {y} y坐标 

  147. * @params: {w} 宽度 

  148. * @params: {h} 高度 

  149. * @color: {color} 颜色 

  150. * */ 

  151. function drawRect(option){ 

  152. /************************************************************** 

  153. * 说明:canvas对象应该从外部传入,但是为了避免每次调用方法时都要传入,就固定写死了! 

  154. * ************************************************************/ 

  155. snake.beginPath(); 

  156. snake.fillStyle = option.color || '#000'; 

  157. snake.fillRect(option.x,option.y,option.w,option.h); 

  158. snake.closePath(); 



  159. /** 

  160. * @func: 写文字 

  161. * @params: {x} x坐标 

  162. * @params: {y} y坐标 

  163. * @params: {w} 宽度 

  164. * @params: {h} 高度 

  165. * @params: {color} 颜色 

  166. * @params: {baseline} 文字上下对齐方式 

  167. * @params: {align} 文字左右对齐方式 

  168. * */ 

  169. function drawText(option){ 

  170. snake.beginPath(); 

  171. snake.fillStyle = option.color || '#fff'; 

  172. snake.fontFamily = '微软雅黑'; 

  173. snake.font = option.font; 

  174. snake.textBaseline = option.baseline || 'middle'; 

  175. snake.textAlign = option.align || 'center'; 

  176. snake.fillText(option.text,option.x,option.y); 

  177. snake.closePath(); 



  178. /** 

  179. * @func: 画小方块 

  180. * @params: {x} x坐标 

  181. * @params: {y} y坐标 

  182. * */ 

  183. function drawSquare(x,y){ 

  184. snake.beginPath(); 

  185. snake.fillStyle = '#fff'; 

  186. snake.fillRect(x+1,y+1,size-2,size-2); 

  187. snake.closePath(); 



  188. /** 

  189. * @func: 画食物 

  190. * @params: {x} x坐标 

  191. * @params: {y} y坐标 

  192. * */ 

  193. function drawCircle(x,y){ 

  194. snake.beginPath(); 

  195. snake.arc(x+size/2, y+size/2, size/2, 0, Math.PI*2,true); 

  196. snake.fillStyle = '#0f0'; 

  197. snake.fill(); 

  198. snake.closePath(); 



  199. /** 

  200. * @func: 画蛇 

  201. * @params: {arr} 蛇身体坐标 

  202. * */ 

  203. function drawSnake(arr){ 

  204. for (var i = 0; i < arr.length; i++) { 

  205. var snake = arr[i]; 

  206. drawSquare(snake.x,snake.y) 






  207. </script> 

  208. </body> 

  209. </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. (转载)python: getopt的使用;

    注: 该文转载于https://blog.csdn.net/tianzhu123/article/details/7655499python中 getopt 模块, 该模块是专门用来处理命令行参数的 ...

  2. python机器学习-sklearn挖掘乳腺癌细胞(二)

    python机器学习-sklearn挖掘乳腺癌细胞( 博主亲自录制) 网易云观看地址 https://study.163.com/course/introduction.htm?courseId=10 ...

  3. Git(查看修改记录)

    我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...

  4. 详解Linux内核红黑树算法的实现

    转自:https://blog.csdn.net/npy_lp/article/details/7420689 内核源码:linux-2.6.38.8.tar.bz2 关于二叉查找树的概念请参考博文& ...

  5. shop++改造之ResponseEntity的坑

    后台shop++购物车请求的数据是一个Map结构的数据,业务需要要在类似的购物车中加一个套餐. 那么套餐里面就包含商品信息了,觉得不用他的Map了于是封装了两个类: 套餐信息显示类,商品信息显示类 请 ...

  6. Uncaught DOMException: Failed to construct 'WebSocket': The URL '/qibao/websocket/service1000' is invalid.

    出现这个问题是构造 WebSocket失败了. js代码改成 //实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接//等同于socket = new WebSocket(path+ ...

  7. spring cloud学习填坑笔记

    最近在学习spring cloud,由于学习资料具有普遍性,部分应个人原因导致的小细节问题,往往很难找到解决的办法.这特别记录一下自己遇到的一些问题. 一.eureka-server加入securit ...

  8. vue-cli脚手架笔记

    vue不支持IE8,因为vue使用了IE8无法模拟的 ECMAScript 5特性 使用vue-cli脚手架会让我们的工作非常方便 比如想编译一下es6的语法就使用 babel loader 和 ba ...

  9. DevC++ return 1 exit status

    当使用DevC++时编译运行程序出现 return 1 exit status 有可能是因为有在运行的命令窗口未关闭.

  10. Redis + keepalived 高可用行配置检测脚本

    Redis 在生产配置中:除redis集群.哨兵模式之外:主从模式还是比较普遍的. 配置 redis 多主从:由 keepalived 做 VIP 地址漂移.可以实现redis的高可用性. keepa ...