js - 贪吃蛇案例

于 2021-12-14 20:33:31 发布
阅读量778 收藏
点赞数
分类专栏： 案例 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizixuan2001/article/details/121939375
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100%;
        height: 700px;
        color: rgb(232, 149, 240);
        background-image: url(./xingkong.gif);
        background-position: center;
        background-size: 350px;
        position: relative;
      }
      .start,.zanTing{
        width: 250px;
        height: 80px;
        background-position: center;
        position: absolute;
        left: 545px;
        top: 260px;
        border-radius: 40px;
        background-image: url(./start.jpg);
        background-size: 276px;
      }
      .zanTing{
        height: 155px;
        width: 150px;
        position: absolute;
        left: 592px;
        top: 226px;
        background-position: center;
        background-image: url(./zt.jpg);
        background-size: 194px 251px;
        border: none;
        display: none;
      }
    </style>
  </head>
  <body>
    <header id="map"></header>
    <button class="start"></button>
    <button class="zanTing"></button>
  </body>
</html>

<script>

  var position = "absolute";
  var map1 = document.getElementById("map");
  // 食物  宽高   位置 X Y 颜色
  function Food(
    width = 10,
    height = 10,
    X = 0,
    Y = 0,
    backgroundColor = "gold"
  ) {
    this.width = width;
    this.height = height;
    this.X = X;
    this.Y = Y;
    this.backgroundColor = backgroundColor;
  }
  // 随机 渲染
  Food.prototype.renderFood = function (map) {
    var maxX = map.offsetWidth - this.width;
    var maxY = map.offsetHeight - this.height;
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.width = this.width + "px";
    div.style.height = this.height + "px";
    // 随机位置 显示
    // 随机食物的位置，map.宽度/food.宽度，总共有多少分food的宽度，随机一下。然后再乘以food的宽度
    this.X =
      parseInt((Math.random() * map.offsetWidth) / this.width) * this.width;
    this.Y =
      parseInt((Math.random() * map.offsetHeight) / this.height) * this.height;
    div.style.left = this.X + "px";
    div.style.top = this.Y + "px";
    div.style.backgroundColor = this.backgroundColor;
    div.style.borderRadius="50%";
    this.foodDom = div;
    map.appendChild(div);
  };
  var food1 = new Food(20, 20, 0, 0, "rgb(253, 0, 76)");
  food1.renderFood(map1);
  //   蛇的对象  宽 高 left top  蛇身（数组 对象（X,Y,颜色color））
  function Snake(width = 10, height = 10, direction) {
    this.width = width;
    this.height = height;
    // 用来保留蛇的dom元素
    this.bodyDom = [];
    this.direction = "right";
    this.body = [
      { X: 2, Y: 1, backgroundColor: "gold" },
      { X: 1, Y: 1, backgroundColor: "rgb(232, 149, 240)" },
      { X: 0, Y: 1, backgroundColor: "rgb(232, 149, 240)" },
    ];
  }
  Snake.prototype.renderSnake = function (map) {
    for (var i = 0; i < this.body.length; i++) {
      var div = document.createElement("div");
      div.style.position = "absolute";
      div.style.height = this.height + "px";
      div.style.width = this.width + "px";
      div.style.borderRadius="50%";
      div.style.left = this.body[i].X * this.width + "px";
      div.style.top = this.body[i].Y * this.height + "px";
      div.style.backgroundColor = this.body[i].backgroundColor;
      // 保留蛇dom
      this.bodyDom.push(div);
      map.appendChild(div);
    }
  };
  Snake.prototype.moveSnake = function (food, map) {
    console.log(this.body[0].X);
    // 如果蛇头超届死亡
    if (
      this.body[0].X < 0 ||
      this.body[0].X >= map.offsetWidth / this.width ||
      this.body[0].Y < 0 ||
      this.body[0].Y >= map.offsetHeight / this.height
    ) {
      clearInterval(timer1);
      alert("结束游戏啦！");
    }
    // 如果蛇头和食物重合,则蛇身加一
    var lastBody = this.body[this.body.length - 1];
    if (
      this.body[0].X == food.X / food.width &&
      this.body[0].Y == food.Y / food.height
    ) {
      // 删除旧的食物，生成新的食物
      food.foodDom.remove();
      food.renderFood(map);
      this.body.push({
        X: lastBody.X,
        Y: lastBody.Y,
        backgroundColor: lastBody.backgroundColor,
      });
    }
    //   蛇身移动
    var lastBackgroundColor = this.body[this.body.length - 1].backgroundColor;
    for (var i = this.body.length - 1; i > 0; i--) {
      this.body[i].X = this.body[i - 1].X;
      this.body[i].Y = this.body[i - 1].Y;
      this.body[i].backgroundColor = lastBackgroundColor;
    }
    // 蛇头
    if (this.direction == "up") {
      this.body[0].Y--;
    }
    if (this.direction == "down") {
      this.body[0].Y++;
    }
    if (this.direction == "left") {
      this.body[0].X--;
    }
    if (this.direction == "right") {
      this.body[0].X++;
    }
  };
  // 删除蛇
  Snake.prototype.deleteSnake = function () {
    for (var i = 0; i < this.bodyDom.length; i++) {
      this.bodyDom[i].remove();
    }
  };
  var snake1 = new Snake(20, 20);
  console.log(snake1.bodyDom);
  // 监听键盘事件
  document.addEventListener("keypress", function (event) {
    var event = event || window.event;
    // a是97 方向是左
    if (event.keyCode == 97) {
      snake1.direction = "left";
    }
    if (event.keyCode == 119) {
      snake1.direction = "up";
    }
    if (event.keyCode == 100) {
      snake1.direction = "right";
    }
    
    if (event.keyCode == 115) {
      snake1.direction = "down";
    }
    console.log(snake1.direction);

  });
 

  //点击开始
  var timer1
  var start = document.getElementsByClassName("start")[0]
  start.onclick = function(){
  start.style.display = "none"
  snake1.renderSnake(map1);
   timer1 = setInterval(function () {
    snake1.deleteSnake();
    snake1.moveSnake(food1, map1);
    snake1.renderSnake(map1);
  }, 100);
  }
  //双击暂停
  var zanTing = document.getElementsByClassName("zanTing")[0]
  window.ondblclick = function(){
    zanTing.style.display = "block"
    clearInterval(timer1)
  }
  zanTing.onclick = function(){
    zanTing.style.display = "none"
    snake1.renderSnake(map1);
    timer1 = setInterval(function () {
    snake1.deleteSnake();
    snake1.moveSnake(food1, map1);
    snake1.renderSnake(map1);
  }, 150);
  }





  // var position = "absolute";
  // var map1 = document.getElementById("map");
  // // 食物  宽高   位置 X Y 颜色
  // function Food(
  //   width = 10,
  //   height = 10,
  //   X = 0,
  //   Y = 0,
  //   backgroundColor = "gold"
  // ) {
  //   this.width = width;
  //   this.height = height;
  //   this.X = X;
  //   this.Y = Y;
  //   this.backgroundColor = backgroundColor;
  // }
  // // 随机 渲染
  // Food.prototype.renderFood = function (map) {
  //   var maxX = map.offsetWidth - this.width;
  //   var maxY = map.offsetHeight - this.height;
  //   var div = document.createElement("div");
  //   div.style.position = "absolute";
  //   div.style.width = this.width + "px";
  //   div.style.height = this.height + "px";
  //   // 随机位置 显示
  //   // 随机食物的位置，map.宽度/food.宽度，总共有多少分food的宽度，随机一下。然后再乘以food的宽度
  //   this.X =
  //     parseInt((Math.random() * map.offsetWidth) / this.width) * this.width;
  //   this.Y =
  //     parseInt((Math.random() * map.offsetHeight) / this.height) * this.height;
  //   div.style.left = this.X + "px";
  //   div.style.top = this.Y + "px";
  //   div.style.backgroundColor = this.backgroundColor;
  //   div.style.borderRadius="50%";
  //   this.foodDom = div;
  //   map.appendChild(div);
  // };
  // var food1 = new Food(20, 20, 0, 0, "rgb(253, 0, 76)");
  // food1.renderFood(map1);
  // //   蛇的对象  宽 高 left top  蛇身（数组 对象（X,Y,颜色color））
  // function Snake(width = 10, height = 10, direction) {
  //   this.width = width;
  //   this.height = height;
  //   // 用来保留蛇的dom元素
  //   this.bodyDom = [];
  //   this.direction = "right";
  //   this.body = [
  //     { X: 2, Y: 1, backgroundColor: "gold" },
  //     { X: 1, Y: 1, backgroundColor: "rgb(232, 149, 240)" },
  //     { X: 0, Y: 1, backgroundColor: "rgb(232, 149, 240)" },
  //   ];
  // }
  // Snake.prototype.renderSnake = function (map) {
  //   for (var i = 0; i < this.body.length; i++) {
  //     var div = document.createElement("div");
  //     div.style.position = "absolute";
  //     div.style.height = this.height + "px";
  //     div.style.width = this.width + "px";
  //     div.style.borderRadius="50%";
  //     div.style.left = this.body[i].X * this.width + "px";
  //     div.style.top = this.body[i].Y * this.height + "px";
  //     div.style.backgroundColor = this.body[i].backgroundColor;
  //     // 保留蛇dom
  //     this.bodyDom.push(div);
  //     map.appendChild(div);
  //   }
  // };
  // Snake.prototype.moveSnake = function (food, map) {
  //   console.log(this.body[0].X);
  //   // 如果蛇头超届死亡
  //   if (
  //     this.body[0].X < 0 ||
  //     this.body[0].X >= map.offsetWidth / this.width ||
  //     this.body[0].Y < 0 ||
  //     this.body[0].Y >= map.offsetHeight / this.height
  //   ) {
  //     clearInterval(timer1);
  //     alert("结束游戏啦！");
  //   }
  //   // 如果蛇头和食物重合,则蛇身加一
  //   var lastBody = this.body[this.body.length - 1];
  //   if (
  //     this.body[0].X == food.X / food.width &&
  //     this.body[0].Y == food.Y / food.height
  //   ) {
  //     // 删除旧的食物，生成新的食物
  //     food.foodDom.remove();
  //     food.renderFood(map);
  //     this.body.push({
  //       X: lastBody.X,
  //       Y: lastBody.Y,
  //       backgroundColor: lastBody.backgroundColor,
  //     });
  //   }
  //   //   蛇身移动
  //   var lastBackgroundColor = this.body[this.body.length - 1].backgroundColor;
  //   for (var i = this.body.length - 1; i > 0; i--) {
  //     this.body[i].X = this.body[i - 1].X;
  //     this.body[i].Y = this.body[i - 1].Y;
  //     this.body[i].backgroundColor = lastBackgroundColor;
  //   }
  //   // 蛇头
  //   if (this.direction == "up") {
  //     this.body[0].Y--;
  //   }
  //   if (this.direction == "down") {
  //     this.body[0].Y++;
  //   }
  //   if (this.direction == "left") {
  //     this.body[0].X--;
  //   }
  //   if (this.direction == "right") {
  //     this.body[0].X++;
  //   }
  // };
  // // 删除蛇
  // Snake.prototype.deleteSnake = function () {
  //   for (var i = 0; i < this.bodyDom.length; i++) {
  //     this.bodyDom[i].remove();
  //   }
  // };
  // var snake1 = new Snake(20, 20);
  // console.log(snake1.bodyDom);
  // // 监听键盘事件
  // document.addEventListener("keypress", function (event) {
  //   var event = event || window.event;
  //   // a是97 方向是左
  //   if (event.keyCode == 97) {
  //     snake1.direction = "left";
  //   }
  //   if (event.keyCode == 119) {
  //     snake1.direction = "up";
  //   }
  //   if (event.keyCode == 100) {
  //     snake1.direction = "right";
  //   }
    
  //   if (event.keyCode == 115) {
  //     snake1.direction = "down";
  //   }
  //   console.log(snake1.direction);

  // });
  // snake1.renderSnake(map1);
  // var timer1 = setInterval(function () {
  //   snake1.deleteSnake();
  //   snake1.moveSnake(food1, map1);
  //   snake1.renderSnake(map1);
  // }, 100);
</script>

栗同学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端学习笔记——JavaScript之面向对象游戏案例：贪吃蛇
唯恋殊雨的博客
09-24 1571
面向对象游戏案例：贪吃蛇 案例相关源码以上传到 GitHub ：https://github.com/lipengzhou/new-snake 案例介绍 游戏演示 在线演示地址：贪吃蛇 案例目标 游戏的目的是用来体会js高级语法的使用 不需要具备抽象对象的能力，使用面向对象的方式分析问题，需要一个漫长的过程。 功能实现 搭建页面 放一个容器盛放游戏场景 div#map，设置样式 #map { ...
js案例之贪吃蛇
weixin_46073353的博客
05-17 167
声明变量 将游戏所需的变量申明 var map; //地图 var snake; //蛇 var food; //食物 var timer; //定时器 var initSpeed=200; //初始定时器时间间隔（毫秒）,间接代表蛇移动速度 var nowSpeed=initSpeed; //游戏进行时蛇移动速度 var grade=0; //积分 var flag=1; //（可间接看做）关卡 地图 开始构建游戏地图，创
JS实现贪吃蛇案例
LY
05-05 963
贪吃蛇—面向对象的思想 面向对象的编程思想： 根据需求,抽象出相关的对象，总结对象的特征和行为，把特征变成属性，行为变成方法,然后定义(js)构造函数，实例化对象，通过对象调用属性和方法，完成相应的需求。 思路 贪吃蛇包含：地图、食物、蛇 地图： 地图的属性：宽、高、背景颜色 小蛇和食物是相对于地图显示，是地图的子元素，脱离文档流，所以地图也要脱离文档流---------css设置样式 &lt...
js实现贪吃蛇小案例
小白牛的博客
12-03 296
贪吃蛇小案例 知识点：面向对象的分析，原型的使用，this指针的使用，自调用函数的使用 对象的分析 游戏对象 食物对象 小蛇对象 分析对象创建对应的对象构造函数 食物对象 利用原型创建食物初始化函数（每次初始化之前先要删除之前的食物利用子元素查找父级元素的方法删除），然后利用随机数确定食物的位置 小蛇对象 （全部通过坐标变化实现） 初始化，利用一个数组存储小蛇的属性是关键 小蛇的移...
JS-part15.2-贪吃蛇案例
晓葉斑比
09-14 120
Javascript贪吃蛇 贪吃蛇 1. 分析需求 + 我们把一个贪吃蛇拆成四个模块 1-1. 食物模块 - 生成一个食物, 随机一个位置 1-2. 蛇模块 - 生成一个蛇, 给蛇加一节, 移动, 判断吃到食物, 死亡 1-3. 游戏规则 - 跑的多快, 游戏计分, 游戏怎么开始, 怎么结束, 吃到食物做什么, 撞墙做什么 1-4. 整合, 点击什么开始, 点击什么结束, ... 2. 书写食物模块 + 创建一个标签, 类名是 food + 计算一个位置
JavaScript面向对象编程小游戏---贪吃蛇代码实例
10-17
- 对于前端开发者，这个JavaScript贪吃蛇项目是一个很好的实践平台，可以帮助他们巩固面向对象编程概念，提高JavaScript编程技巧，并了解如何将这些技术应用于实际项目中。 - 该项目源码已在GitHub上公开，提供了...
JavaScript贪吃蛇案例
11-26
一个简单js代码，，
JS实现的贪吃蛇游戏案例详解
10-17
在本文中，我们将深入探讨如何使用JavaScript实现一个贪吃蛇游戏。贪吃蛇游戏是一个经典的像素级游戏，它基于简单的规则和玩家的反应速度。在这个案例中，我们将主要关注游戏的实现步骤、核心原理、算法以及需要注意...
一个js实现的贪吃蛇案例
09-07
一个400行的js实现的贪吃蛇小游戏
JS实现的贪吃蛇游戏完整实例
Hbiude的博客
08-17 664
这篇文章主要介绍了JS实现的贪吃蛇游戏,结合完整实例形式分析了javascript实现贪吃蛇游戏的具体步骤、原理与相关操作技巧,需要的朋友可以参考下 本文实例讲述了JS实现的贪吃蛇游戏。分享给大家供大家参考，具体如下： 思想： 1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑 2、设计食物：属性宽、高 3、显示蛇：根据状态向地图里加元素 4、蛇跑起来：下一节到前一节的位置，蛇头根据方向变，删除原来的蛇，新建蛇；当出界时，死亡，初始化；当蛇头吃到自己的时候，死亡，初始化 ..
JS高级第二天_贪吃蛇小案例
梵妮的博客
08-03 261
贪吃蛇 地图: 宽，高，背景颜色，因为小蛇和食物都是相对于地图显示的,这里小蛇和食物都是地图的子元素,随机位置显示,脱离文档流的,地图也需要脱离文档流–css需要设置:宽,高,背景颜色,脱标 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&
利用JS实现贪吃蛇的游戏(具体分析)之二蛇模块的分析
weixin_42839080的博客
08-06 2137
一.需求分析: 1. 在页面上初始化一条蛇长3个食物宽度,并且初始化移动方向是向右 2. 让蛇可以在页面上移动 3. 让蛇吃掉食物后,身体变长 二.思路分析: 1.同样利用构造函数完成对蛇的初始化,但是除了构造蛇的宽度,高度,颜色外,还需要将蛇分成三个单元(红色,黄色,绿色),这三个单元对应不同的地图x,y坐标....
用JavaScript写的贪吃蛇游戏（很简单，很详细）
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
js小游戏案例（贪吃蛇）
ICY___的博客
02-23 2927
贪吃蛇是我们都玩过的游戏，也是一代人的回忆。今天就带大家用原生js实现贪吃蛇游戏功能。 基本思路：随机创建地图；利用top和left值，利用坐标的传递使蛇动起来；随机在地图上显示食物；利用蛇头的坐标进行判断； 优化细节； 开发模式：单例模式；（开发模式有时间一并分享给大家） 实现效果如下： 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="...
JS小案例: 贪吃蛇
张鹿鹿的专栏
08-16 2421
直接上代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas测试</title> <script type="application/javascript"> window.onload = function () { //绘图对象
js实现贪吃蛇
热门推荐
snow_small的博客
01-19 2万+
思想：1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑2、设计食物：属性宽、高3、显示蛇：根据状态向地图里加元素4、蛇跑起来：下一节到前一节的位置，蛇头根据方向变，删除原来的蛇，新建蛇；当出界时，死亡，初始化；当蛇头吃到自己的时候，死亡，初始化5、食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物6、添加定时器，绑定按键 <meta name="viewpor
js写贪吃蛇案例
木易一
02-23 524
&lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ margin: 0; padding: 0; }
JavaScript贪吃蛇
原地起飞
11-24 5463
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
c语言--贪吃蛇双人对战
最新发布
10-17
好的，我理解了你的问题。实现贪吃蛇双人对战需要以下步骤： 1. 定义蛇的结构体，包括蛇头、蛇身、蛇尾等信息。 2. 定义地图的结构体，包括地图大小、障碍物、食物等信息。 3. 实现蛇的移动，包括蛇头的移动、蛇身的移动、蛇尾的移动等。 4. 实现蛇的生长，当蛇吃到食物时，蛇的长度加一。 5. 实现碰撞检测，包括蛇头与边界的碰撞、蛇头与障碍物的碰撞、蛇头与蛇身的碰撞等。 6. 实现游戏结束判断，当某一条蛇死亡时，游戏结束。 在实现双人对战时，需要增加以下内容： 1. 定义两条蛇，并分别控制它们的移动。 2. 实现两条蛇之间的碰撞检测，包括蛇头与蛇头的碰撞、蛇头与对方蛇身的碰撞等。 3. 实现两条蛇之间的互动，包括吃到食物后对对方蛇的影响等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值