首页
IT
登录
6mi
u
盘
搜
搜 索
IT
自制一个贪吃蛇小游戏
自制一个贪吃蛇小游戏
xiaoxiao
2022-06-23
28
//直接上代码啦
<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>
贪吃蛇
</
title
>
<
script
>
</
script
>
<
style
>
#div
{
width
:
300
px
;
height
:
300
px
;
background
:
lightgray
;
margin
:
0
auto
;
position
:
relative
;
}
.game
{
width
:
100
px
;
height
:
50
px
;
background
:
gray
;
border
:
1
px solid
#ddd
;
border-radius
:
5
px
;
line-height
:
50
px
;
text-align
:
center
;
color
:
lightblue
;
font-weight
:
bold
;
position
:
absolute
;
top
:
120
px
;
left
:
100
px
;
display
:
none
;
cursor
:
pointer
;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
div
>
<
canvas
id
=
"canvas"
width
=
"300px"
height
=
"300px"
>
</
canvas
>
<
div
id
=
"start"
class
=
"game"
onclick
=
"run()"
>
开始游戏
</
div
>
<
div
id
=
"over"
class
=
"game"
>
GAME OVER
</
div
>
</
div
>
</
body
>
<
script
>
var
canvas = document.getElementById(
"canvas"
);
var
context = canvas.getContext(
"2d"
); context.fillStyle=
"gray"
;
var
start = document.getElementById(
"start"
);
var
over = document.getElementById(
"over"
);
var
state =
0
;
var
direction =
"right"
;
const
WIDTH = canvas.width;
const
HEIGHT = canvas.height;
const
FW =
10
;
//游戏开始
function
paint_start
()
{
if
(state==
0
){ start.style.display=
"block"
; } }
function
run
()
{
state=
1
; start.style.display=
"none"
; }
//游戏结束
function
paint_over
()
{
if
(state==
2
){ over.style.display=
"block"
; } }
//游戏运行
var
snake=[]; snake[
0
] = { x:
Math
.floor(
Math
.random()*(WIDTH/
10
-
1
))*
10
, y:
Math
.floor(
Math
.random()*(HEIGHT/
10
-
1
))*
10
} snake[
1
]={ x:snake[
0
].x-FW, y:snake[
0
].y } snake[
2
]={ x:snake[
1
].x-FW, y:snake[
1
].y }
function
sNake
()
{
this
.x = snake[snake.length-
1
].x;
this
.y = snake[snake.length-
1
].y; }
function
paint
(snake)
{
for
(
var
i=
0
;i<snake.length ;i++ ){ context.fillRect(snake[i].x,snake[i].y,FW,FW); } }
function
clear
()
{
context.clearRect(
0
,
0
,
400
,
400
); }
function
step
(snake)
{
if
(state==
1
){
if
(direction==
"left"
){ snake[snake.length-
1
].x=snake[
0
].x-
10
; snake[snake.length-
1
].y=snake[
0
].y; }
else
if
(direction==
"right"
){ snake[snake.length-
1
].x=snake[
0
].x+
10
; snake[snake.length-
1
].y=snake[
0
].y; }
else
if
(direction==
"up"
){ snake[snake.length-
1
].y=snake[
0
].y-
10
; snake[snake.length-
1
].x=snake[
0
].x; }
else
{ snake[snake.length-
1
].y=snake[
0
].y+
10
; snake[snake.length-
1
].x=snake[
0
].x; } snake.unshift(snake[snake.length-
1
]); snake.pop(); } }
function
eat
()
{
if
(checkEat(snake[
0
])){ snake[snake.length] =
new
sNake();
return
true
; }
else
{
return
false
; } }
function
checkEat
(snake)
{
//测试是否吃掉食物
return
(direction==
"up"
&&snake.x==food.x&&snake.y==food.y-FW)|| (direction==
"down"
&&snake.x==food.x&&snake.y==food.y+FW)|| (direction==
"right"
&&snake.y==food.y&&snake.x==food.x+FW)|| (direction==
"left"
&&snake.y==food.y&&snake.x==food.x-FW); }
var
food = { x:
Math
.floor(
Math
.random()*(WIDTH/
10
-
1
))*
10
, y:
Math
.floor(
Math
.random()*(HEIGHT/
10
-
1
))*
10
}
function
paintFood
()
{
if
(eat()){ food.x=
Math
.floor(
Math
.random()*(WIDTH/
10
-
1
))*
10
; food.y=
Math
.floor(
Math
.random()*(HEIGHT/
10
-
1
))*
10
; context.fillRect(food.x,food.y,
10
,
10
); }
else
{ context.fillRect(food.x,food.y,
10
,
10
); } }
//测试是否撞击到墙壁
function
check_hit
(snake)
{
if
((snake[
0
].x==-FW)||(snake[
0
].x==WIDTH)||(snake[
0
].y==-FW)||(snake[
0
].y==HEIGHT)){ state=
2
; console.log(snake[
0
].x); } }
//测试是否撞到自己
function
hitSelf
(snake)
{
if
(snake.length>
4
){
if
(direction==
"right"
){
for
(
var
i=
3
;i<snake.length;i++){
if
(snake[
0
].y==snake[i].y&&snake[
0
].x==snake[i].x-FW){ state=
2
; } } }
if
(direction==
"left"
){
for
(
var
i=
3
;i<snake.length;i++){
if
(snake[
0
].y==snake[i].y&&snake[
0
].x==snake[i].x+FW){ state=
2
; } } }
if
(direction==
"up"
){
for
(
var
i=
3
;i<snake.length;i++){
if
(snake[
0
].y==snake[i].y+FW&&snake[
0
].x==snake[i].x){ state=
2
; } } }
if
(direction==
"down"
){
for
(
var
i=
3
;i<snake.length;i++){
if
(snake[
0
].y==snake[i].y-FW&&snake[
0
].x==snake[i].x){ state=
2
; } } } } }
//控制方向
function
left
()
{
if
(direction!==
"right"
){ direction=
"left"
; } }
function
right
()
{
if
(direction!==
"left"
){ direction=
"right"
; } }
function
up
()
{
if
(direction!==
"down"
){ direction=
"up"
; } }
function
down
()
{
if
(direction!==
"up"
){ direction=
"down"
; } } document.onkeydown =
function
(e)
{
var
e =e||window.event;
switch
(e.keyCode){
case
37
: left();
break
;
case
38
: up();
break
;
case
39
: right();
break
;
case
40
: down();
break
; } } setInterval(
function
()
{
clear(); check_hit(snake); hitSelf(snake); paint_start(); paint_over(); paint(snake); eat(); step(snake); paintFood(food); },
200
);
</
script
>
</
html
>
转载请注明原文地址: https://ju.6miu.com/read-1123520.html
专利
最新回复
(
0
)
