用面向对象写的贪吃蛇

下面展示一些 内联代码片。

1.第一种方法是用循环进行的蛇的移动
2.第二种是掐头去尾的方式进行移动的错节，用的是链表的方式实现

// html
<div id="a"></div>
css
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
  #a {
   border: 1px solid red;
   width: 400px;
   height: 400px;
  }
  div {
   border: 1px solid black;
  }

// An highlighted block
 var width = 20,
   height = 20,
   arr = [],
   time = null
  //构造蛇初始化属性
  function sinit(x, y, color) {
   this.x = x
   this.y = y
   this.color = color
   this.next = null;
   this.last = null;
   this.head = null;
   this.wei = null;
   this.xx = null
   this.yy = null
   this.fodd = null
   this.fangxiang = {
    left: {
     x: -1,
     y: 0
    },
    right: {
     x: +1,
     y: 0
    },
    top: {
     x: 0,
     y: -1
    },
    bottom: {
     x: 0,
     y: +1
    }
   }
  }
  sinit.prototype.gouzao = function() {
   this.div = document.createElement("div");
   this.div.style.width = width + 'px';
   this.div.style.height = height + 'px';
   this.div.style.backgroundColor = this.color;
   this.div.style.position = "absolute"
   this.left = this.x * width;
   this.top = this.y * height;
   this.div.style.left = this.left + 'px'
   this.div.style.top = this.top + 'px'
   this.main = document.querySelector("#a")
   this.main.appendChild(this.div)
  }
  sinit.prototype.deletes = function() {
   this.main.removeChild(this.div)
  }
  //初始化
  sinit.prototype.init = function() {
   var a = new sinit(2, 0, 'red')
   this.head = a
   a.gouzao()
   arr.push([2, 0]);
   var b = new sinit(1, 0, 'green')
   b.gouzao()
   arr.push([1, 0]);
   var c = new sinit(0, 0, 'green')
   this.wei = c
   c.gouzao()
   arr.push([0, 0]);
   a.last = null
   a.next = b
   b.last = a
   b.next = c
   c.last = b
   c.next = null
   this.moren = this.fangxiang.right
  }
  var ff = false
  var bool = true
  sinit.prototype.zou = function() {
   this.arrs = [
    this.head.x + this.moren.x,
    this.head.y + this.moren.y
   ];
   console.log(this.arrs[1])
   //撞墙 
   if (this.arrs[0] >= 19 || this.arrs[1] >= 19 || this.arrs[0] <= 0 || this.arrs[1] < 0) {
    clearInterval(time)
   }
   //运动
   this.yunxing.yx.call(this);
   if (bool) {
    this.yunxing.each.call(this);
    bool = false
   }
   //吃长大
   if (this.arrs[0] == this.xx && this.arrs[1] == this.yy) {
    bool = true
    this.fodd.deletes()
    ff = true
   } else {
    ff = false
   }
  };
  sinit.prototype.yunxing = {
   yx: function() {
    var newbody = new sinit(this.head.x, this.head.y, 'red')
    newbody.next = this.head.next
    newbody.next.last = newbody
    newbody.last = null
    this.head.deletes();
    newbody.gouzao();
    var newhead = new sinit(this.head.x + this.moren.x, this.head.y + this.moren.y, 'green')
    this.head = newhead
    newhead.last = null
    newhead.next = newbody
    newbody.last = newhead
    newhead.gouzao();
    arr.unshift([this.head.x + this.moren.x, this.head.y + this.moren.y])
    if (!ff) {
     this.wei.deletes();
     this.wei = this.wei.last
     arr.pop()
    }
   },
   each: function() {
    this.xx = ((Math.ceil(Math.random() * 19)).toString());
    this.yy = ((Math.ceil(Math.random() * 19)).toString());
    var ss = new sinit(this.xx, this.yy, 'red');
    this.fodd=ss
    ss.gouzao();
   }
  }
  var ss = new sinit()
  ss.init();
  window.addEventListener("keyup", function(e) {
   console.log(e.keyCode)
   //下40，左37，上38，右39
   if (e.keyCode == 39 && ss.moren != ss.fangxiang.left) {
    ss.moren = ss.fangxiang.right
   } else if (e.keyCode == 40 && ss.moren != ss.fangxiang.top) {
    ss.moren = ss.fangxiang.bottom
   } else if (e.keyCode == 37 && ss.moren != ss.fangxiang.right) {
    ss.moren = ss.fangxiang.left
   } else if (e.keyCode == 38 && ss.moren != ss.fangxiang.bottom) {
    ss.moren = ss.fangxiang.top
   }
  })
  time = setInterval(function() {
   ss.zou()
  }, 150)