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.         }
    28.     </style>
    29. </head>
    30. <body>
    31.     <div id="main">
    32.         <input class="btn" type="button" value="开始游戏" id="begin"/>
    33.         <input class="btn" type="button" value="暂停游戏" id="pause"/>
    35.         <script>
    36.             var timer; //变量可以提升
    37.             var showCanvas = true;  //是否显示格子
    39.             /*设置地图的构造方法：
    40.             atom为原子初始化的宽高(应该一致)
    41.             xnum为地图x轴应该有多少个原子(横向)
    42.             ynum为地图y轴应该有多少个原子(纵向)
    43.             */
    44.             function Map(atom,xnum,ynum){
    45.                 this.atom = atom;
    46.                 this.xnum = xnum;
    47.                 this.ynum = ynum;
    49.                 this.canvas = null; //初始化画布
    50.                 this.create = function(){
    51.                     this.canvas = document.createElement("div");
    52.                     this.canvas.className = "canvas";
    53.                     this.canvas.style.width = this.atom * this.xnum + "px"; //画布的宽
    54.                     this.canvas.style.height = this.atom * this.ynum + "px"; //画布的高
    55.                     main.appendChild(this.canvas);
    57.                     if (showCanvas){
    58.                         for (var i = 0;i<xnum;i++){
    59.                             for (var j = 0;j<ynum;j++){
    60.                                 //定义格子的样式
    61.                                 var lattice = document.createElement("div");
    62.                                 lattice.style.border = "1px solid rgb(107, 221, 178)";
    63.                                 lattice.style.width = this.atom + "px";
    64.                                 lattice.style.height = this.atom + "px";
    66.                                 //添加格子到地图中
    67.                                 this.canvas.appendChild(lattice);
    68.                                 lattice.style.position = "absolute";
    69.                                 //利用绝对定位
    70.                                 lattice.style.left = i * this.atom + "px";
    71.                                 lattice.style.top = j * this.atom + "px";
    72.                             }
    73.                         }
    74.                     }
    75.                 }
    76.             }
    78.             //实例化地图类
    79.             var map = new Map(20,40,20);
    80.             map.create();
    81.             //给开始按钮绑定函数
    82.             document.querySelector("#begin").onclick = function(){
    83.                 clearInterval(timer);
    84.                 timer = setInterval(function(){
    86.                 },300);
    87.             }
    89.             document.querySelector("#pause").onclick = function(){
    90.                 clearInterval(timer);
    91.             }
    92.         </script>
    93.     </div>
    95. </body>
    96. </html>