js实现贪吃蛇游戏 canvas绘制地图


Posted in Javascript onSeptember 09, 2020

本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下

js实现贪吃蛇游戏 canvas绘制地图

思路

400px * 400px的地图,每20px*20px分成单元格绘制蛇身
每次移动即更换尾 部 头部的颜色

js实现贪吃蛇游戏 canvas绘制地图

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 html,
 body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
 }
 </style>
</head>

<body>
 <canvas width="400" height="400" style="background-color: #362E3D;">给我换chromium</canvas>

 <script>
 const map = document.getElementsByTagName('canvas')[0].getContext('2d'); // 数组存蛇身位置 一行 1-20 二行21-40 总共20*20
 var snake = [23, 22, 21]; // 数组头部蛇头 后部蛇尾
 var direction = 1; // 1右 -1左 -20上 20下
 var flag = 1; // 解决快速键盘bug
 var food = 50; // 食物位置

 function draw(x, color) {
  map.fillStyle = color;
 
 //用1-400标识没找到通用像素换算公式 最后一列分开计算
  if (x % 20 == 0) { // 最后一列
  map.fillRect(380 + 2, Math.floor(x / 21) * 20 + 2, 18, 18); // 使1-400的块标志对应像素点
  } else { // 其余列
  map.fillRect((x % 20 - 1) * 20 + 2, Math.floor(x / 20) * 20 + 2, 18, 18);
  }
  flag = 1; // draw()完后才能改变direction
 }

 let len = snake.length;
 for (let i = 0; i < len; i++)
  draw(snake[i], "#FDE5C5");

 (function () {
  let head = snake[0] + direction;

  if (head % 20 == 1 && direction == 1 || head % 20 == 0 && direction == -1 || head < 1 || head > 400 ||
  snake.includes(head))
  return alert('GG');
  snake.unshift(head);

  draw(head, "#FDE5C5");

  if (head == food) {
  while (snake.includes(food = Math.floor(Math.random() * 400 + 1)));
  // arr.includes 有的话返回true 否则false
  } else { //正常移动 没吃到才改变尾部颜色
  draw(snake.pop(), "#362E3D");
  }
  draw(food, "#EB1A4B");

  setTimeout(arguments.callee, 100); // arguments.callee 代表函数名 调用匿名函数自己
 })();

 document.onkeydown = function (event) {
  event = event || window.event; // ie中是windo.event
  if (flag) { // draw执行后(蛇移动后)才可以改变direction
  switch (event.keyCode) {
   case 37:
   direction != 1 ? direction = -1 : 0;
   break;
   case 38:
   direction != 20 ? direction = -20 : 0;
   break;
   case 39:
   direction != -1 ? direction = 1 : 0;
   break;
   case 40:
   direction != -20 ? direction = 20 : 0;
   break;
  }
  }
  flag = 0; // 等待下一次draw执行
 }
 </script>
</body>


</html>

解决 连续快速键盘bug
方向键上下左右实际改变 direction 的值,如果再蛇下一次移动之前连续改变,有可能会产生反向吃自己的bug
所以加入flag 详情看源码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 #Javascript
JavaScript常用8种数组去重代码实例
Sep 09 #Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 #Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
js实现右键弹出自定义菜单
Sep 08 #Javascript
vue 使用原生组件上传图片的实例
Sep 08 #Javascript
使用js和canvas实现时钟效果
Sep 08 #Javascript
You might like
PHP5函数小全(分享)
2013/06/06 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
小程序实现录音功能
2020/09/22 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
最基础的Python的socket编程入门教程
2015/04/23 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
党员实事承诺书
2014/03/26 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
先进单位事迹材料
2014/12/25 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
公司车队管理制度
2015/08/04 职场文书
社区服务活动感想
2015/08/11 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技