项目需求

  1. 设计地图
    • 设计高度和宽度
    • 地图由一个个原子组成(原子就是小的div)
    • 可以设计X轴有n个原子，Y轴n个原子
    • 显示画布的功能
  2. 创造食物
    • 食物的宽度和高度等于原子的大小
    • 功能：在地图上显示食物
  3. 蛇本体
    • 设置头、体、尾(至少三个原子)
    • 高度和宽度为原子的大小
    • 功能：
      1. 持续运动
      2. 键盘控制方向
      3. 遇到边界，游戏结束，重新开始
      4. 遇到事物，增加一个原子的大小
      5. 自己碰到自己，游戏结束，重新开始
  4. 规则
    1. 蛇可以升级，定义一个级别号
    2. 每升一级，速度加快
    3. 定义升级条件，随着等级提高，升级难度加大

业务流程：
创建每一个对象，相关使用对象
开始暂停功能

项目开发

阶段一： (制作背景)

  1.   1. 创建一个定时器，并绑定给开始游戏和暂停游戏z
  2.   1. 制作背景地图，选择是否显示格子
  3.   1. 代码见 -> [阶段一开发代码](https://www.yuque.com/u12581613/sr444s/euf28o?view=doc_embed)

阶段二：(基础内容)

  1.   1. 构造一个食物对象，并且会在地图中随机生成食物
  2.   1. 构造蛇对象，先初始化蛇的头、体、尾
  3.   1. 键盘控制方向，让蛇自由运动
  4.   1. 代码见 -> [阶段二开发代码](https://www.yuque.com/u12581613/sr444s/swqzg7?view=doc_embed)

阶段三：(控制规则)

  1.   1. 控制蛇吃掉食物会自己变长
  2.   1. 判断蛇撞墙和咬到自己，游戏结束
  3.   1. 增加游戏难度(如关数，速度...)
  4.   1. 美化网页(可自选)
  5.   1. 代码见下方，此项目完成

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>贪吃蛇</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         body{
  15.             background: url("img/bj.jpg") 0 no-repeat;
  16.             background-size: cover;
  17.             background-attachment: fixed;
  18.             position: absolute;
  19.             left: 0;
  20.             top: 0;
  21.             width: 100%;
  22.             height: 100%;
  23.         }
  24.         #main{
  25.             margin: 100px;
  26.         }
  27.         .btn{
  28.             width: 100px;
  29.             height: 40px;
  30.             /* margin: 10px; */
  31.         }
  32.         .canvas{
  33.             position: relative;
  34.             top: 40px;
  35.             border: 1px solid rgb(107, 221, 178);
  36.             background-color: rgb(218, 236, 245);
  37.             /* background-color: rgb(0, 0, 0); */
  38.         }
  39.         .gtitle{
  40.             font-size: 25px;
  41.             font-weight: bold;
  42.             margin: 10px;
  43.             padding:10px;
  44.         }
  45.         #gnum{
  46.             color: red;
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <div id="main">
  52.         <h1>贪吃蛇</h1>
  53.         <input class="btn" type="button" value="开始游戏" id="begin"/>
  54.         <input class="btn" type="button" value="暂停游戏" id="pause"/>
  55.         <span class="gtitle">第<span id="gnum">1</span>关</span>
  56.         <script>
  57.             var timer; //变量可以提升
  58.             var showCanvas = false;  //是否显示格子
  60.             /*设置地图的构造方法：
  61.             atom为原子初始化的宽高(应该一致)
  62.             xnum为地图x轴应该有多少个原子(横向)
  63.             ynum为地图y轴应该有多少个原子(纵向)
  64.             */
  65.             function Map(atom,xnum,ynum){
  66.                 this.atom = atom;
  67.                 this.xnum = xnum;
  68.                 this.ynum = ynum;
  70.                 this.canvas = null; //初始化画布
  71.                 this.create = function(){
  72.                     this.canvas = document.createElement("div");
  73.                     this.canvas.className = "canvas";
  74.                     this.canvas.style.width = this.atom * this.xnum + "px"; //画布的宽
  75.                     this.canvas.style.height = this.atom * this.ynum + "px"; //画布的高
  77.                     main.appendChild(this.canvas);
  79.                     //判断是否需要显示格子
  80.                     if (showCanvas){
  81.                         for (var i = 0;i<xnum;i++){
  82.                             for (var j = 0;j<ynum;j++){
  83.                                 //定义格子的样式
  84.                                 var lattice = document.createElement("div");
  85.                                 lattice.style.border = "1px solid rgb(107, 221, 178)";
  86.                                 lattice.style.width = this.atom + "px";
  87.                                 lattice.style.height = this.atom + "px";
  89.                                 //添加格子到地图中
  90.                                 this.canvas.appendChild(lattice);
  91.                                 lattice.style.position = "absolute";
  92.                                 //利用绝对定位
  93.                                 lattice.style.left = i * this.atom + "px";
  94.                                 lattice.style.top = j * this.atom + "px";
  95.                             }
  96.                         }
  97.                     }
  98.                 }
  99.             }
  101.             //创建食物的构造方法
  102.             function Food(map){
  103.                 this.width = map.atom;
  104.                 this.height = map.atom;
  105.                 this.bgcolor = "rgb(" + Math.floor(Math.random()*200) + "," + Math.floor(Math.random()*200) + ","+ Math.floor(Math.random()*200) + ")";
  106.                 //基于x轴和y轴的位置
  107.                 this.x = Math.floor(Math.random()*map.xnum);
  108.                 this.y = Math.floor(Math.random()*map.ynum);
  110.                 this.flag = document.createElement("div");
  111.                 //设置食物的样式
  112.                 this.flag.style.width = this.width + "px";
  113.                 this.flag.style.borderRadius = "5px";
  114.                 this.flag.style.height = this.height + "px";
  115.                 this.flag.style.backgroundColor = this.bgcolor;
  116.                 //定义食物的位置
  117.                 this.flag.style.position = "absolute";
  118.                 this.flag.style.left = this.x * this.width + "px";
  119.                 this.flag.style.top = this.y * this.height + "px";
  121.                 map.canvas.appendChild(this.flag);
  122.             }
  124.             //创建蛇的构造方法
  125.             function Snake(map){
  126.                 //设置宽、高
  127.                 this.width = map.atom;
  128.                 this.height = map.atom;
  129.                 //默认走的方向
  130.                 this.direction = "right";
  131.                 //设置蛇的主体
  132.                 this.body = [
  133.                     { x:2, y:0 },   //蛇头
  134.                     { x:1, y:0 },   //蛇体
  135.                     { x:0, y:0 },   //蛇尾
  136.                 ];
  138.                 //显示蛇 var i in this.body
  139.                 this.display = function(){
  140.                     for (var i = 0;i < this.body.length; i++){
  141.                         if (this.body[i].x != null){
  142.                             var create_s = document.createElement("div");
  143.                             //将节点保存到一个状态变量当中，以便之后删除
  144.                             this.body[i].flag = create_s;
  146.                             //设置蛇的样式
  147.                             create_s.style.width = this.width + "px";
  148.                             create_s.style.height = this.height + "px";
  149.                             /* create_s.style.border = "2px solid rgb(241, 159, 112)" */
  150.                             create_s.style.backgroundColor = "rgb(107, 109, 221)";
  151.                             create_s.style.borderRadius = "5px";
  153.                             //设置蛇的位置
  154.                             create_s.style.position = "absolute";
  155.                             create_s.style.left = this.body[i].x * this.width + "px";
  156.                             create_s.style.top = this.body[i].y * this.height + "px";
  157.                             //添加到地图中
  158.                             map.canvas.appendChild(create_s);
  159.                         }
  160.                     }
  161.                 }
  162.                 //控制蛇的运动
  163.                 this.run = function(){
  164.                     /*
  165.                         { x:2, y:0 },   //蛇头
  166.                         { x:1, y:0 },   //蛇体
  167.                         { x:0, y:0 },   //蛇尾
  168.                         让x轴的每个位置+1
  169.                     */
  170.                     for (var i = this.body.length-1; i>0; i--) {
  171.                         this.body[i].x = this.body[i-1].x;
  172.                         this.body[i].y = this.body[i-1].y;
  173.                     }
  175.                     //根据方向处理蛇头
  176.                     switch (this.direction) {
  177.                         case "left":this.body[0].x--; break;
  178.                         case "right":this.body[0].x++; break;
  179.                         case "up": this.body[0].y--; break;
  180.                         case "down": this.body[0].y++; break; 
  181.                     }
  183.                     //判断蛇头是否吃到食物，吃到食物坐标重叠
  184.                     if (this.body[0].x == food.x && this.body[0].y == food.y){
  185.                         //蛇加一节，由前面的否循环给这里的x和y赋值
  186.                         this.body.push({ x:null,y:null,flag:null });
  187.                         //判断是否下一关
  188.                         if (this.body.length >= level.slength){
  189.                             level.set();
  190.                         }
  192.                         //删除旧食物节点
  193.                         map.canvas.removeChild(food.flag);
  194.                         //创建新的食物
  195.                         food = new Food(map);
  196.                     }
  198.                     //判断蛇是否出界
  199.                     if (this.body[0].x < 0 ||  this.body[0].x > map.xnum - 1 || this.body[0].y < 0 || this.body[0].y > map.ynum-1) {
  200.                         //出界游戏结束，关闭定时器
  201.                         clearInterval(timer);
  202.                         alert("真笨呢~居然撞墙死掉了！");
  203.                         //重置关数
  204.                         document.querySelector("#gnum").innerHTML = "1";
  205.                         //重新开始游戏
  206.                         restart(map,this);
  207.                         return false;
  208.                     }
  210.                     // 判断蛇是否和咬到自己
  211.                     for (var i = 4;i < this.body.length; i++) {
  212.                         if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
  213.                             clearInterval(timer);
  214.                             alert("哎~怎么能咬到自己呢！");
  215.                             //重置关数
  216.                             document.querySelector("#gnum").innerHTML = "1";
  217.                             //重新开始游戏
  218.                             restart(map,this);
  219.                             return false;
  220.                         }
  221.                     }
  223.                     //删除旧的元素
  224.                     for (var i in this.body){
  225.                         if (this.body[i].flag != null){ //当吃到食物，flag等于null，且不能删除
  226.                             map.canvas.removeChild(this.body[i].flag);
  227.                         }
  228.                     }
  229.                     //显示新的元素
  230.                     this.display();
  231.                 }
  233.             }
  235.             function restart(map,snake){
  236.                 //删除蛇的"尸体"
  237.                 for (var i in snake.body){
  238.                     map.canvas.removeChild(snake.body[i].flag);
  239.                 }
  240.                 //重新生成蛇
  241.                 snake.body = [
  242.                     { x:2, y:0 },   //蛇头
  243.                     { x:1, y:0 },   //蛇体
  244.                     { x:0, y:0 },   //蛇尾
  245.                 ];
  246.                 //初始化方向
  247.                 snake.direction = "right";
  248.                 //重新显示蛇
  249.                 snake.display();
  251.                 map.canvas.removeChild(food.flag);
  252.                 food = new Food(map)
  253.             }
  255.             //设置规则类，控制级别
  256.             function Level(){
  257.                 this.num = 1;   //第几级别
  258.                 this.speed = 300;   //毫秒，每升一关，速度加快
  259.                 this.slength = 7;   //每一关的程度判断
  261.                 this.set = function(){
  262.                     this.num++;
  263.                     if (this.speed <= 100){
  264.                         this.speed = 100;
  265.                     }else{
  266.                         this.speed -= 40;
  267.                     }
  268.                     this.slength += 3;  //通关的长度，自行设置
  269.                     this.display();
  271.                     start();    //重新开始，速度加快
  272.                 }
  274.                 //定义关数的显示
  275.                 this.display = function(){
  276.                     document.querySelector("#gnum").innerHTML = this.num;
  277.                 }
  279.             }
  281.             //实例化规则类
  282.             var level = new Level();
  283.             level.display();
  285.             //实例化地图类
  286.             var map = new Map(20,40,20);
  287.             map.create();   //创建画布
  289.             //实例化食物类，并创建食物
  290.             var food = new Food(map);
  292.             //实例化蛇类，创建蛇
  293.             var snake = new Snake(map);
  294.             //显示蛇
  295.             snake.display();
  297.             //加入键盘事件，控制蛇的方向
  298.             document.onkeydown = function(event){
  299.                 event = event || window.event;
  300.                 //上：38 右：39 下：40 左：37
  301.                 switch (event.keyCode){
  302.                     case 38:
  303.                         if (snake.direction != "down"){
  304.                             snake.direction = "up";
  305.                         }
  306.                         break;
  307.                     case 39:
  308.                         if (snake.direction != "left"){
  309.                             snake.direction = "right";
  310.                         }
  311.                         break;
  312.                     case 40:
  313.                         if (snake.direction != "up"){
  314.                             snake.direction = "down";
  315.                         }
  316.                         break;
  317.                     case 37:
  318.                         if (snake.direction != "right"){
  319.                             snake.direction = "left";
  320.                         }
  321.                         break;
  322.                 }
  323.             }
  325.             function start(){
  327.                 clearInterval(timer);
  328.                 timer = setInterval(function(){
  329.                     snake.run();
  330.                 },level.speed);
  331.             }
  333.             //给开始按钮绑定函数
  334.             document.querySelector("#begin").onclick = function(){
  335.                 start();
  336.             }
  338.             document.querySelector("#pause").onclick = function(){
  339.                 clearInterval(timer);
  340.             }
  341.         </script>
  342.     </div>
  344. </body>
  345. </html>