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.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
3种js实现string的substring方法
Nov 09 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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的一些小问题
2010/07/03 PHP
php之可变函数的实例详解
2017/09/13 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
jQuery链使用指南
2015/01/20 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python的Django框架中settings文件的部署建议
2015/05/30 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
Python tkinter label 更新方法
2018/10/11 Python
详解python中的Turtle函数库
2018/11/19 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
python第三方库学习笔记
2020/02/07 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
医药工作岗位求职信分享
2013/12/31 职场文书
带薪年假请假条
2014/02/04 职场文书
西式婚礼主持词
2014/03/13 职场文书
货车司机岗位职责
2014/03/18 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
年终晚会活动方案
2014/08/21 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA