html游戏怎么做,HTML5 制做“游戏”的一个基本流程

怎样用HTML5 Canvas制作一个简单的游戏

为了让大家清楚HTML5制作游戏的简单流程，所以先了制作一个非常简单的游戏，来看一看这个过程。

游戏非常简单，无非就是英雄抓住怪物就得分，然后游戏重新开始，怪物出现在地图的随机位置，英雄初始化在地图的中间。点击这里，我们可以直接先玩玩这个游戏

1. 创建一个Canvas对象

这里相信大家都知道，当然代码里面是通过JS动态创建的画布，大家也可以直接在HTML页面上先创建画布，然后再通过document.getELementById()来获取，这两种方法没有什么区别，只是看你更习惯哪一种。

// 创建画布canvas,并获取画布上下文环境

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

canvas.width = 512;

canvas.height = 480;

document.body.appendChild(canvas);

2. 载入图片

游戏需要图像，所以让我们载入一些图片吧。我想尽量简单化，所以只用了Image对象来做，当然，还可以将载入图像的功能封装成一个类或别的任何形式。代码中的bgReady用来标识图片是否已完全载入，只有当图片载入完成后，