（幻彩）貪吃蛇遊戲設計原始碼
阿新 • • 發佈：2018-12-12
html+css部分
<!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>Document</title> <style> body { background: #000; } #board { margin: 0 auto; width: 300px; text-align: center; } #container { width: 1000px; height: 540px; border: 1px solid #777; margin: 0 auto; background: lightblue; position: relative } .snake { position: absolute; width: 20px; height: 20px; background: greenyellow; } .egg { position: absolute; width: 20px; height: 20px; background: rgba(224, 29, 29, 0.726); } h3 { color: #ccc } </style> </head> <body onload="gameRun()"> <div id="board"> <h3 id="score">SCRAT: 0</h3> </div> <div id="container"> </div> </body> </html> <script src="index.js"></script>
js部分
var isAlive = true; var snakes = []; var egg = null; var isFirst = true; var panel = document.getElementById('container') var scoreBoard = document.getElementById('score') var score = 0; var timer = 0; var DIR = { L: 1, R: 2, U: 3, D: 4 } function snake(top, left, dir) { this.top = top; this.left = left; this.dir = dir } function newEgg(top, left) { this.top = top; this.left = left; } function gameRun() { if (isFirst) { snakes.push(new snake(40, 40, DIR.D)) createEgg(); isFirst = false } sankeRun() display() } function createEgg() { egg = new newEgg( Math.floor(Math.random() * 27) * 20, Math.floor(Math.random() * 45) * 20 ) } document.onkeydown = function(e) { var header = snakes[snakes.length - 1]; switch (e.keyCode) { case 37: if (header.dir != DIR.R) { header.dir = DIR.L } break; case 38: if (header.dir != DIR.D) { header.dir = DIR.U } break; case 39: if (header.dir != DIR.L) { header.dir = DIR.R } break; case 40: if (header.dir != DIR.U) { header.dir = DIR.D } break; default: break; } } function sankeRun() { var header = snakes[snakes.length - 1]; var newHeader = null; switch (header.dir) { case DIR.L: newHeader = new snake(header.top, header.left - 20, header.dir) break; case DIR.R: newHeader = new snake(header.top, header.left + 20, header.dir) break; case DIR.U: newHeader = new snake(header.top - 20, header.left, header.dir) break; case DIR.D: newHeader = new snake(header.top + 20, header.left, header.dir) break; } deathCheck(newHeader) if (isAlive) { snakes.push(newHeader); if (newHeader.top == egg.top && newHeader.left == egg.left) { createEgg(); } else { snakes.shift() } } else { clearInterval(timer) } } function deathCheck(header) { // var header = snakes[snakes.length - 1]; if (header.top < -10 || header.top > 535 || header.left < -10 || header.top > 990) { isAlive = false; return; } for (let i = 0; i < snakes.length; i++) { if (header.top == snakes[i].top && header.left == snakes[i].left) { isAlive = false; return; } } } function display() { var arrColors = ["red", "yellow", "blue", 'blueviolet', 'chartreuse', 'chocolate', 'crimson', 'darkgoldenrod', 'darkslateblue' ] var numColors = parseInt(Math.random() * arrColors.length) if (isAlive) { if (score != snakes.length) { score += 1 score = snakes.length + 1; scoreBoard.innerHTML = 'Score: ' + score; } } else { scoreBoard.style.color = "red"; scoreBoard.innerHTML = "遊戲結束, 你太弱了，才 : " + score; } var fragment = document.createDocumentFragment(); for (let i = 0; i < snakes.length; i++) { var div = document.createElement('div') div.className = 'snake'; div.style.top = snakes[i].top + 'px' div.style.left = snakes[i].left + 'px' div.style.backgroundColor = arrColors[numColors] fragment.appendChild(div) } var ediv = document.createElement('div') ediv.className = 'egg' ediv.style.backgroundColor = arrColors[numColors] ediv.style.top = egg.top + 'px'; ediv.style.left = egg.left + 'px' fragment.appendChild(ediv) panel.innerHTML = '' panel.appendChild(fragment) } // gameRun() timer = setInterval(gameRun, 100)