貪吃蛇原始碼
阿新 • • 發佈:2018-11-07
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>貪吃蛇</title> <style type="text/css"> .map{ width: 800px; height: 600px; margin: 0 auto; background: #ccc; position: relative; } .map>div{ border-radius: 40%; } </style> </head> <body> <div class="map"></div> <script type="text/javascript"> var map = document.querySelector('.map'); var mapWidth = map.clientWidth; var mapHight = map.clientHeight; var body = []; var snakeBox = []; var timer = null; //建構函式 function Game() { //小方塊 this.width = 20; this.height = 20; this.color = 'blue'; this.x = 0; this.y = 0; this.speed = 20; this.box = document.createElement('div'); //蛇 this.direction = 'right'; this.body = [ {x:3,y:2,color:'red'},//蛇頭 {x:2,y:2,color:'orange'},//蛇的身體 {x:1,y:2,color:'orange'},//蛇的身體 ] } //原型方法 Game.prototype = { //呼叫 init: function () { this.food(); this.snake(); this.snakeMove(); this.keydown(); }, //隨機小方塊 food: function (x,y) { var div = this.box; console.log(div); div.style.position = 'absolute'; div.style.width = this.width+'px'; div.style.height = this.height+'px'; div.style.backgroundColor = this.color; //把小方塊新增在map地圖中了 map.appendChild(div); //隨機產生橫縱座標 var x = Math.floor(Math.random()*mapWidth/this.width)*this.width; var y = Math.floor(Math.random()*mapHight/this.height)*this.height; this.x = x; this.y = y; div.style.left = this.x+'px'; div.style.top = this.y+'px'; }, //建立小蛇 snake:function(){ for (var i = 0; i < this.body.length; i++) { var obj = this.body[i]; var div = document.createElement('div'); map.appendChild(div); div.style.position = 'absolute'; div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.left = this.width*obj.x + 'px'; div.style.top = this.height*obj.y + 'px'; div.style.backgroundColor = obj.color; snakeBox.push(div); console.log(snakeBox); } }, snakeMove:function () { clearInterval(timer); timer = setInterval(()=>{ for(var i = snakeBox.length - 1; i > 0 ; i--) { snakeBox[i].style.left = snakeBox[i - 1].style.left; snakeBox[i].style.top = snakeBox[i - 1].style.top; } //設定小蛇的頭部 switch(this.direction){ case 'right': snakeBox[0].style.left = parseInt(snakeBox[0].style.left) + this.speed + 'px'; break; case 'left': snakeBox[0].style.left = parseInt(snakeBox[0].style.left) - this.speed + 'px'; break; case 'top': snakeBox[0].style.top = parseInt(snakeBox[0].style.top) - this.speed + 'px'; break; case 'bottom': snakeBox[0].style.top = parseInt(snakeBox[0].style.top) + this.speed + 'px'; break; } if(parseInt(snakeBox[0].style.left) == this.x && parseInt(snakeBox[0].style.top) == this.y){ var div = document.createElement('div'); map.appendChild(div); div.style.position = 'absolute'; div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; var lastLeft = parseInt(snakeBox[snakeBox.length - 1].style.left) + 'px'; var lastTop = parseInt(snakeBox[snakeBox.length - 1].style.top) + 'px'; div.style.top = lastTop; div.style.left = lastLeft; div.style.backgroundColor = 'orange'; snakeBox.push(div); this.food(); } var left = parseInt(snakeBox[0].style.left); var top = parseInt(snakeBox[0].style.top); if (left < 0 || left > parseInt(mapWidth) || top < 0 || top > parseInt(mapHight)) { alert('遊戲結束,重新開始'); window.location.reload(); } },200) }, keydown:function(){ document.addEventListener('keydown',function(e){ //console.log(e.keyCode) switch (event.keyCode){ case 37: this.direction = 'left'; break; case 38: this.direction = 'top'; break; case 39: this.direction = 'right'; break; case 40: this.direction = 'bottom'; break; } this.snakeMove(); }.bind(this)) }, } //例項物件 var game = new Game(); game.init(); </script> </body> </html>