: (Sorry, due to my limited ability, can only temporarily put static diagram.) Later, the dynamic diagram will be updated up)
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
#map {
width:500px;
height:500px;
position:relative;
Background: #ccc;
}
</style>
<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>
Food.js content:
(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 content:
(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) {
Move the process, delete the original, create a new, middle plus position move
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;
}
During the move, if the head of the snake is in the same position as the food, 1, create a new food 2, the snake body added part
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 content:
(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) {
Set timer, snake move
Timer = setinterval (function () {
Snake.move (Map,food);
Determine if the position of the snake head is out of range
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);
}
Change direction based on input value
function Changedire (snake) {
Document.onkeydown = function (event) {
Event = Event | | window.event;
var num = Event.keycode;
Switch (num) {
Case 37:snake.direction = "left";
Case 38:snake.direction = "top";
Case 39:snake.direction = "right";
Case 40:snake.direction = "bottom";
}
}
}
Window. Game = game;
})();
JS writing snake (Object oriented idea)