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 相关文章推荐
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
js常用DOM方法详解
Feb 04 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
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
基于mysql的论坛(4)
2006/10/09 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP中的self关键字详解
2019/06/23 PHP
javascript读取RSS数据
2007/01/20 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
js charAt的使用示例
2014/02/18 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JavaScript中this详解
2015/09/01 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
python 判断一个进程是否存在
2009/04/09 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
python 实现return返回多个值
2019/11/19 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
文秘大学生求职信
2014/02/25 职场文书
旷课检讨书500字
2014/10/14 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
小学中队长竞选稿
2015/11/20 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
Python日志模块logging用法
2022/06/05 Python