手写简单的贪吃蛇

发表于 | 更新于

手写简单的贪吃蛇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html>
<head lang='en'>
  <meta charset='UTF-8'>
  <meta name='viewport'
        content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title></title>
  <style>
    *{margin:0;padding:0}
    li{list-style:none}
    body,html{height:90%;width:100%;background:#eee;}
    #end{position:absolute;width:100%;height:100%;background:#f00;text-align:center;line-height:400px;font-size:80px;opacity:0.5;filter:alpha(opacity = 50);top:-1000px;transition:all 1s;color:#000;}
    #container{width:80%;max-width:800px;height:70%;margin:70px auto;background:#fff;position:relative;border-radius:10px;box-shadow:3px 3px 3px 0 #069;overflow:hidden;}
    li,#head{height:30px;width:30px;position:absolute;top:0;}
    li{background:#000;left:-30px;}
    #head{border-radius:10px;background:#f00;left:-30px;}
    #box{width:40%;margin:0 auto;}
    button{display:block;margin:5px 30px;float:right;padding:5px 10px}
    #box div{line-height:30px;font-size:16px;float:left;}
    #box span{display:block;width:400px;color:#f00;font-size:20px;}
    #playGame{background:#069;color:#fff;}
  </style>
</head>
<body>
<div id='container'>
  <span id='end'>Game Over</span>
  <ul id='snake'>
    <li class='food'></li>
    <li class='food'></li>
    <li class='food'></li>
  </ul>
  <div id='head'></div>
</div>
<div id='box'>
  <button id='playGame'>开始游戏</button>
  <div>
    <span id='show'></span>
  </div>
</div>

<script>
  //获取标签
  var _con = document.getElementById('container');
  var _head = document.getElementById('head');
  var _lis = document.getElementsByClassName('food');
  var show = document.getElementById('show');
  var snake = document.getElementById('snake');
  var _end = document.getElementById('end');
  var _palyGame = document.getElementById('playGame');
  var sore = 0;
  flag = true;
  //出现食物
  var _li = document.createElement('li');
  snake.appendChild(_li);
  //调用函数开始游戏
  playGame.onclick = function(){
    if(flag == false){return}
    //重置样式
    _palyGame.style.background = '#ccc';
    _end.style.top = -_end.offsetHeight + 'px';
    _head.style.top = 0;
    _head.style.left = 0;
    for(var k = _lis.length - 1;k >= 0;k--){
      _lis[k].style.top = 0;
      _lis[k].style.left = -_lis[0].offsetWidth + 'px';
      if(_lis.length >3){
        snake.removeChild(snake.lastChild)
      }
    }
    flag = false;
    startGame();
  };
  //游戏函数
  function startGame(){
    var foodpos = foodShow();
    _li.style.left = foodpos.x + 'px';
    _li.style.top = foodpos.y + 'px';
    var _speedx = _head.offsetWidth;
    var _speedy = 0;
    var timer = setInterval(function(){
      //蛇身跟随
      for(var i = _lis.length - 1;i > 0;i--){
        _lis[i].style.left = _lis[i - 1].style.left;
        _lis[i].style.top = _lis[i - 1].style.top;
      }
      _lis[0].style.left = _head.style.left;
      _lis[0].style.top = _head.style.top;
      //蛇头运动
      _head.style.left = _head.offsetLeft + _speedx + 'px';
      _head.style.top = _head.offsetTop + _speedy + 'px';
      document.onkeyup = function(e){
        e = e || window.event;
        if(e.keyCode == 37){
          _speedx = -_head.offsetWidth;
          _speedy = 0;
        }
        if(e.keyCode == 38){
          _speedx = 0;
          _speedy = -_head.offsetHeight;
        }
        if(e.keyCode == 39){
          _speedx = _head.offsetWidth;
          _speedy = 0;
        }
        if(e.keyCode == 40){
          _speedx = 0;
          _speedy = _head.offsetHeight;
        }
      };
      //判断边界
      //四周墙壁
      if(_head.offsetLeft < 0 || _head.offsetLeft + _head.offsetWidth > _con.offsetWidth || _head.offsetTop
        < 0 || _head.offsetTop + _head.offsetHeight > _con.offsetHeight){
        clearInterval(timer);
        show.textContent = '碰壁结束游戏！你的成绩：' + sore;
        _end.style.top = 0;
        _palyGame.style.background = '#069';
        flag = true;
      }
      //自身
      for(var i = _lis.length-1;i >= 0;i--){
        if(_lis[i].offsetLeft == _head.offsetLeft && _lis[i].offsetTop == _head.offsetTop){
          clearInterval(timer);
          show.textContent = '小蛇咬到了自己结束游戏！你的成绩：' + sore;
          _end.style.top = 0;
          _palyGame.style.background = '#069';
          flag = true;
        }
      }
      //蛇吃食物
      if(_li.offsetLeft == _head.offsetLeft && _li.offsetTop == _head.offsetTop){
        //增加一个class名字为food的li
        var _addli = document.createElement('li');
        snake.appendChild(_addli);
        _addli.className = 'food';
        //重新刷新位置
        foodpos = foodShow();
        _li.style.left = foodpos.x + 'px';
        _li.style.top = foodpos.y + 'px';
        //判断重新刷新
        shuaxin();
        function shuaxin(){
          for(var j = _lis.length-1;j >= 0;j--){
            if(_lis[j].offsetLeft == _li.offsetLeft && _lis[j].offsetTop == _li.offsetTop){
              console.log(_li.offsetLeft + '---')
              foodpos = foodShow();
              _li.style.left = foodpos.x + 'px';
              _li.style.top = foodpos.y + 'px';
              console.log(_li.style.left)
              shuaxin()
            }
          }
        }
        sore++;
        show.textContent = '你的成绩：' + sore;
        //蛇身随机颜色
        for(var i = _lis.length - 1;i > 0;i--){
          var n1 = parseInt(Math.random() * 255);
          var n2 = parseInt(Math.random() * 255);
          var n3 = parseInt(Math.random() * 255);
          var n4 = 1 - (Math.random() / 2);
          _lis[i].style.background = 'rgba(' + n1 + ',' + n2 + ',' + n3 + ',' + n4 +')';
        }
      }
    },500);
  };
  //随机出现食物的位置
  function foodShow(){
    var _col = Math.floor(_con.offsetWidth / _head.offsetWidth);
    var _row = Math.floor(_con.offsetHeight / _head.offsetWidth);
    var _x = parseInt(Math.random() * _col) * _head.offsetWidth;
    var _y = parseInt(Math.random() * _row) * _head.offsetHeight;
    return{x:_x,y:_y};
  }
</script>
</body>
</html>