使用Javascript做貪吃蛇小游戲,
1.自定義地圖寬高,蛇的初始速度
2.食物隨機出現
3.蛇的樣式屬性
4.貪吃蛇玩法(吃食物,碰到邊界,吃食物后加速,計分,)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0; margin: 0; } </style> </head> <body> <input type="text" id="fen" value="0" disabled> <script type="text/javascript"> var kuang = parseInt(prompt("請輸入地圖寬度")); var gao = parseInt(prompt("請輸入地圖高度")); var sudu = parseInt(prompt("請輸入蛇的速度(越大越慢)")); //創建地圖 function Map(){ //屬性 this.width = kuang; this.height = gao; this.backgroundColor = 'gray'; this.ditu = null; //方法 if (!Map.prototype.show) { Map.prototype.show = function(){ //創建div var div = document.createElement('div'); //設置樣式 div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.backgroundColor = this.backgroundColor; //顯示在頁面 document.body.appendChild(div); //將地圖div 保存到地圖對象的屬性上 this.ditu = div; } } } var map = new Map(); map.show(); //創建食物 function Food(map){ //屬性 this.width = 20; this.height = 20; this.backgroundColor = 'yellow'; this.x = 0; this.y = 0; this.position = 'absolute'; this.borderRadius = '50%'; this.shiwu = null; //方法 if(!Food.prototype.show){ Food.prototype.show = function(){ //判斷，顯示，刷新 if(!this.shiwu){ //創建div var div = document.createElement('div'); div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.backgroundColor = this.backgroundColor; div.style.borderRadius = this.borderRadius; div.style.position = this.position; //顯示到界面 map.ditu.appendChild(div); this.shiwu = div; } //位置 //橫/縱坐標 = 0~30隨機數 * 地圖寬/食物寬（食物寬20） this.x = Math.floor(Math.random() * (map.width / this.width)); this.y = Math.floor(Math.random() * (map.height / this.height)); //根據坐標，顯示食物位置 this.shiwu.style.left = this.x * this.width + 'px'; this.shiwu.style.top = this.y * this.height + 'px'; } } } //輸出 var food = new Food(map); food.show(); //創建蛇 function Snake(){ //屬性 this.width = 20; this.height = 20; this.position = 'absolute'; this.direction = 'right'; this.borderRadius = '50%'; //是否可以改變方向 this.canChange = false; //身體 //[[x, y, 顏色, div]] this.body = [[5, 5, 'red', null], [4, 5, 'blue', null], [3, 5, 'blue', null]]; //方法 //判斷，顯示，移動 if(!Snake.prototype.show){ Snake.prototype.show = function(){ //創建每節身體div for (var i = 0; i < this.body.length; i++) { //每節身體,判斷是否創建過 if (!this.body[i][3]) { //公共樣式 var div =document.createElement('div'); div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.position = this.position; //顯示 map.ditu.appendChild(div); this.body[i][3] = div; } //不同樣式 this.body[i][3].style.backgroundColor = this.body[i][2]; this.body[i][3].style.left = this.body[i][0] * this.width + 'px'; this.body[i][3].style.top = this.body[i][1] * this.height+ 'px'; this.body[i][3].style.borderRadius = '5px'; this.body[0][3].style.borderRadius = this.borderRadius; } //顯示完成，可以修改方向 this.canChange = true; } //移動 //最后一節坐標變成前一節坐標 Snake.prototype.move = function(){ //循環,修改每節坐標 for (var i = this.body.length - 1; i > 0; i--) { //x = x-1 y = y-1 this.body[i][0] = this.body[i-1][0]; this.body[i][1] = this.body[i-1][1]; } //蛇頭控制方向 if (this.direction == 'right') { //x + 1 this.body[0][0] += 1; }else if(this.direction == 'left') { //x - 1 this.body[0][0] -= 1; }else if(this.direction == 'up') { //y - 1 this.body[0][1] -= 1; }else if(this.direction == 'down') { //y + 1 this.body[0][1] += 1; } //判斷邊界 if (this.body[0][0] < 0 || this.body[0][0] > (map.width / this.width) - 1 || this.body[0][1] < 0 || this.body[0][1] > (map.height / this.height) - 1) { //游戲結束 clearInterval(timer); alert('游戲結束'); return; } //判斷 蛇頭和其他身體坐標重合 for (var i = 1; i < this.body.length; i++) { if (this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]) { //重合，停止 clearInterval(timer); alert('游戲結束'); return; } } //重新顯示 this.show(); //判斷 是否吃到食物 蛇頭坐標和食物坐標一樣 if (this.body[0][0] == food.x && this.body[0][1] == food.y) { //分數 var score = document.getElementById('fen'); var sc = parseInt(score.value)+1; score.value = sc; //吃到 this.body加長一節 this.body[this.body.length] = [0, 0, 'blue', null]; //食物刷新 food.show(); //吃到食物，加速 if(t>150){ t -= 10; setTimer(); } } } } } //輸出蛇 var snake = new Snake; snake.show(); //綁定鍵盤 window.onkeyup = function(e){ var evt = e || window.event; if (!snake.canChange) { return; } //左 37 上 38 右 39 下 40 if (e.keyCode == 37 && snake.direction != 'right') { snake.direction = 'left' }else if(e.keyCode == 38 && snake.direction != 'down') { snake.direction = 'up' }else if(e.keyCode == 39 && snake.direction != 'left') { snake.direction = 'right' }else if(e.keyCode == 40 && snake.direction != 'up') { snake.direction = 'down' } snake.canChange =false; }; //定時器 自動移動 var t = sudu; var timer; function setTimer(){ //先停止 clearInterval(timer); //重新設置 timer = setInterval(function(){ snake.move(); }, t); } setTimer(); </script> </body> </html>