贪吃蛇

代码如下：
html代码：

**js代码** var _Map; var _Snake; var _Food; var _Snak; var _btn; var _Df; var n = 1; b = 1; z = 0; var t=1000; var t1=1000; function Map() { this.width = 800; this.height = 600; this.color = 'gray'; this.Map1 = null; this.display = function() { this.Map1 = document.createElement('div'); this.Map1.style.width = this.width + 'px'; this.Map1.style.height = this.height + 'px'; this.Map1.style.backgroundColor = this.color; this.Map1.style.margin ='auto'; this.Map1.style.position = 'relative'; this.Map1.id = 'div_Map'; document.getElementsByTagName('body')[0].appendChild(this.Map1); } }

function Snake() {
this.width = 20;
this.height = 20;
this.Snake1 = [
[2, 5, null, ‘red’],
[1, 5, null, ‘pink’],
[0, 5, null, ‘yellow’]
];
this.Snake2 = [
[2, 3, null, ‘red’],
[1, 3, null, ‘blue’],
[0, 3, null, ‘blue’]
]
this.Snake_1 = 0;
this.Snake_2 = 0;
this.display = function() {
for(var i = 0; i < this.Snake1.length; i++) {
if(this.Snake1[i][2] == null) {
this.Snake1[i][2] = document.createElement(‘div’);
this.Snake1[i][2].style.width = this.width + ‘px’;
this.Snake1[i][2].style.height = this.height + ‘px’;
this.Snake1[i][2].style.background = this.Snake1[i][3];
this.Snake1[i][2].style.borderRadius = 10 + ‘px’;
_Map.Map1.appendChild(this.Snake1[i][2]);
this.Snake1[i][2].style.position = ‘absolute’;
}
this.Snake1[i][2].style.left = this.Snake1[i][0] * this.width + ‘px’;
this.Snake1[i][2].style.top = this.Snake1[i][1] * this.height + ‘px’;
}
for(var i = 0; i < this.Snake2.length; i++) {
if(this.Snake2[i][2] == null) {
this.Snake2[i][2] = document.createElement(‘div’);
this.Snake2[i][2].style.width = this.width + ‘px’;
this.Snake2[i][2].style.height = this.height + ‘px’;
this.Snake2[i][2].style.background = this.Snake2[i][3];
this.Snake2[i][2].style.borderRadius = 10 + ‘px’;
_Map.Map1.appendChild(this.Snake2[i][2]);
this.Snake2[i][2].style.position = ‘absolute’;
}
this.Snake2[i][2].style.left = this.Snake2[i][0] * this.width + ‘px’;
this.Snake2[i][2].style.top = this.Snake2[i][1] * this.height + ‘px’;
}
}
this.move = function() {
if(this.Snake1.length>=7){
t1=500;
}else if(this.Snake1.length>=10){
t1=200;
}
if(this.Snake_1 == 39 || this.Snake_1 == 37 || this.Snake_1 == 38 || this.Snake_1 == 40) {
for(var i = this.Snake1.length - 1; i > 0; i–) {
this.Snake1[i][0] = this.Snake1[i - 1][0];
this.Snake1[i][1] = this.Snake1[i - 1][1];
}
switch(this.Snake_1) {
case 37:
this.Snake1[0][0] -= 1;
break;
case 38:
this.Snake1[0][1] -= 1;
break;
case 39:
this.Snake1[0][0] += 1;
break;
case 40:
this.Snake1[0][1] += 1;
break;
}
if(this.Snake1[0][0] == _Food.x && this.Snake1[0][1] == _Food.y) {
var x = this.Snake1[this.Snake1.length - 1][0];
var y = this.Snake1[this.Snake1.length - 1][1];
this.Snake1.push([x, y, null, ‘yellow’]);
_Food.display();
z = n * b;
b++;
document.getElementById(‘div1’).innerHTML = z;
}
if(this.Snake1[0][1] < 0 || this.Snake1[0][1] > 29 || this.Snake1[0][0] < 0) {
alert(‘撞在墙壁上’);
history.go();
return;
} else if(this.Snake1[0][0] > 39) {
this.Snake1[0][0] = null;
for(var i = 0; i < this.Snake1.length; i++) {
if(this.Snake1[i][2] == null) {
this.Snake1[i][2] = document.createElement(‘div’);
this.Snake1[i][2].style.width = this.width + ‘px’;
this.Snake1[i][2].style.height = this.height + ‘px’;
this.Snake1[i][2].style.background = this.Snake1[i][3];
this.Snake1[i][2].style.borderRadius = 10 + ‘px’;
_Map.Map1.appendChild(this.Snake1[i][2]);
this.Snake1[i][2].style.position = ‘absolute’;
}
this.Snake1[i][2].style.left = 1 * this.width + ‘px’;
this.Snake1[i][2].style.top = this.Snake1[i][1] * this.height + ‘px’;
}
}
for(var i = 1; i < this.Snake1.length; i++) {
if(this.Snake1[0][0] == this.Snake1[i][0] && this.Snake1[0][1] == this.Snake1[i][1]) {
alert(‘吃了自己’);
return;
}
}
this.display();
setTimeout(’_Snake.move()’, t1);
} else {
this.display();
setTimeout(’_Snake.move()’, t1);
}
}
this.move1 = function() {
if(this.Snake2.length>=7){
t=500;
}else if(this.Snake2.length>=10){
t=200;
}
if(this.Snake_2 == 87 || this.Snake_2 == 83 || this.Snake_2 == 68 || this.Snake_2 == 65) {
for(var i = this.Snake2.length - 1; i > 0; i–) {
this.Snake2[i][0] = this.Snake2[i - 1][0];
this.Snake2[i][1] = this.Snake2[i - 1][1];
}
switch(this.Snake_2) {
case 65:
this.Snake2[0][0] -= 1;
break;
case 87:
this.Snake2[0][1] -= 1;
break;
case 68:
this.Snake2[0][0] += 1;
break;
case 83:
this.Snake2[0][1] += 1;
break;
}
if(this.Snake2[0][0] == _Food.x && this.Snake2[0][1] == _Food.y) {
var x = this.Snake2[this.Snake2.length - 1][0];
var y = this.Snake2[this.Snake2.length - 1][1];
if(_Food.Food1.style.backgroundColor == ‘pink’) {
alert(‘aaa’);
var yuansu=
this.Snake2.remove();
} else {
// alert(‘bba’);
this.Snake2.push([x, y, null, ‘blue’]);
}
_Food.display();
z = n * b;
b++;
document.getElementById(‘div1’).innerHTML = z;
}
if(this.Snake2[0][1] < 0 || this.Snake2[0][1] > 29 || this.Snake2[0][0] < 0 || this.Snake2[0][0] > 39) {
alert(‘撞在墙壁上’);
history.go();
return;
}
for(var j = 1; j < this.Snake2.length; j++) {
if(this.Snake2[0][0] == this.Snake2[j][0] && this.Snake2[0][1] == this.Snake2[j][1]) {
alert(‘吃了自己’);
history.go();
return;
}
}
this.display();
setTimeout(’_Snake.move1()’, t);
} else {
setTimeout(’_Snake.move1()’, t);
}
}
}

function Food() {
this.width = 20;
this.height = 20;
this.color = ‘blue’;
this.x = 0;
this.y = 0;
this.Food1 = null;
this.display = function() {
for(var i = 0; i < 20; i++) {
if(this.Food1 == null) {
this.Food1 = document.createElement(‘div’);
this.Food1.style.width = this.width + ‘px’;
this.Food1.style.height = this.height + ‘px’;
// this.Food1.style.backgroundColor = ‘rgb(’ + p + ‘,’ + q + ‘,’ + w + ‘)’;
this.Food1.style.borderRadius = 5 + ‘px’;
this.Food1.style.position = ‘absolute’;
}
p = Math.round(Math.random() * 225);
q = Math.round(Math.random() * 225);
w = Math.round(Math.random() * 225);
this.Food1.style.backgroundColor = ‘rgb(’ + p + ‘,’ + q + ‘,’ + w + ‘)’;
this.x = Math.round(Math.random() * 39);
this.y = Math.round(Math.random() * 29);
this.Food1.style.left = this.x * this.width + ‘px’;
this.Food1.style.top = this.y * this.height + ‘px’;
_Map.Map1.appendChild(this.Food1);
}
}
}

function DF() {
this.width = 50;
this.height = 50;
this.color = ‘pink’;
this.display = function() {
var div_df = document.createElement(‘div’);
div_df.style.width = this.width + ‘px’;
div_df.style.height = this.height + ‘px’;
div_df.style.background = this.color;
div_df.style.position = ‘absolute’;
div_df.style.top = 8 + ‘px’;
div_df.style.left = 1168 + ‘px’;
div_df.id = ‘div1’;
div_df.innerHTML = 0;
div_df.style.fontSize = 30 + ‘px’;
div_df.style.textAlign = ‘center’;
document.getElementsByTagName(‘body’)[0].appendChild(div_df);
}
}
window.onload = function() {
_Map = new Map();
_Map.display();
_Food = new Food();
_Food.display();
_Snake = new Snake();
_Snake.display();
_Snake.move();
_Snake.move1();
_Df = new DF();
_Df.display();
document.getElementsByTagName(‘body’)[0].onkeydown = function(event) {
_Snake.Snake_1 = event.keyCode;
_Snake.Snake_2 = event.keyCode;
}
$(’#btn’).click(function(){
var music=document.getElementById(‘au’);
if(music.paused){
music.play();
}else{
music.pause();
}
})
}