diff --git a/snake/button.png b/snake/button.png
new file mode 100644
index 0000000..e647dab
Binary files /dev/null and b/snake/button.png differ
diff --git a/snake/snake.html b/snake/snake.html
new file mode 100644
index 0000000..e26f9eb
--- /dev/null
+++ b/snake/snake.html
@@ -0,0 +1,374 @@
+<!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>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+  <script>
+
+    (function () {
+      // 定义地图构造函数
+      function Map(type, width, height) {
+        this.width = width || document.body.clientWidth
+        this.height = height || window.innerHeight
+        this.ele = document.createElement('div')
+        this.type = type || 1
+      }
+      Map.prototype.init = function () {
+        console.log('1111')
+        document.body.innerHTML = ""
+        this.ele.style.height = this.height + 'px'
+        this.ele.style.width = this.width + 'px'
+        this.ele.style.position = 'relative'
+        switch (this.type) {
+          case 1: this.ele.style.background = '#839d80'; break
+          case 2: this.ele.style.background = 'black'; break
+          case 3: this.ele.style.background = 'black'; break
+        }
+        document.body.appendChild(this.ele)
+      }
+      window.Map = Map
+    }());
+
+    (function () {
+      //定义小蛇
+      function Snake(map, time, type, width, height) {
+        this.width = width || 20
+        this.height = height || 20
+        this.seat = [2, 1, 0]
+        this.body = []
+        this.color = []
+        this.direction = 1
+        this.x_unit = ~~(map.width / this.width)
+        this.y_unit = ~~(map.height / this.height)
+        this.parent = map.ele
+        this.timer = null
+        this.time = time || 200
+        this.type = type || 1
+      }
+      Snake.prototype.init = function (food, utils) {
+        for (let i in this.seat) {
+          let color
+          switch (this.type) {
+            case 1: color = color = '#141a18'; break
+            case 2: color = utils.color16(); break
+            case 3: color = utils.color16(); break
+          }
+          let ele = utils.createEle(this, this.seat[i], color, this.type)
+          utils.addEle(ele, this.parent)
+          this.body.push(ele)
+          this.color.push(color)
+          food.init(this.seat, utils)
+        }
+        document.onkeydown = function (evt) {
+          this.direction = this.seat[1] - this.seat[0] == (n = [-1, -this.x_unit, 1, this.x_unit][(evt || event).keyCode - 37] || this.direction) ? this.direction : n;
+        }.bind(this)
+      }
+      Snake.prototype.run = function (food, utils) {
+        this.timer = setInterval(function () {
+          this.seat.unshift(new_seat = this.seat[0] + this.direction)
+          if (this.seat.indexOf(new_seat, 1) > 0 || new_seat < 0 || new_seat > this.y_unit * this.x_unit || this.direction == 1 && new_seat % this.x_unit == 0 || this.direction == -1 && new_seat % this.x_unit == this.x_unit - 1) {
+            clearInterval(this.timer)
+            alert('Game Over')
+            let home_page = new HomePage()
+            home_page.init()
+            return
+          }
+          for (let i in this.body) {
+            utils.delEle(this.body[i])
+          }
+          this.body = []
+          if (new_seat !== food.seat)
+            // 没吃到食物
+            this.seat.pop()
+          else {
+            // 吃到食物
+            switch (this.type) {
+              case 1: this.color.push('#141a18'); break
+              case 2: this.color.push(utils.color16()); break
+              case 3: this.color.push(utils.color16()); break
+            }
+            food.init(this.seat, utils)
+          }
+          for (let i in this.seat) {
+            let ele = utils.createEle(this, this.seat[i], this.color[i], this.type)
+            utils.addEle(ele, this.parent)
+            this.body.push(ele)
+          }
+        }.bind(this), this.time)
+      }
+      window.Snake = Snake
+    }());
+
+    // 食物------------------------------------------
+    (function () {
+      function Food(map, type, width, height) {
+        this.seat = null
+        this.ele = null
+        this.width = width || 20
+        this.height = height || 20
+        this.x_unit = ~~(map.width / this.width)
+        this.y_unit = ~~(map.height / this.height)
+        this.parent = map.ele
+        this.type = type || 1
+      }
+      Food.prototype.init = function (seat, utils) {
+        if (this.ele) utils.delEle(this.ele)
+        do
+          this.seat = ~~(Math.random() * this.y_unit * this.x_unit)
+        while (seat.indexOf(this.seat) !== -1)
+        switch (this.type) {
+          case 1: this.ele = utils.createEle(this, this.seat, '#141a18', this.type); break
+          case 2: this.ele = utils.createEle(this, this.seat, 'red', this.type); break
+          case 3: this.ele = utils.createEle(this, this.seat, 'red', this.type); break
+        }
+        utils.addEle(this.ele, this.parent)
+      }
+      window.Food = Food
+    }());
+
+    // 工具函数 --------------------------------------
+    (function () {
+      function Utils() { }
+      // 创建16进制随机颜色
+      Utils.prototype.color16 = () => {
+        let r = ~~(Math.random() * 70 + 186);
+        let g = ~~(Math.random() * 70 + 186);
+        let b = ~~(Math.random() * 70 + 186);
+        let color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
+        return color;
+      }
+      // 创建身体对象
+      Utils.prototype.createEle = function (that, seat, color, type) {
+        let ele = document.createElement('div')
+        // 设置ele
+        ele.style.width = that.width - 2 + 'px'
+        ele.style.height = that.height - 2 + 'px'
+        ele.style.margin = '1px'
+        ele.style.position = 'absolute'
+        ele.style.left = seat % that.x_unit * that.width + 'px'
+        ele.style.top = ~~(seat / that.x_unit) * that.height + 'px'
+        switch (type) {
+          case 1: {
+            // 镂空
+            ele.style.boxSizing = 'border-box'
+            ele.style.border = `1px ${color} solid`
+            // inner放进镂空块
+            let inner = document.createElement('div')
+            inner.style.height = that.height - 8 + 'px'
+            inner.style.width = that.width - 8 + 'px'
+            inner.style.background = color
+            inner.style.margin = '2px'
+            ele.appendChild(inner)
+            break
+          }
+          case 2: {
+            // 镂空
+            ele.style.boxSizing = 'border-box'
+            ele.style.border = `1px ${color} solid`
+            // inner放进镂空块
+            let inner = document.createElement('div')
+            inner.style.height = that.height - 8 + 'px'
+            inner.style.width = that.width - 8 + 'px'
+            inner.style.background = color
+            inner.style.margin = '2px'
+            ele.appendChild(inner)
+            break
+          }
+          case 3: {
+            ele.style.background = color
+          }
+        }
+        return ele
+      }
+      // 添加对象
+      Utils.prototype.addEle = function (inner, parent) {
+        parent.appendChild(inner)
+      }
+      // 删除对象
+      Utils.prototype.delEle = function (inner) {
+        inner.parentNode.removeChild(inner)
+      }
+      // 判断是不是手机
+      Utils.prototype.isM = function () {
+        let userAgentInfo = navigator.userAgent;
+        let Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
+        let flag = false;
+        for (let v = 0; v < Agents.length; v++) {
+          if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = true; break; }
+        }
+        return flag
+      }
+      window.Utils = Utils
+    }());
+
+    // 手机摇杆-------------------------------------
+    (function () {
+      function Bar(map) {
+        this.ele = document.createElement('div')
+        this.parent = map.ele
+      }
+      Bar.prototype.init = function (utils, snake) {
+        let top = document.createElement('div')
+        let bottom = document.createElement('div')
+        let left = document.createElement('div')
+        let right = document.createElement('div')
+        let width = ~~(this.parent.offsetWidth * 0.4)
+        this.ele.style.width = width + 'px'
+        this.ele.style.height = width + 'px'
+        this.ele.style.position = 'absolute'
+        this.ele.style.bottom = '20px'
+        this.ele.style.left = '50%'
+        this.ele.style.marginLeft = `-${~~(width / 2)}px`
+        this.ele.style.background = "url('https://lacus.site/snake/button.png')"
+        this.ele.style.backgroundSize = '100% 100%'
+        this.ele.style.overflow = 'hidden'
+        this.ele.style.borderRadius = '50%'
+        this.ele.style.opacity = '0.5'
+        let s_width = ~~(width / Math.SQRT2);
+        [top.style.width, top.style.height, bottom.style.width, bottom.style.height, left.style.width, left.style.height, right.style.width, right.style.height] = Array.from({ length: 8 }, () => s_width + 'px');
+        [top.style.position, bottom.style.position, left.style.position, right.style.position] = Array.from({ length: 4 }, () => 'absolute');
+        [top.style.transform, bottom.style.transform, left.style.transform, right.style.transform] = Array.from({ length: 4 }, () => 'rotate(45deg)');
+        [top.style.top, bottom.style.bottom, left.style.left, right.style.right] = Array.from({ length: 4 }, () => `-${~~(s_width / 2)}px`);
+        [top.style.left, bottom.style.left, left.style.top, right.style.top] = Array.from({ length: 4 }, () => `${~~((width - s_width) / 2)}px`);
+        top.onclick = () => {
+          snake.direction = snake.seat[1] - snake.seat[0] == -snake.x_unit ? snake.direction : -snake.x_unit;
+        }
+        bottom.onclick = () => {
+          snake.direction = snake.seat[1] - snake.seat[0] == snake.x_unit ? snake.direction : snake.x_unit;
+        }
+        left.onclick = () => {
+          snake.direction = snake.seat[1] - snake.seat[0] == -1 ? snake.direction : -1;
+        }
+        right.onclick = () => {
+          snake.direction = snake.seat[1] - snake.seat[0] == 1 ? snake.direction : 1;
+        }
+        utils.addEle(top, this.ele)
+        utils.addEle(left, this.ele)
+        utils.addEle(right, this.ele)
+        utils.addEle(bottom, this.ele)
+        utils.addEle(this.ele, this.parent)
+      }
+      window.Bar = Bar
+    }());
+
+    // 首页 ------------------------------------- 
+    (function () {
+      function HomePage(type, time) {
+        this.type = type || ~~(Math.random()*3+1)
+        this.time = time || ~~(Math.random()*300+200)
+        this.seat = []
+      }
+      HomePage.prototype.init = function () {
+        let utils = new Utils()
+        if (utils.isM() == true) {
+          let map = new Map(this.type)
+          map.init()
+          let snake = new Snake(map, this.time, this.type)
+          let food = new Food(map, this.type)
+          snake.init(food, utils)
+          if (utils.isM() == true) {
+            let bar = new Bar(map)
+            bar.init(utils, snake)
+          }
+          snake.run(food, utils)
+          return
+        }
+        let map = new Map(this.type)
+        map.init()
+        let snake = new Snake(map, this.time, this.type)
+        let x_unit = snake.x_unit
+        let s = [2, 3, 4, 1 + x_unit, 1 + x_unit * 2, 2 + x_unit * 3, 3 + x_unit * 3, 4 + x_unit * 4, 4 + x_unit * 5, 3 + x_unit * 6, 2 + x_unit * 6, 1 + x_unit * 6]
+        let n = [6, 6 + x_unit, 6 + x_unit * 2, 6 + x_unit * 3, 6 + x_unit * 4, 6 + x_unit * 5, 6 + x_unit * 6, 7 + x_unit, 8 + x_unit * 2, 9, 9 + x_unit, 9 + x_unit * 2, 9 + x_unit * 3, 9 + x_unit * 4, 9 + x_unit * 5, 9 + x_unit * 6]
+        let a = [11 + x_unit, 11 + x_unit * 2, 11 + x_unit * 3, 11 + x_unit * 4, 11 + x_unit * 5, 11 + x_unit * 6, 12, 12 + x_unit * 3, 13, 13 + x_unit * 3, 14 + x_unit, 14 + x_unit * 2, 14 + x_unit * 3, 14 + x_unit * 4, 14 + x_unit * 5, 14 + x_unit * 6]
+        let k = [16, 16 + x_unit, 16 + x_unit * 2, 16 + x_unit * 3, 16 + x_unit * 4, 16 + x_unit * 5, 16 + x_unit * 6, 17 + x_unit * 2, 17 + x_unit * 4, 18 + x_unit * 1, 18 + x_unit * 5, 19, 19 + x_unit * 6]
+        let e = [21 + x_unit, 21 + x_unit * 2, 21 + x_unit * 3, 21 + x_unit * 4, 21 + x_unit * 5, 22, 23, 24, 22 + x_unit * 3, 23 + x_unit * 3, 24 + x_unit * 3, 22 + x_unit * 6, 23 + x_unit * 6, 24 + x_unit * 6]
+        let arr = s.concat(n, a, k, e)
+        for (let i in arr) {
+          let color
+          switch (this.type) {
+            case 1: color = color = '#141a18'; break
+            case 2: color = utils.color16(); break
+            case 3: color = utils.color16(); break
+          }
+          let ele = utils.createEle(snake, arr[i], color, this.type)
+          utils.addEle(ele, map.ele)
+        }
+        let start = createStart(utils, map, snake, this.type)
+        start.onclick = function () {
+          let map = new Map(this.type)
+          map.init()
+          let snake = new Snake(map, this.time, this.type)
+          let food = new Food(map, this.type)
+          snake.init(food, utils)
+          if (utils.isM() == true) {
+            let bar = new Bar(map)
+            bar.init(utils, snake)
+          }
+          snake.run(food, utils)
+        }.bind(this)
+      }
+      let createStart = (utils, map, snake, type) => {
+        let start = document.createElement('div')
+        start.innerText = '开始游戏'
+        start.style.width = snake.width * 4 + 'px'
+        start.style.height = snake.height + 'px'
+        start.style.textAlign = 'center'
+        start.style.lineHeight = snake.height + 'px'
+        start.style.position = 'absolute'
+        let seat = 1 + snake.x_unit * 10
+        start.style.left = seat % snake.x_unit * snake.width + 'px'
+        start.style.top = ~~(seat / snake.x_unit) * snake.height + 'px'
+        start.style.boxSizing = 'border-box'
+        let color
+        if (type == 1) {
+          color = '#141a18'
+        }
+        else {
+          color = utils.color16()
+        }
+        start.style.border = `1px ${color} solid`
+        start.style.color = `${color}`
+        utils.addEle(start, map.ele)
+        return start
+      }
+      window.HomePage = HomePage
+    }());
+
+
+    window.onload = () => {
+      let home_page = new HomePage()
+      home_page.init()
+      // let utils = new Utils()
+      // // function Map(width, height) 
+      // let map = new Map(2)
+      // map.init()
+      // // function Snake(map, time, width, height)
+      // let snake = new Snake(map, 200,2)
+      // // function Food(map, width, height)
+      // let food = new Food(map,2)
+      // snake.init(food, utils)
+      // if(utils.isM() == true) {
+      //   let bar = new Bar(map)
+      //   bar.init(utils,snake)
+      // }
+      // snake.run(food, utils)
+
+    }
+
+  </script>
+</head>
+
+<body>
+
+</body>
+
+</html>
\ No newline at end of file
