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
Jun 19 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
详解vue中axios的封装
Jul 18 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
JS+CSS实现3D切割轮播图
Mar 21 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
重置版游戏视频
2020/04/09 魔兽争霸
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php数组查找函数总结
2014/11/18 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
python ip正则式
2009/05/07 Python
python实现查询IP地址所在地
2015/03/29 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
Weblogc domain问题
2014/01/27 面试题
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
数控专业自荐书范文
2014/03/16 职场文书
股权投资意向书
2014/04/01 职场文书
授权委托书范本
2014/04/03 职场文书
2014年终工作总结范本
2014/12/15 职场文书
销售助理岗位职责
2015/02/11 职场文书
设备技术员岗位职责
2015/04/11 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
图文详解nginx日志切割的实现
2022/01/18 Servers