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 相关文章推荐
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
php socket方式提交的post详解
2008/07/19 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
javascript复制对象使用说明
2011/06/28 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
node.js中watch机制详解
2014/11/17 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
js利用iframe实现选项卡效果
2020/08/09 Javascript
jQuery实现日历效果
2020/09/11 jQuery
node.js如何操作MySQL数据库
2020/10/29 Javascript
python传递参数方式小结
2015/04/17 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python交互模式基础知识点学习
2020/06/18 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
前台接待员岗位职责
2014/01/02 职场文书
关于人生的感言
2014/01/17 职场文书
综合实践活动总结
2014/05/05 职场文书
实习推荐信
2014/05/10 职场文书
中学生打架检讨书
2014/10/13 职场文书
党员作风建设自查报告
2014/10/23 职场文书
学生个人评语大全
2015/01/04 职场文书
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS