<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>Document
</
title
>
</
head
>
<
link
rel=
"stylesheet"
href=
"snake.css"
>
<
body
>
<
div
id=
"map"
></
div
>
<
script
>
var
map = {
width:
900,
height:
500,
};
var
box = {
width:
50,
height:
50,
}
var
nums = {
hnum:map.
width/
box.
width,
vnum:map.
height/
box.
height,
}
var
DIR = {
DIR_LEFT:
1,
DIR_TOP:
2,
DIR_RIGHT:
3,
DIR_BOTTOM:
4,
}
var
dir=
DIR.
DIR_RIGHT;
var
snake=[];
var
other=[];
function
initMap(){
var
map_target=
document.
getElementById(
"map");
map_target.
style.
width=
map.
width+
"px";
map_target.
style.
height=
map.
height+
"px";
var
newSpan =
null;
for(
var
i=
1;
i<=
nums.
hnum*
nums.
vnum;
i++){
var
newSpan =
document.
createElement(
'span');
newSpan.
style.
width=
box.
width+
"px";
newSpan.
style.
height=
box.
height+
"px";
newSpan.
id=
i;
map_target.
appendChild(
newSpan);
// console.log(map_target);
if(
i<=
3){
newSpan.
className =
"snake";
snake.
push(
newSpan);
}
else{
other.
push(
newSpan);
}
}
}
function
moveSnake(){
var
headId;
// console.log(dir);
switch(
dir){
case
DIR.
DIR_LEFT:
headId =
parseInt(
snake[
snake.
length -
1].
id) -
1;
if(
headId %
nums.
hnum ==
0){
headId +=
nums.
hnum;
}
break;
case
DIR.
DIR_RIGHT:
headId =
parseInt(
snake[
snake.
length -
1].
id) +
1;
if(
headId %
nums.
hnum ==
1 ){
headId -=
nums.
hnum;
}
break;
case
DIR.
DIR_TOP:
headId =
parseInt(
snake[
snake.
length-
1].
id) -
nums.
hnum;
if(
headId <
1){
headId +=
nums.
hnum *
nums.
vnum;
}
break;
case
DIR.
DIR_BOTTOM:
headId =
parseInt(
snake[
snake.
length-
1].
id) +
nums.
hnum;
if(
headId >
nums.
hnum *
nums.
vnum){
headId -=
nums.
hnum *
nums.
vnum;
}
break;
default:
break;
}
var
head=
document.
getElementById(
headId);
for(
var
i =
0;
i <
snake.
length;
i ++){
if(
headId ==
snake[
i].
id){
alert(
"Game over");
window.
location=
window.
location;
}
}
var
index;
for(
var
i=
1;
i<
other.
length;
i++){
if(
headId==
other[
i].
id){
index=
i;
break;
}
}
// console.log(index);
other.
splice(
index,
1);
snake.
push(
head);
if(
head.
className ==
"food"){
// alert(1);
showFood();
// console.log(index);
}
else{
snake[
0].
className =
"";
other.
push(
snake.
shift());
}
head.
className =
"snake";
}
function
showFood(){
// console.log(other.length)
console.
log(
1);
var
index=
Math.
floor(
Math.
random()*
other.
length);
other[
index].
className =
"food";
}
window.
onload=
function(){
initMap();
setInterval(
moveSnake,
200);
showFood();
document.
onkeydown=
function(
e){
switch (
e.
keyCode) {
case
37:
if(
dir ==
DIR.
DIR_RIGHT)
break;
else{
dir =
DIR.
DIR_LEFT;
break}
case
38:
if(
dir ==
DIR.
DIR_BOTTOM)
break;
else{
dir =
DIR.
DIR_TOP;
break;}
case
39:
if(
dir ==
DIR.
DIR_LEFT)
break;
else{
dir =
DIR.
DIR_RIGHT;
break}
case
40:
if(
dir ==
DIR.
DIR_TOP)
break;
else{
dir =
DIR.
DIR_BOTTOM;
break;}
default:
break;
}
}
}
<
/
script
>
</
body
>
</
html
>
可以对其进行优化例如加入分数技术，蛇方向的改变优化