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 相关文章推荐
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
vue 中swiper的使用教程
May 22 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 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
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
javascript 获取图片颜色
2009/04/05 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python 求10个数的平均数实例
2019/12/16 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
高级销售员求职信
2013/10/25 职场文书
计算机系毕业生推荐信
2013/11/06 职场文书
房地产融资计划书
2014/01/10 职场文书
期末自我鉴定
2014/01/23 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis