最近几天准备把小项目都翻出来整理上来 顺便再理一下思路，都是很简单的小东西，但是积少成多....
js和html css加起来不过200行代码 还算比较流畅
点击开始游戏后蛇就出来可以玩了！
下面来看看代码
html部分：
<
body
onkeydown=
"control(event)"
>
<
div
class=
"box"
>
<
div
class=
"top"
>
<
button
id=
"start"
>开始游戏
</
button
>
<
button
id=
"stop"
>暂停游戏
</
button
>
<
span
>得分：
</
span
><
span
id=
"score"
></
span
>
</
div
>
<
div
class=
"main"
>
</
div
>
</
div
>
css部分：
.box{
border:
1px
dashed
blue;
}
.top{
}
.main{
position:
relative;
width:
600px;
height:
600px;
background:
yellow;
overflow:
hidden;
}
这里的地图是我在html中定义好的
js部分：首先所有的操作都是基于 “开始游戏”这个按钮的
我们来获取这个标签 并且在里面执行游戏需要执行的一系列操作。
在此之前声明会用到的变量
首先我们要创建蛇的身体
我把蛇身体的每一节都定义成一小块div，定义它的样式，把他推入snakes数组中，并且插入图纸main中，这样蛇的一块身体就出现在界面中了，然后通过一次for循环
创建完蛇之后我们需要在地图上随机的生成食物，
食物我们也将其定义为一个div，我们定义食物的坐标x，y。Math.random()*29 + 1是生成0~31之间的小数，Math.floor方法取向下的整数，再乘以20可以完美的在地图上刷新食物，把它插在地图中 ，这样在点击“开始游戏”后地图上就会出现一条蛇，并且随机生成一个食物。
接下来我们需要让蛇移动，在这里我们只需要控制蛇头的移动，然后让蛇的身体一节跟着一节走就ok了
我们就先控制蛇头吧 让他先笔直的动起来。
只需要给蛇头加一个定时器，然后我们通过改变stepX和stepY的值就可以控制蛇头的方向。
之后我们只要让蛇的身体的每一节 都跟着上一节走，就可以让整条蛇都随着蛇头动起来
之后我们需要改变蛇运动的方向，我们在body上绑定一个onkeydown事件，我们可以通过event.keyCode来获取数值判断你按得是哪个键，通过switch开关方法，改变stepX 和 stepY来控制蛇头的方向
function
control(
event){
var
n =
event.
keyCode;
switch (
n){
case
37:
if(
snake_direction ==
'right'){
break;
}
else{
stepX = -
20;
stepY =
0;
snake_direction =
'left';
}
re_move();
break;
case
38:
if(
snake_direction ==
'down'){
break;
}
else{
stepX =
0;
stepY = -
20;
snake_direction =
'top';
}
re_move();
break;
case
39:
if(
snake_direction ==
'left'){
break;
}
else{
stepX =
20;
stepY =
0;
snake_direction =
'right';
}
re_move();
break;
case
40:
if(
snake_direction ==
'top'){
break;
}
else{
stepX =
0;
stepY =
20;
snake_direction =
'down';
}
re_move();
break;
}
}
蛇能动起来就要开始吃食物了，我们只需要获取到蛇头的位置，和食物的位置，当两者的距离小到一定程度时，不就可以吃到了吗
吃到食物后，我们把食物插到数组的结尾，来成为蛇身体的一部分，而且在吃了食物后我们的分数会+1，我们只需要用蛇当前的长度减去蛇原始的长度，就是分数了。我们需要实时的监视蛇和食物的距离，所以我们需要设置一个计时器。
最后就是判断游戏失败的条件了
function
overDiv
(){
var
x
=
parseInt
(
snakes
[
0
].
style
.
left
);
var
y
=
parseInt
(
snakes
[
0
].
style
.
top
);
if
(
x
<
0
||
x
>
580
){
alert
(
'diediedie~~~'
);
window
.
location
.
reload
();
}
if
(
y
<
0
||
y
>
580
){
alert
(
'diediedie~~~'
);
window
.
location
.
reload
();
}
setTimeout
(
'overDiv()'
,
30
);
}
当蛇头超出地图的边界 游戏就结束了
这里再判断下是否咬到自己
代码
<!
DOCTYPE html
>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
title
>
Document
</
title
>
<
style
>
.box
{
border
:
1px
dashed
blue
;
}
.top
{
}
.main
{
position
:
relative
;
width
:
600px
;
height
:
600px
;
background
:
yellow
;
overflow
:
hidden
;
}
<
/
style
>
</
head
>
<
body
onkeydown
=
"control(event)"
>
<
div
class
=
"box"
>
<
div
class
=
"top"
>
<
button
id
=
"start"
>
开始游戏
</
button
>
<
button
id
=
"stop"
>
暂停游戏
</
button
>
<
span
>
得分：
</
span
><
span
id
=
"score"
></
span
>
</
div
>
<
div
class
=
"main"
>
</
div
>
</
div
>
<
script
src
=
"./jquery-3.3.1.js"
>
<
/
script
>
<
script
>
var
map
=
document
.
getElementsByClassName
(
'main'
);
var
snakes
=
[];
var
stepX
=
20
,
stepY
=
0
;
var
snake_direction
=
'right'
;
var
timer
;
// 暂停游戏
document
.
getElementById
(
'stop'
).
onclick
=
function
(){
stop
();
}
//开始游戏
document
.
getElementById
(
'start'
).
onclick
=
function
(){
if
(
snakes
.
length
==
0
){
createFood
();
//创建食物
for
(
var
i
=
2
;
i
>=
0
;
i
--
){
createSnake
(
i
);
//创建蛇的身体
}}
else
{}
snakeMove
();
//蛇的移动
overDiv
();
//碰到边界的判定条件
eatIt
();
eatFood
();
//蛇吃食物
console
.
log
(
snakes
)
}
function
stop
(){
clearTimeout
(
timer
)
}
function
eatFood
(){
var
score
=
document
.
getElementById
(
'score'
);
score
.
innerHTML
=
snakes
.
length
-
3
;
var
food
=
document
.
getElementById
(
'active'
);
var
x
=
parseInt
(
snakes
[
0
].
style
.
left
);
var
y
=
parseInt
(
snakes
[
0
].
style
.
top
);
var
food_x
=
parseInt
(
food
.
style
.
left
);
var
food_y
=
parseInt
(
food
.
style
.
top
);
if
(
Math
.
abs
(
food_x
-
x
)
<
20
&&
Math
.
abs
(
food_y
-
y
)
<
20
){
food
.
style
.
backgroundColor
=
'green'
;
snakes
.
push
(
food
);
food
.
id
=
''
;
createFood
();
}
setTimeout
(
'eatFood()'
,
30
);
}
function
createFood
(){
var
food
=
document
.
createElement
(
'div'
);
var
x
=
Math
.
floor
(
Math
.
random
()
*
29
+
1
)
*
20
;
var
y
=
Math
.
floor
(
Math
.
random
()
*
29
+
1
)
*
20
;
food
.
style
.
position
=
'absolute'
;
food
.
style
.
left
=
x
+
'px'
;
food
.
style
.
top
=
y
+
'px'
;
food
.
style
.
width
=
'18px'
;
food
.
style
.
height
=
'18px'
;
food
.
style
.
border
=
'1px solid black'
;
food
.
style
.
backgroundColor
=
'blue'
;
$
(
'.main'
).
append
(
food
);
$
(
food
).
attr
(
'id'
,
'active'
);
}
function
createSnake
(
num
){
var
snakeBody
=
document
.
createElement
(
'div'
);
snakeBody
.
style
.
backgroundColor
=
'green'
;
snakeBody
.
style
.
border
=
'1px solid black'
;
snakeBody
.
style
.
width
=
'18px'
;
snakeBody
.
style
.
height
=
'18px'
;
snakeBody
.
style
.
position
=
'absolute'
;
snakeBody
.
style
.
left
=
num
*
20
+
'px'
;
snakeBody
.
style
.
top
=
'0px'
;
snakes
.
push
(
snakeBody
);
$
(
'.main'
).
append
(
snakeBody
);
}
function
snakeMove
(){
for
(
var
i
=
snakes
.
length
-
1
;
i
>
0
;
i
--
){
snakes
[
i
].
style
.
left
=
snakes
[
i
-
1
].
style
.
left
;
snakes
[
i
].
style
.
top
=
snakes
[
i
-
1
].
style
.
top
;
}
snakes
[
0
].
style
.
left
=
parseInt
(
snakes
[
0
].
style
.
left
)
+
stepX
+
'px'
;
snakes
[
0
].
style
.
top
=
parseInt
(
snakes
[
0
].
style
.
top
)
+
stepY
+
'px'
;
timer
=
setTimeout
(
'snakeMove()'
,
400
);
}
function
re_move
(){
clearTimeout
(
timer
);
snakeMove
();
}
function
control
(
event
){
var
n
=
event
.
keyCode
;
switch
(
n
){
case
37
:
if
(
snake_direction
==
'right'
){
break
;
}
else
{
stepX
=
-
20
;
stepY
=
0
;
snake_direction
=
'left'
;
}
re_move
();
break
;
case
38
:
if
(
snake_direction
==
'down'
){
break
;
}
else
{
stepX
=
0
;
stepY
=
-
20
;
snake_direction
=
'top'
;
}
re_move
();
break
;
case
39
:
if
(
snake_direction
==
'left'
){
break
;
}
else
{
stepX
=
20
;
stepY
=
0
;
snake_direction
=
'right'
;
}
re_move
();
break
;
case
40
:
if
(
snake_direction
==
'top'
){
break
;
}
else
{
stepX
=
0
;
stepY
=
20
;
snake_direction
=
'down'
;
}
re_move
();
break
;
}
}
function
overDiv
(){
var
x
=
parseInt
(
snakes
[
0
].
style
.
left
);
var
y
=
parseInt
(
snakes
[
0
].
style
.
top
);
if
(
x
<
0
||
x
>
580
){
alert
(
'diediedie~~~'
);
window
.
location
.
reload
();
}
if
(
y
<
0
||
y
>
580
){
alert
(
'diediedie~~~'
);
window
.
location
.
reload
();
}
setTimeout
(
'overDiv()'
,
30
);
}
function
eatIt
(){
for
(
var
i
=
3
;
i
<
snakes
.
length
-
1
;
i
++
){
if
(
snakes
[
i
].
style
.
left
==
snakes
[
0
].
style
.
left
&&
snakes
[
i
].
style
.
top
==
snakes
[
0
].
style
.
top
){
alert
(
'diediedie12'
)
window
.
location
.
reload
();
}
}
setTimeout
(
'eatIt'
,
30
)
}
<
/
script
>
</
body
>
</
html
>
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
