Fork me on GitHub

手把手教学h5小游戏 - 贪吃蛇

简单的小游戏制作,代码量只有两三百行。游戏可自行扩展延申。

源码已发布至github,喜欢的点个小星星,源码入口:game-snake

游戏已发布,游戏入口:http://snake.game.yanjd.top

第一步 - 制作想法

游戏如何实现是首要想的,这里我的想法如下:

  1. 利用canvas进行绘制地图(格子装)。
  2. 利用canvas绘制蛇,就是占用地图格子。让蛇移动,即:更新蛇坐标,重新绘制。
  3. 创建四个方向按钮,控制蛇接下来的方向。
  4. 随机在地图上绘制出果子,蛇移动时“吃”到果子,增加长度和“移速”。
  5. 开始键和结束键配置,分数显示、历史记录

第二步 - 框架选型

从第一步可知,我想实现这个游戏,只需要用到canvas绘制就可以了,没有物理引擎啥的,也没有高级的UI特效。可以选个简单点的,用来方便操作canvas绘制。精挑细选后选的是EaselJS,比较轻量,用于绘制canvas,以及canvas的动态效果。

第三步 - 开发

准备

目录和文件准备:

| - index.html

| - js

| - | - main.js

| - css

| - | - stylesheet.css

index.html 导入相关的依赖,以及样式文件和脚本文件。设计是屏幕80%高度为canvas绘制区域,20%高度是操作栏以及展示分数区域.

<!DOCTYPE html>
<html lang="zh">

<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>贪吃蛇</title>
  <link rel="stylesheet" href="css/stylesheet.css">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
</head>

<body>
  <div id="app">
    <div class="content-canvas">
      <canvas></canvas>
    </div>
    <div class="control">
    </div>
  </div>
  <script src="https://cdn.bootcss.com/EaselJS/1.0.2/easeljs.min.js"></script>
  <!-- 载入jquery 方便dom操作 -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <!-- sweetalert 美化alert用的 -->
  <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

stylesheet.css

* {
  padding: 0;
  margin: 0;
}
body {
  position: fixed;
  width: 100%;
  height: 100%;
}
#app {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}
/* canvas绘制区域 */
.content-canvas {
  width: 100%;
  max-width: 768px;
  height: 80%;
  position: fixed;
  overflow: hidden;
}
.content-canvas canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* 操作区域 */
.control {
  position: fixed;
  width: 100%;
  max-width: 768px;
  height: 20%;
  bottom: 0;
  background-color: #aeff5d;
}

main.js

$(function() {
  // 主代码编写区域
})

1.绘制格子

注意的点(遇到的问题以及解决方案):

  1. canvas绘制的路线是无宽度的,但线条是有宽度的。比如:从(0, 0)到(0, 100)绘制一条宽度为10px的线,则线条一半是在区域外看不见的。处理方案是起点偏移,比如:从(0, 0)到(0, 100)绘制一条宽度为10px的线,改为从(5,0)到(5,100),偏移量为线条宽度的一半。
  2. 用样式定义canvas的宽高坐标会