mebusw · June 15, 2017 16:59
diff --git a/snake.html b/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>