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 相关文章推荐
js url传值中文乱码之解决之道
Nov 20 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
js读取本地文件的实例
Dec 22 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
arguments对象
2006/11/20 Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
精选奢华:THE LIST
2019/09/05 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
linux面试题参考答案(8)
2016/04/19 面试题
公司授权委托书样本
2014/09/15 职场文书