图
前言
当下如火如荼的微信小游戏，简单且好玩，自己体验了一下像跳一跳这样的游戏。作为一名开发人员，当然也想自己开发款小游戏。
今天我们用 js 再现经典。自己也搜集一些资料来开发了 Mario 游戏。
mario 对我来说，可能是我们这代人来说，已经超越游戏其本身，他带来了一些儿时美好的回忆，记得当时在同学家需要登上 20 分钟，才能玩上一把。那时内向腼腆的我，为了能玩上，也得厚着脸皮去同学家，就是为了玩一会儿 mario。这说明他对于我有多大的魅力。带着童年梦想，今天和大家一起开发 mario。有机会希望能够发布到微信小游戏。
目标：完成此课程后，可以独立用 js 开发可以在红白机上运行的经典游戏。
基本要求：了解 javascript 以及 html5 新技术。
开发环境 : 推荐 chrome 浏览器，visual studio code 开发工具，安装 nodejs。
课程内容：不借助任何游戏引擎，全面独立完成 Mario 的开发。与以往分享 web 前端项目不同，项目会深入 javascript 并且会到许多游戏中常有算法，例如碰撞检测，AI ，最短路径，相对要难懂一些，我尝试将这些点解释清楚。
1. 建立项目
创建一个文件夹，命名为 mario
然后在终端（如果您是 windows 用户 cmd 和 powershell 都可以）导航到这个创建好的文件夹下，运行 npm init -y (初始化项目命令 -y 代表接受默认值）如果不用 -y 需要一项一项填写项目信息例如名称 主入口文件等...
使用 npm init -y 创建新的项目，在创建好的目录下会自动生成一个 package.json 文件如图
图1
2. 现在用您熟悉IDE 或我推荐 visual studio code 打开刚刚创建好的创建一个项目文件夹 public，在 public 下创建 index.html 然后写个 hello 来测试项目，我们项目需要运行在服务器端，才可以看到效果。这是我们为什么需要安装 nodejs 的原因。
图2
这里我将介绍两种方式来启动服务，以运行这个项目
1. 在visual studio code 的插件中，安装 live server 来运行项目
2. 需要在全局安装 live-server ，安装非常简单，只要执行 npm install -g live-server 即可。然后在public 目录下运行 live-server --port=3000 （port 参数用于指定端口号）
（图中为如何在 visual studio code 安装 live server 插件）
运行命令后启动服务便可在浏览器看到效果，好处当修改代码会实时看到效果
3.创建 canvas，游戏都是在 canvas（画布）中完成，他是 html5 的重要的新特性，也是 flash 的终结者。
4. 创建我们主文件 main.js
这里介绍一个新特性，大家可能已经注意到了 script 标签中的 type=“module” ，设置了这个属性我们不需要 requirejs 这样工具，也可以完成 js 各个文件之间依赖（引用）。注意只用较高版本 chrome 浏览器才支持这个特性。
图5
5. 这里测试一下我们 canvas 。有关如何使用 canvas ，这里不作为讲解的内容，默认大家已经熟悉基本语法。这里在 canvas 0,0 (以左上角为 0 点坐标）画一个 50 大小的正方形
图6
效果如图
图7
6. 现在准备以一张图片，这样图片包含游戏中物件和背景所有元素
图8
7. 创建加载图片的方法，这里用到 es6 新语法 promise 和 arrow 函数（好处我们不想担心函数中 this 的引用了）
图9
调用方法将图片画到画布上，有关 drawImage API 的使用大家，如果不了解可以自己查一查。
图11
看效果
图12
9 虽然将图片画到画布上了，可是这不是我们想要效果。我们可以只需要图片一部分，我尝试将图片一部分画到画布上。然后一小部分拼接成图片。
10 让我在这里给大家一个思路，如果对于游戏或动画还不了解的朋友，对于有些术语理解可能有些困难，这需要大家自己补一补。思路是这样的，我们需要获取一小块图片tile(就像家里装修，铺地砖我们需要获取一定尺寸的瓷砖，然后将他按设计好的图片铺满地面）
1. 构造函数接受图片，以及要绘制 tile 的大小作为参数。这里有个 map 将
2. define 方法我们定义出一个 tile 的 buffer（也就是读取图片，切出一块我们想要的小图。方法需要 tile 名称，以及 tile 在图片所在位置。如果我们需要小图在位置 0，0 我们就传入 0，0。
3， draw 方法是将我们准备好的缓存起来的小图画到指定的画布的（context）上，此处的位置参数要将图绘制到在画布上的位置，名称是用于确定我们要绘制哪个 tile。是 map 缓存图片的兼职对
图15
然后调用方法绘制图片
图
看图片大家可能会更好理解这些参数用途。思路是将引入的图片切割小的图片，获取图片方法就是根据小图块在原图中的坐标和图块的大小，然后
图
请大家多多支持我的微信公众号，这里有更多更快的文章 小马学编程
网友评论