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.         #main{
    15.             margin: 100px;
    16.         }
    17.         .btn{
    18.             width: 100px;
    19.             height: 40px;
    20.             /* margin: 10px; */
    21.         }
    22.         .canvas{
    23.             position: relative;
    24.             top: 40px;
    25.             border: 1px solid rgb(107, 221, 178);
    26.             background-color: rgb(218, 236, 245);
    27.             /* background-color: rgb(241, 159, 112); */
    28.         }
    29.     </style>
    30. </head>
    31. <body>
    32.     <div id="main">
    33.         <input class="btn" type="button" value="开始游戏" id="begin"/>
    34.         <input class="btn" type="button" value="暂停游戏" id="pause"/>
    36.         <script>
    37.             var timer; //变量可以提升
    38.             var showCanvas = true;  //是否显示格子
    40.             /*设置地图的构造方法：
    41.             atom为原子初始化的宽高(应该一致)
    42.             xnum为地图x轴应该有多少个原子(横向)
    43.             ynum为地图y轴应该有多少个原子(纵向)
    44.             */
    45.             function Map(atom,xnum,ynum){
    46.                 this.atom = atom;
    47.                 this.xnum = xnum;
    48.                 this.ynum = ynum;
    50.                 this.canvas = null; //初始化画布
    51.                 this.create = function(){
    52.                     this.canvas = document.createElement("div");
    53.                     this.canvas.className = "canvas";
    54.                     this.canvas.style.width = this.atom * this.xnum + "px"; //画布的宽
    55.                     this.canvas.style.height = this.atom * this.ynum + "px"; //画布的高
    57.                     main.appendChild(this.canvas);
    59.                     //判断是否需要显示格子
    60.                     if (showCanvas){
    61.                         for (var i = 0;i<xnum;i++){
    62.                             for (var j = 0;j<ynum;j++){
    63.                                 //定义格子的样式
    64.                                 var lattice = document.createElement("div");
    65.                                 lattice.style.border = "1px solid rgb(107, 221, 178)";
    66.                                 lattice.style.width = this.atom + "px";
    67.                                 lattice.style.height = this.atom + "px";
    69.                                 //添加格子到地图中
    70.                                 this.canvas.appendChild(lattice);
    71.                                 lattice.style.position = "absolute";
    72.                                 //利用绝对定位
    73.                                 lattice.style.left = i * this.atom + "px";
    74.                                 lattice.style.top = j * this.atom + "px";
    75.                             }
    76.                         }
    77.                     }
    78.                 }
    79.             }
    81.             //创建食物的构造方法
    82.             function Food(map){
    83.                 this.width = map.atom;
    84.                 this.height = map.atom;
    85.                 this.bgcolor = "rgb(" + Math.floor(Math.random()*200) + "," + Math.floor(Math.random()*200) + ","+ Math.floor(Math.random()*200) + ")";
    86.                 //基于x轴和y轴的位置
    87.                 this.x = Math.floor(Math.random()*map.xnum);
    88.                 this.y = Math.floor(Math.random()*map.ynum);
    90.                 this.flag = document.createElement("div");
    91.                 //设置食物的样式
    92.                 this.flag.style.width = this.width + "px";
    93.                 this.flag.style.borderRadius = "5px";
    94.                 this.flag.style.height = this.height + "px";
    95.                 this.flag.style.backgroundColor = this.bgcolor;
    96.                 //定义食物的位置
    97.                 this.flag.style.position = "absolute";
    98.                 this.flag.style.left = this.x * this.width + "px";
    99.                 this.flag.style.top = this.y * this.height + "px";
    101.                 map.canvas.appendChild(this.flag);
    102.             }
    104.             //创建蛇的构造方法
    105.             function Sanke(map){
    106.                 //设置宽、高
    107.                 this.width = map.atom;
    108.                 this.height = map.atom;
    109.                 //默认走的方向
    110.                 this.direction = "right";
    111.                 //设置蛇的主体
    112.                 this.body = [
    113.                     { x:2, y:0 },   //蛇头
    114.                     { x:1, y:0 },   //蛇体
    115.                     { x:0, y:0 },   //蛇尾
    116.                 ];
    118.                 //显示蛇 var i in this.body
    119.                 this.display = function(){
    120.                     for (var i = 0;i < this.body.length; i++){
    121.                         if (this.body[i].x != null){
    122.                             var create_s = document.createElement("div");
    123.                             //将节点保存到一个状态变量当中，以便之后删除
    124.                             this.body[i].flag = create_s;
    126.                             //设置蛇的样式
    127.                             create_s.style.width = this.width + "px";
    128.                             create_s.style.height = this.height + "px";
    129.                             /* create_s.style.border = "2px solid rgb(241, 159, 112)" */
    130.                             create_s.style.backgroundColor = "rgb(107, 109, 221)";
    131.                             create_s.style.borderRadius = "5px";
    133.                             //设置蛇的位置
    134.                             create_s.style.position = "absolute";
    135.                             create_s.style.left = this.body[i].x * this.width + "px";
    136.                             create_s.style.top = this.body[i].y * this.height + "px";
    137.                             //添加到地图中
    138.                             map.canvas.appendChild(create_s);
    139.                         }
    140.                     }
    141.                 }
    142.                 //控制蛇的运动
    143.                 this.run = function(){
    144.                     /*
    145.                         { x:2, y:0 },   //蛇头
    146.                         { x:1, y:0 },   //蛇体
    147.                         { x:0, y:0 },   //蛇尾
    148.                         让x轴的每个位置+1
    149.                     */
    150.                     for (var i = this.body.length-1; i>0; i--) {
    151.                         this.body[i].x = this.body[i-1].x;
    152.                         this.body[i].y = this.body[i-1].y;
    153.                     }
    155.                     //根据方向处理蛇头
    156.                     switch (this.direction) {
    157.                         case "left":this.body[0].x--; break;
    158.                         case "right":this.body[0].x++; break;
    159.                         case "up": this.body[0].y--; break;
    160.                         case "down": this.body[0].y++; break; 
    161.                     }
    163.                     //删除旧的元素
    164.                     for (var i in this.body){
    165.                         if (this.body[i].flag != null){ //当吃到食物，flag等于null，且不能删除
    166.                             map.canvas.removeChild(this.body[i].flag);
    167.                         }
    168.                     }
    169.                     //显示新的元素
    170.                     this.display();
    171.                 }
    173.             }
    175.             //实例化地图类
    176.             var map = new Map(20,40,20);
    177.             map.create();   //创建画布
    179.             //实例化食物类，并创建食物
    180.             var food = new Food(map);
    182.             //实例化蛇类，创建蛇
    183.             var sanke = new Sanke(map);
    184.             //显示蛇
    185.             sanke.display();
    187.             //加入键盘事件，控制蛇的方向
    188.             document.onkeydown = function(event){
    189.                 event = event || window.event;
    190.                 //上：38 右：39 下：40 左：37
    191.                 switch (event.keyCode){
    192.                     case 38:
    193.                         if (sanke.direction != "down"){
    194.                             sanke.direction = "up";
    195.                         }
    196.                         break;
    197.                     case 39:
    198.                         if (sanke.direction != "left"){
    199.                             sanke.direction = "right";
    200.                         }
    201.                         break;
    202.                     case 40:
    203.                         if (sanke.direction != "up"){
    204.                             sanke.direction = "down";
    205.                         }
    206.                         break;
    207.                     case 37:
    208.                         if (sanke.direction != "right"){
    209.                             sanke.direction = "left";
    210.                         }
    211.                         break;
    212.                 }
    213.             }
    215.             //给开始按钮绑定函数
    216.             document.querySelector("#begin").onclick = function(){
    217.                 clearInterval(timer);
    218.                 timer = setInterval(function(){
    219.                     sanke.run();
    220.                 },300);
    221.             }
    223.             document.querySelector("#pause").onclick = function(){
    224.                 clearInterval(timer);
    225.             }
    226.         </script>
    227.     </div>
    229. </body>
    230. </html>