项目简介:
贪吃蛇作为我们儿时经典的游戏之一,它是一款单机而又好玩的小游戏。今天,就让我们用html5技术实现一个简单的贪吃蛇小游戏!
项目核心技术:
html5的canvas+JS技术
操作步骤:
游戏玩家通过操作键盘的方向键(上下左右键)来控制小蛇的方向,使小蛇吃到红色的食物,然后促使小蛇长大。并且,如果得到的分数在不断上涨,游戏的难度也会不断的上升(小蛇的移动速度会越来越快)。如果小蛇头部撞到墙壁或小蛇自己的身体,就会判定游戏失败。
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="utf-8">
<title>html5贪吃蛇小游戏</title>
<script type="text/javascript" src="贪吃蛇.js"></script>
<script>
</script>
</head>
<body>
<h1>html5贪吃蛇小游戏</h1>
<div align="left" class="a">
游戏规则:<br>
1.初始分数为=0、初始速度为1!<br>
2.操作蛇移动,使蛇可以吃到红色的食物!<br>
3.每当我的分数每次达到100分时,当前速度就会提高一个等级!<br>
4.最高速度为10.相信能力强的人可以达到最高速度!<br>
5.当蛇的碰到墙体或者自己的身子的时候,会宣布游戏失败!<br>
</div>
<style>
body{
text-align: center;
background-color: aqua;
}
#snake{
margin-top: 20px;
}
.a{
margin-top: 50px;
margin-left: 680px;
width: 600px;
font-size: 20px;
}
</style>
<canvas id="snake" width="" height=""></canvas>
<h3 id="score">我的得分:0</h3>
<h3 id="speed">当前速度:1</h3>
<script>
var snake = new Snake("snake","score","speed",36,36);
snake.init();
</script>
</body>
js部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="utf-8">
<title>html5贪吃蛇小游戏</title>
<script type="text/javascript" src="贪吃蛇.js"></script>
<script>
</script>
</head>
<body>
<h1>html5贪吃蛇小游戏</h1>
<div align="left" class="a">
游戏规则:<br>
1.初始分数为=0、初始速度为1!<br>
2.操作蛇移动,使蛇可以吃到红色的食物!<br>
3.每当我的分数每次达到100分时,当前速度就会提高一个等级!<br>
4.最高速度为10.相信能力强的人可以达到最高速度!<br>
5.当蛇的碰到墙体或者自己的身子的时候,会宣布游戏失败!<br>
</div>
<style>
body{
text-align: center;
background-color: aqua;
}
#snake{
margin-top: 20px;
}
.a{
margin-top: 50px;
margin-left: 680px;
width: 600px;
font-size: 20px;
}
</style>
<canvas id="snake" width="" height=""></canvas>
<h3 id="score">我的得分:0</h3>
<h3 id="speed">当前速度:1</h3>
<script>
var snake = new Snake("snake","score","speed",36,36);
snake.init();
</script>
</body>
想直接下载代码的,请点击以下链接进入下载:
不会内卷/贪吃蛇小游戏 - 码云 - 开源中国 (gitee.com)
点击贪吃蛇项目代码即可看到相关的所有文件代码!
观看完了,麻烦给个点赞+收藏!!!
谢谢!!!