效果图：（抱歉，由于本人能力有限，只能暂时放静态图。后期会把动态图更新上去）
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #map { width: 500px; height:500px; position:relative; background: #ccc; } </style></head><body><div id="map"></div><script src="Food.js"></script><script src="Snake.js"></script><script src="Game.js"></script><script> var map = document.getElementById("map"); var game = new Game(map); game.init();</script></body></html>
Food.js内容：
(function(){ function Food(width,height,top,left,background){ this.width = width || 20; this.height = height || 20; this.top = top || 0 ; this.left = left || 0; this.background = background || "green"; } var newFood = null; Food.prototype.init = function(map){ removeFood(map); newFood = document.createElement("div"); newFood.style.width = this.width + "px"; newFood.style.height = this.height + "px"; newFood.style.background = this.background; this.top = parseInt(Math.random()*(map.offsetHeight-this.height)/this.height)*this.height; this.left = parseInt(Math.random()*(map.offsetWidth-this.width)/this.width)*this.width; newFood.style.top = this.top + "px"; newFood.style.left = this.left + "px"; newFood.style.position = "absolute"; map.appendChild(newFood); } function removeFood(map){ if(newFood){ map.removeChild(newFood); } } window.Food = Food;})();
Snake.js内容：
(function(){ function Snake(width,height,direction){ this.width = width ||20; this.height = height || 20; this.direction = direction || "right"; this.body = [ {top:1,left: 3,color: "red"}, {top:1,left: 2,color: "gold"}, {top:1,left: 1,color: "gold"} ] } var newSnake = []; Snake.prototype.init = function(map) { removeSnake(map); for (var i = 0; i < this.body.length; i++) { var snake = document.createElement("div"); snake.style.width =this.width+ "px"; snake.style.height= this.height +"px"; snake.style.background = this.direction; snake.style.position ="absolute"; snake.style.top = this.body[i].top*this.height +"px"; snake.style.left = this.body[i].left*this.width+ "px"; snake.style.background = this.body[i].color; map.appendChild(snake); newSnake.push(snake); } } Snake.prototype.move = function(map,food){ //移动过程中，删除原来的，创建新的；中间加上位置移动 removeSnake(map); for(var j=this.body.length-1;j>=1;j--){ this.body[j].left = this.body[j-1].left; this.body[j].top = this.body[j-1].top; } switch(this.direction){ case "right": this.body[0].left +=1; break; case "left": this.body[0].left -=1; break; case "top": this.body[0].top -=1; break; case "bottom": this.body[0].top +=1; } //移动过程中，如果蛇头的位置同食物相同，则1、创建新食物 2、蛇身体增加一部分 var last = this.body[this.body.length-1]; var x = this.body[0].left*food.width; var y = this.body[0].top * food.height; if(x == food.left && y == food.top){ food.init(map); var newBo = { top: last.top, left:last.left, color:"gold" } this.body.push(newBo); } this.init(map); } function removeSnake(map){ for(var i=0;i<newSnake.length;){ map.removeChild(newSnake[i]); newSnake.shift(); } } window.Snake = Snake;})();
Game.js内容：
(function(){ function Game(map){ var food = new Food(); this.food = food; var snake = new Snake(); this.snake = snake; this.map = map; } Game.prototype.init= function(){ this.snake.init(this.map); this.food.init(this.map); snakeMove(this.map,this.food,this.snake); changeDire(this.snake); } function snakeMove(map,food,snake){ //设置定时器，蛇移动 timer = setInterval(function(){ snake.move(map,food); //判断蛇头位置有没有超出范围 var x = map.offsetWidth/parseInt(food.width) -1; var y = map.offsetHeight/parseInt(food.height) -1; if(snake.body[0].left<0 || snake.body[0].left>x){ clearInterval(timer); alert("Game over"); } if(snake.body[0].top<0 || snake.body[0].top>y){ clearInterval(timer); alert("Game over"); }
},200);
} //根据输入值改变方向 function changeDire(snake){ document.onkeydown = function(event){ event = event || window.event; var num = event.keyCode; switch(num){ case 37:snake.direction ="left";break; case 38:snake.direction = "top";break; case 39:snake.direction = "right";break; case 40:snake.direction = "bottom";break; } } }
window.Game = Game;})();
时间： 2024-10-28 11:33:47