基于HTML5技术的贪吃蛇小游戏的设计与实现

最新推荐文章于 2024-05-21 22:13:42 发布

拾忆 Eternal゛

最新推荐文章于 2024-05-21 22:13:42 发布

阅读量778

点赞数 16

文章标签： java html

本文链接：https://blog.csdn.net/ww120624/article/details/136405111

版权

项目简介：
贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用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>