JavaScript贪吃蛇游戏源码

最新推荐文章于 2024-05-02 14:46:08 发布

「已注销」

最新推荐文章于 2024-05-02 14:46:08 发布

阅读量358

点赞数

分类专栏： JavaScript 前端文章标签：贪吃蛇游戏源码

本文链接：https://blog.csdn.net/weixin_44305163/article/details/89642696

版权

蛇对象

 1. 属性：方向、一组蛇节（div，div，div）、地图、食物 
 2. 方法：生成蛇，增加蛇头，计算新蛇头的位置，蛇移动

食物对象

 1. 属性：横向位置、纵向位置、div元素、地图 
 2. 方法：随机位置

**
游戏对象**

属性：蛇，食物
方法：开始

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>贪吃蛇</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="map"> 
    <!-- <div class="snake-body" style="left:60px;top:0"></div>
    <div class="snake-body" style="left:80px;top:0"></div>
    <div class="snake-head" style="left:100px;top:0"></div> --> 
    <!-- 
      【生成蛇的规律】
      生成蛇，其实本质上就是不断的增加新蛇头。
      若没有蛇头，则创建一个新蛇头，设置位置为 0,0
      若有蛇头，则先把原有的蛇头变为身体，再添加新的蛇头。并且控制新蛇头的位置，在旧蛇头的基础上计算新蛇头的位置（根据方向来计算）。
     -->

     <!-- 
       【蛇移动的规律】
       把蛇的最后一节取出来，变为蛇头。
       旧的蛇头变为身体
       把最后一节添加到最前面，设置新蛇头的位置
      -->
  </div>
  <!-- 在这里压缩的目的是减少文件体积，合并的目的是减少请求次数。 这样可以提高程序的网页的访问速度。 -->
  <script src="js/all.js" ></script>

  <!-- 使用食物对象 -->
  <script>
    // 获取页面上的地图元素
    var map = document.querySelector('#map'); 
    // 创建了一个食物对象
    // var food1 = new Food(map);
    // // 食物随机一下
    // food1.randomLoaction();

   var game = new Game(map);
   game.start();

  </script>
</body>
</html>

/* 地图 */
#map {
 position: relative;
 margin: 0 auto;
 width: 900px;
 height: 600px;
 background-color: #1f575c;
 box-shadow: 0px 0px 50px 20px green;
}
/* 蛇头、蛇身体、食物基本样式 */
.snake-head,
.snake-body,
.food {
   position: absolute;
   width: 18px;
   height: 18px;
   border: dotted 1px black;
   /* border-radius: 17px; */
}
/* 蛇的身体 */
.snake-body {
   background: pink;
}
/* 蛇头样式 */
.snake-head {
   background-color: red;    
}
/* 食物 */
.food {
   ba

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript贪吃蛇游戏源码

蛇对象 1. 属性：方向、一组蛇节（div，div，div）、地图、食物 2. 方法：生成蛇，增加蛇头，计算新蛇头的位置，蛇移动食物对象 1. 属性：横向位置、纵向位置、div元素、地图 2. 方法：随机位置**游戏对象** 1. 属性：蛇，食物 2. 方法：开始<!DOCTYPE html><html lang="en"><he...
复制链接

扫一扫