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

源码已发布至github，喜欢的点个小星星，源码入口：game-snake
游戏已发布，游戏入口：http://snake.game.yanjd.top
第一步 - 制作想法

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

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

第二步 - 框架选型

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

准备

目录和文件准备：
| - index.html
| - js
| - | - main.js
| - css
| - | - stylesheet.css
index.html 导入相关的依赖，以及样式文件和脚本文件。设计是屏幕80%高度为canvas绘制区域，20%高度是操作栏以及展示分数区域.

1.         贪吃蛇                    
2.         
3.   
4.             

复制代码

stylesheet.css

1. * {  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

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

复制代码

1.绘制格子

注意的点（遇到的问题以及解决方案）：

• canvas绘制的路线是无宽度的，但线条是有宽度的。比如：从(0, 0)到(0, 100)绘制一条宽度为10px的线，则线条一半是在区域外看不见的。处理方案是起点偏移，比如：从(0, 0)到(0, 100)绘制一条宽度为10px的线，改为从(5,0)到(5,100)，偏移量为线条宽度的一半。
  
• 用样式定义canvas的宽高坐标会被拉伸，处理方案是给canvas元素设置宽高属性，值为它当前的实际宽高。
  

代码

main.js
[code]$(function () {  var LINE_WIDTH = 1 // 线条宽度  var LINE_MAX_NUM = 32 // 一行格子数量  var canvasHeight = $('canvas').height() // 获取canvas的高度  var canvasWidth = $('canvas').width() // 获取canvas的宽度  var gridWidth = (canvasWidth - LINE_WIDTH) / LINE_MAX_NUM // 格子宽度，按一行32个格子计算  var num = { w: LINE_MAX_NUM, h: Math.floor((canvasHeight - LINE_WIDTH) / gridWidth) } // 计算横向和纵向多少个格子，即：横坐标的最大值和纵坐标的最大值  /** * 绘制格子地图 * @param graphics */  function drawGrid(graphics) {    var wNum = num.w    var hNum = num.h    graphics.setStrokeStyle(LINE_WIDTH).beginStroke('#ffac52')    // 画横向的线条    for (var i = 0; i

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

源码已发布至github，喜欢的点个小星星，源码入口：game-snake
游戏已发布，游戏入口：http://snake.game.yanjd.top
第一步 - 制作想法

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

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

第二步 - 框架选型

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

准备

目录和文件准备：
| - index.html
| - js
| - | - main.js
| - css
| - | - stylesheet.css
index.html 导入相关的依赖，以及样式文件和脚本文件。设计是屏幕80%高度为canvas绘制区域，20%高度是操作栏以及展示分数区域.

1.         贪吃蛇                    
2.         
3.   
4.             

复制代码

stylesheet.css

1. * {  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

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

复制代码

1.绘制格子

注意的点（遇到的问题以及解决方案）：

• canvas绘制的路线是无宽度的，但线条是有宽度的。比如：从(0, 0)到(0, 100)绘制一条宽度为10px的线，则线条一半是在区域外看不见的。处理方案是起点偏移，比如：从(0, 0)到(0, 100)绘制一条宽度为10px的线，改为从(5,0)到(5,100)，偏移量为线条宽度的一半。
  
• 用样式定义canvas的宽高坐标会被拉伸，处理方案是给canvas元素设置宽高属性，值为它当前的实际宽高。
  

代码

main.js
[code]$(function () {  var LINE_WIDTH = 1 // 线条宽度  var LINE_MAX_NUM = 32 // 一行格子数量  var canvasHeight = $('canvas').height() // 获取canvas的高度  var canvasWidth = $('canvas').width() // 获取canvas的宽度  var gridWidth = (canvasWidth - LINE_WIDTH) / LINE_MAX_NUM // 格子宽度，按一行32个格子计算  var num = { w: LINE_MAX_NUM, h: Math.floor((canvasHeight - LINE_WIDTH) / gridWidth) } // 计算横向和纵向多少个格子，即：横坐标的最大值和纵坐标的最大值  /** * 绘制格子地图 * @param graphics */  function drawGrid(graphics) {    var wNum = num.w    var hNum = num.h    graphics.setStrokeStyle(LINE_WIDTH).beginStroke('#ffac52')    // 画横向的线条    for (var i = 0; i