mebusw/snake.html

## snake.html
<!DOCTYPE html>
<html

lang
=
"en"
>
<head>

<meta

charset
=
"UTF-8"
>

<title>
贪吃蛇重构
</title>

<style>
        body
{
            display
:
 flex
;
            height
:

100vh
;
            margin
:

0
;
            padding
:

0
;
            justify
-
content
:
 center
;
            align
-
items
:
 center
;

}

</style>
</head>
<body>

<canvas

id
=
"can"

width
=
"400"

height
=
"400"

style
=
"
background
-
color
:
 black
"
>
对不起，您的浏览器不支持canvas
</canvas>

<script>

var
 snake
=

[
41
,

40
],

//snake队列表示蛇身，初始节点存在但不显示
            direction
=

1
,

//1表示向右，-1表示向左，20表示向下，-20表示向上
            food
=

43
,

//食物的位置
            n
,

//与下次移动的位置有关
            box
=
 document
.
getElementById
(
'can'
).
getContext
(
'2d'
);

//从0到399表示box里[0~19]*[0~19]的所有节点，每20px一个节点

function
 draw
(
seat
,
 color
)

{
            box
.
fillStyle
=
 color
;
            box
.
fillRect
(
seat
%

20

*
20

+

1
,

~~(
seat
/

20
)

*

20

+

1
,

18
,

18
);

//用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。

}
        document
.
onkeydown
=

function
(
evt
)

{


//当键盘上下左右键摁下的时候改变direction
            direction
=
 snake
[
1
]

-
 snake
[
0
]

==

(
n
=

[-
1
,

-
20
,

1
,

20
][(
evt
||
 event
).
keyCode
-

37
]

||
 direction
)

?
 direction
:
 n
;

};

!
function
()

{
            snake
.
unshift
(
n
=
 snake
[
0
]

+
 direction
);


//此时的n为下次蛇头出现的位置，n进入队列

if
(
snake
.
indexOf
(
n
,

1
)

>

0

||
 n
<

0

||
 n
>

399

||
 direction
==

1

&&
 n
%

20

==

0

||
 direction
==

-
1

&&
 n
%

20

==

19
)

{

//if语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序

return
 alert
(
"GAME OVER!"
);

}
            draw
(
n
,

"lime"
);

//画出蛇头下次出现的位置

if
(
n
==
 food
)

{

//如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾

while

(
snake
.
indexOf
(
food
=

~~(
Math
.
random
()

*

400
))

>

0
);
                draw
(
food
,

"yellow"
);

}

else

{

//没有吃到食物时正常移动，蛇尾出队列
                draw
(
snake
.
pop
(),
"black"
);

}
            setTimeout
(
arguments
.
callee
,

150
);


//每隔0.15秒执行函数一次，可以调节蛇的速度

}();

</script>
</body>
</html>
	<!DOCTYPE html>
	<html

	lang
	=
	"en"
	>
	<head>

	<meta

	charset
	=
	"UTF-8"
	>

	<title>
	贪吃蛇重构
	</title>

	<style>
	body
	{
	display
	:
	flex
	;
	height
	:

	100vh
	;
	margin
	:

	0
	;
	padding
	:

	0
	;
	justify
	-
	content
	:
	center
	;
	align
	-
	items
	:
	center
	;

	}

	</style>
	</head>
	<body>

	<canvas

	id
	=
	"can"

	width
	=
	"400"

	height
	=
	"400"

	style
	=
	"
	background
	-
	color
	:
	black
	"
	>
	对不起，您的浏览器不支持canvas
	</canvas>

	<script>

	var
	snake
	=

	[
	41
	,

	40
	],

	//snake队列表示蛇身，初始节点存在但不显示
	direction
	=

	1
	,

	//1表示向右，-1表示向左，20表示向下，-20表示向上
	food
	=

	43
	,

	//食物的位置
	n
	,

	//与下次移动的位置有关
	box
	=
	document
	.
	getElementById
	(
	'can'
	).
	getContext
	(
	'2d'
	);

	//从0到399表示box里[0~19]*[0~19]的所有节点，每20px一个节点

	function
	draw
	(
	seat
	,
	color
	)

	{
	box
	.
	fillStyle
	=
	color
	;
	box
	.
	fillRect
	(
	seat
	%

	20

	*
	20

	+

	1
	,

	~~(
	seat
	/

	20
	)

	*

	20

	+

	1
	,

	18
	,

	18
	);

	//用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。

	}
	document
	.
	onkeydown
	=

	function
	(
	evt
	)

	{


	//当键盘上下左右键摁下的时候改变direction
	direction
	=
	snake
	[
	1
	]

	-
	snake
	[
	0
	]

	==

	(
	n
	=

	[-
	1
	,

	-
	20
	,

	1
	,

	20
	][(
	evt
	\|\|
	event
	).
	keyCode
	-

	37
	]

	\|\|
	direction
	)

	?
	direction
	:
	n
	;

	};

	!
	function
	()

	{
	snake
	.
	unshift
	(
	n
	=
	snake
	[
	0
	]

	+
	direction
	);


	//此时的n为下次蛇头出现的位置，n进入队列

	if
	(
	snake
	.
	indexOf
	(
	n
	,

	1
	)

	>

	0

	\|\|
	n
	<

	0

	\|\|
	n
	>

	399

	\|\|
	direction
	==

	1

	&&
	n
	%

	20

	==

	0

	\|\|
	direction
	==

	-
	1

	&&
	n
	%

	20

	==

	19
	)

	{

	//if语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序

	return
	alert
	(
	"GAME OVER!"
	);

	}
	draw
	(
	n
	,

	"lime"
	);

	//画出蛇头下次出现的位置

	if
	(
	n
	==
	food
	)

	{

	//如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾

	while

	(
	snake
	.
	indexOf
	(
	food
	=

	~~(
	Math
	.
	random
	()

	*

	400
	))

	>

	0
	);
	draw
	(
	food
	,

	"yellow"
	);

	}

	else

	{

	//没有吃到食物时正常移动，蛇尾出队列
	draw
	(
	snake
	.
	pop
	(),
	"black"
	);

	}
	setTimeout
	(
	arguments
	.
	callee
	,

	150
	);


	//每隔0.15秒执行函数一次，可以调节蛇的速度

	}();

	</script>
	</body>
	</html>