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中void(0)的具体含义解释
Feb 27 Javascript
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
JavaScript基本编码模式小结
May 23 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
javascript时间函数大全
Jun 30 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 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设计模式 Template (模板模式)
2011/06/26 PHP
php array的学习笔记
2012/05/10 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php的debug相关函数用法示例
2016/07/11 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
《盲人摸象》教学反思
2014/02/16 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
学雷锋日活动总结
2015/02/06 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS