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 Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
基于jquery的页面划词搜索JS
Sep 14 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
js验证是否为数字的总结
Apr 14 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
基于javascript实现日历功能原理及代码实例
May 07 Javascript
如何手写简易的 Vue Router
Oct 10 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中的socket_read和socket_recv区别详解
2015/02/09 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python装饰器使用方法实例
2013/11/21 Python
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python学习笔记:字典的使用示例详解
2014/06/13 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
中专毕业生自我鉴定
2014/02/02 职场文书
美容院经理岗位职责
2014/04/03 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
教师工作表现评语
2014/12/31 职场文书
法院个人总结
2015/03/03 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技