版权声明: https://blog.csdn.net/dashoumeixi/article/details/89076238
被人说搞c/c++,py的不会玩js.
???????????????????????
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
(function(){
var allFoods = [] ;
function RandomNum(){
}
RandomNum.getRange = function (min,max){
return Math.floor(Math.random() *(max-min) +min);
}
function removeAll(){
for ( var i = 0 ;allFoods.length;){
var parent = allFoods[i].parentNode;
parent.removeChild(allFoods[i]);
allFoods.splice(i,1);
}
}
function FoodObject(x,y,width,height,color){
this.width = width ||20;
this.height = height || 20;
this.color = color || "aqua";
this.x = x ||0;
this.y = y ||0;
}
FoodObject.prototype.draw = function(map){
removeAll();
var div = document.createElement("div");
this.div = div;
allFoods.push(div);
map.appendChild(div);
div.style.width = this.width +"px";
div.style.height = this.height +"px";
div.style.backgroundColor = this.color ;
this.x = RandomNum.getRange(0,map.offsetWidth/this.width) *this.width;
this.y = RandomNum.getRange(0,map.offsetHeight/this.height) * this.height;
div.style.left = this.x +"px";
div.style.top = this.y + "px";
div.style.position = "absolute";
div.style.borderRadius = "50%"
}
window.FoodObject = FoodObject;
})();
(function(){
var arr = [];
function SnakeObject(width,height,dir){
this.width = width ||20;
this.height = height || 20;
this.dir = dir || "right";
this.body =[
{x:3,y:2,color:"black"},
{x:2,y:2,color:"white"},
{x:1,y:2,color:"white"}
];
document.addEventListener("keydown",keyEvents.bind(this),false);
}
function keyEvents(e){
switch(e.keyCode){
case 38:this.dir = "top";break;
case 39:this.dir = "right";break;
case 40:this.dir = "down";break;
case 37:this.dir = "left";break;
}
}
SnakeObject.prototype.draw = function(map){
this.removeSelf();
for ( var i = 0; i < this.body.length; ++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';
var part = this.body[i];
div.style.left = part.x *this.width +"px";
div.style.top = part.y*this.height + 'px';
div.style.backgroundColor = part.color;
div.style.borderRadius = "50%"
arr.push(div);
}
}
SnakeObject.prototype.moveBody = function(map,food,speed){
for( var last = this.body.length-1 ; last >0; --last){
this.body[last].x = this.body[last-1].x;
this.body[last].y = this.body[last-1].y;
}
speed = speed ||1;
switch(this.dir){
case "left": this.body[0].x -=speed ;break;
case "right": this.body[0].x +=speed ;break;
case "top": this.body[0].y -=speed ;break;
case "down": this.body[0].y +=speed ;break;
}
var x = this.body[0].x * this.width;
var y = this.body[0].y * this.height;
if( x == food.x && y == food.y){
food.draw(map);
var lastOne = this.body[this.body.length-1];
var tail = {};
tail.x = lastOne.x;
tail.y = lastOne.y;
tail.color = lastOne.color;
this.body.push(tail);
}
}
SnakeObject.prototype.removeSelf = function(){
for(var i = 0; arr.length;){
var parent = arr[i].parentNode
parent.removeChild(arr[i]);
arr.splice(i,1);
}
}
window.SnakeObject = SnakeObject;
}());
(function(){
var gameObject = null;
function game(map){
this.food = new FoodObject();
this.snake = new SnakeObject();
this.map = map;
gameObject = this;
}
game.prototype.start = function(msecs){
this.food.draw(this.map);
var timer = window.setInterval(function(){
gameObject.snake.draw(gameObject.map);
gameObject.snake.moveBody(gameObject.map,gameObject.food);
var max_x = map.offsetWidth / gameObject.snake.width;
var max_y = map.offsetHeight / gameObject.snake.height;
var header_x = gameObject.snake.body[0].x;
var header_y = gameObject.snake.body[0].y;
if(header_x < 0 ||header_x > max_x ||
header_y <0 ||header_y > max_y){
clearInterval(timer);
alert("完蛋!")
}
},msecs||1000);
}
window.Game = game;
})();
window.onload = function(){
var map = document.getElementById("map");
var o = new Game(map);
o.start(100);
}
</script>
<style type="text/css">
.map{
width :900px;
height :900px;
background-color: blanchedalmond;
position: relative;
}
</style>
</head>
<body>
<div id="map" class="map">
</div>
</body>
</html>