javascript实现贪吃蛇小练习


Posted in Javascript onJuly 05, 2020

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

游戏思路:

  • 创建方块、控制按钮(showBlock)
  • 方块移动(点击开始,不断创建并移除前面的方块,用到队列先进先出)
  • 控制移动(doUp\doDown\doLeft\doRight,加入用键盘控制)
  • 产生食物方块(generateFood)
  • 吃到食物变长(当方块位置相同时,吃食物)
  • 判断撞墙、撞到自己游戏结束
  • 设置积分
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>

<body>
 <style>
 body {
  margin: 0;
  padding: 0;
 }

 .content {
  width: 800px;
  height: 400px;
  background-color: gray;
  display: absolute;

 }
 </style>

 <div id="content" class="content">
 </div>
 <button onclick="start()">开始游戏</button>
 <button onclick="doUp()">上</button>
 <button onclick="doDown()">下</button>
 <button onclick="doLeft()">左</button>
 <button onclick="doRight()">右</button>
 <div id="score">0</div>

 <script>
 //定义参数
 var snackBlock = {};
 snackBlock.top = 20;
 snackBlock.left = 20;
 var firstDiv = showBlock(snackBlock.left, snackBlock.top, "red");
 var snackDivArray = [];//装方块的数组
 snackDivArray.push(firstDiv);

 var left = 1, right = 2, up = 3, down = 4;
 var direction = right;
 var food = generateFood();//生成食物
 var hasEat = false;
 var score = 0;


 function generateFood() {

  var left = getRandomNum(39);
  var top = getRandomNum(19);
  var foodBlock = showBlock(left, top, "pink");
  foodBlock.left = left;
  foodBlock.top = top;
  return foodBlock;
 }

 function getRandomNum(max) {
  return Math.round(Math.random() * max) * 20;
 }

 function start() {
  var interval = setInterval(function () {
  var newBlock = {};
  switch (direction) {
   case up:
   newBlock.top = snackBlock.top - 20;
   newBlock.left = snackBlock.left;
   break;
   case down:
   newBlock.top = snackBlock.top + 20;
   newBlock.left = snackBlock.left;
   break;
   case left:
   newBlock.top = snackBlock.top;
   newBlock.left = snackBlock.left - 20;
   break;
   case right:
   newBlock.top = snackBlock.top;
   newBlock.left = snackBlock.left + 20;
   break;

  }


  var currentLeft = newBlock.left;
  var currentTop = newBlock.top;
  var eat = false;

  //吃食物
  if (currentLeft == food.left && currentTop == food.top) {
   removeBlock(food);
   food = generateFood();
   eat = true;
   hasEat = true;
   score += 10;//吃一个加10分
   document.getElementById("score").innerHTML = score;//写入div
  }

  snackBlock = newBlock;
  //是否撞墙
  if (currentLeft < 0 || currentLeft >= 800 || currentTop < 0 || currentTop >= 400) {
   alert("game over!");
   clearInterval(interval);
   return;
  }
  if (eat == false) {
   //移除尾巴
   removeBlock(snackDivArray.shift(div));
  }
  //是否撞到自己
  snackDivArray.forEach(function (item, index, array) {
   if (item.top == currentTop && item.left == currentLeft) {
   alert("game over!");
   clearInterval(interval);
   return;
   }
  });

  //创建新的身体
  var div = showBlock(newBlock.left, newBlock.top, "red");
  div.left = newBlock.left;
  div.top = newBlock.top;
  snackDivArray.push(div);

  }, 300);

 }

 //方向控制
 function doUp() {
  if (direction == down && hasEat) {
  return;
  }
  direction = up;
 }
 function doDown() {
  if (direction == up && hasEat) {
  return;
  }
  direction = down;
 }
 function doRight() {
  if (direction == left && hasEat) {
  return;
  }
  direction = right;
 }
 function doLeft() {
  if (direction == right && hasEat) {
  return;
  }
  direction = left;
 }

 function showBlock(left, top, color) {//产生方块
  var content = document.getElementById("content");
  var snackDiv = document.createElement("div");
  snackDiv.style.width = "20px";
  snackDiv.style.height = "20px";
  snackDiv.style.left = left + "px";
  snackDiv.style.top = top + "px";
  snackDiv.style.background = color;
  snackDiv.style.position = "absolute";
  content.appendChild(snackDiv);
  return snackDiv;
 }
 function removeBlock(div) {//移除方块
  div.parentNode.removeChild(div);
 }
 //键盘控制方向
 document.onkeydown = function (e) {
  if (e && e.keyCode == 38) {
  doUp();
  } else if (e && e.keyCode == 40) {
  doDown();
  } else if (e && e.keyCode == 37) {
  doLeft();
  } else if (e && e.keyCode == 39) {
  doRight();
  }
 }
 </script>
</body>

</html>

更多有趣的经典小游戏实现专题,分享给大家:

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

Javascript 相关文章推荐
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
基于vue.js实现购物车
Jan 15 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
jQuery实现简单日历效果
Jul 05 #jQuery
jQuery实现飞机大战小游戏
Jul 05 #jQuery
原生js实现随机点名
Jul 05 #Javascript
实例讲解JavaScript 计时事件
Jul 04 #Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 #Javascript
详解Vue.js 响应接口
Jul 04 #Javascript
JavaScript中数组去重的5种方法
Jul 04 #Javascript
You might like
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
简单了解Django ContentType内置组件
2019/07/23 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
Django框架安装方法图文详解
2019/11/04 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
大学拉赞助协议书范文
2014/09/26 职场文书
义诊活动总结
2015/02/04 职场文书
天下第一关导游词
2015/02/06 职场文书
出纳试用期自我评价
2015/03/10 职场文书
小学美术教学反思
2016/02/17 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
python通配符之glob模块的使用详解
2021/04/24 Python
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python