在我上一篇创造<canvas>艺术的帖子中,我介绍了使用HTML5< canvas>API来创建一个随机生成的“北极光”动画。产生动画的效果完全是审美。除了生成颜色和形状它没有提供交互性。在这篇文章中,我们将使用相同的技术介绍原文,但扩展我们的例子介绍键盘输入和操作以创建一个完整的互动游戏。　　　　
我们将创建一个游戏我将他称之为Space。这是一个简单的游戏,你可以使用键盘操作一个二维地图的恒星和行星。为了简便起见,完整的脚本将在这篇文章的底部,我将从脚本片段解释这些到底是什么。

游戏“循环”

游戏开发的最重要的元素是游戏”循环。 “从本质上讲,只要游戏一直持续，这是一个将不断重复的函数。 我们的游戏循环就像我们在前面的帖子里使用的动画循环,附加一些关键的补充。 这里没有太多的细节,游戏循环脚本看起来是这样的:

<canvas></canvas>

// game function game(){ // configuration var game = this; game.canvas = document.getElementById('space'); game.ctx = game.canvas.getContext('2d'); game.time = false; // initialize game.init = function(){ // start the game loop game.loop(); }; // game loop game.loop = function(){ // timing var now = new Date().getTime(); var d = now - (game.time || now); game.time = now; // update positions, view, etc. game.update(d); // render game.render(d); // request next frame requestAnimationFrame(game.loop); }; // update game game.update = function(d){ // 1. update player position // 2. update view }; // render game game.render = function(d){ // 1. clear the canvas // 2. draw background // 3. draw stars, planets // 4. draw player }; } // begin game var space = new game(); space.init();

有了这个基本结构之后,我们开始添加更具体的功能到脚本来处理动作,动画和玩家互动。

游戏视图

第一个挑战是创建一个可滚动的地图,玩家可以在上面移动。 我们的地图将包含对象比如行星和恒星,但并不是每个星星都将在任何给定的时间可见。 只有那些接近的玩家的星星将在在canvas上绘制。 这是通过创建一个游戏视图来实现的 。 因为这是一个二维游戏,我们可以考虑根据游戏视图的 x 和 Y 轴。 它看上去是这样的:

正如你所看到的,星星1和2在游戏视图是可见的,但是星星3不可见。 当玩家在地图上 x 和 Y 轴移动,视图将基于球员的位置显示新地图更新内容。在我们的脚本中,我们可以通过将下面的代码增加到game()函数来创建游戏试图。

// configuration game.width = 0; game.height = 0; game.view = { x: 0, y: 0 }; // resize canvas game.resize = function(){ game.ctx.canvas.width = game.canvas.width; game.ctx.canvas.height = game.canvas.width; game.width = game.canvas.width; game.height = game.canvas.width; };

结合使用的 game.width , game.height , game.view.x , game.view.y ,我们可以跟踪我们的试图,总是在游戏canvas上绘制正确的对象。 当我们将运动和对象添加到我们的地图, 每次渲染一个对象我们将会参考我们的游戏视图。

恒星、行星,飞船,哦我的天

基本动画和视图结构,是时候用恒星,行星,和飞船只来填充我们的游戏世界，最后构成一个游戏。 最好是创建一个通用的 实体 对象,我们可以使用它来将所有对象放在我们的地图。 我们的实体将为每个映射对象存储信息,包括它的位置( x 和 Y ),大小( 宽度 和 高度 )、方位和运动矢量。

 // translate coordinates

game.translate = function(x, y){ return { x: (game.width / 2) - game.view.x + x, y: (game.height / 2) - game.view.y + y } }; // entity game.entity = function(options){ // settings var entity = this; entity.settings = { x: 0, // x position y: 0, // y position w: 20, // width h: 20, // height o: 0, // orientation v: { x: 0, y: 0 }, // vector f: 0.0004, // friction speed: 1, color: { red: 0, green: 0, blue: 0, alpha: 0 } }; entity.settings = merge(entity.settings, options); // update entity.update = function(d){ // update position entity.settings.x += (entity.settings.v.x / 10) * d; entity.settings.y += (entity.settings.v.y / 10) * d; // friction entity.settings.v.x -= entity.settings.v.x * entity.settings.f * d; entity.settings.v.y -= entity.settings.v.y * entity.settings.f * d; }; // draw entity.draw = function(d){ // only draw when in view if(entity.settings.x - (entity.settings.w / 2) <= game.view.x + (game.width / 2) && entity.settings.x + (entity.settings.w / 2) >= game.view.x - (game.width / 2) && entity.settings.y - (entity.settings.h / 2) <= game.view.y + (game.height / 2) && entity.settings.y + (entity.settings.h / 2) >= game.view.y - (game.height / 2)){ // get translated coordinates var t = game.translate(entity.settings.x, entity.settings.y); // orientation game.ctx.save(); game.ctx.translate(t.x, t.y); game.ctx.rotate(entity.settings.o * Math.PI / 180); // color game.ctx.fillStyle = 'rgba(' + entity.settings.color.red + ', ' + entity.settings.color.green + ', ' + entity.settings.color.blue + ', ' + entity.settings.color.alpha + ')'; // draw entity game.ctx.beginPath(); game.ctx.rect(0 - (entity.settings.w / 2), 0 - (entity.settings.h / 2), entity.settings.w, entity.settings.h); game.ctx.fill(); // reset orientation game.ctx.restore(); } }; }; // create player game.player = new game.entity({ x: 0, y: 0, w: 32, h: 40 }); // create a star at a random location var star = new space.entity({ x: Math.floor(Math.random()*5000)*(Math.round(Math.random())*2-1), y: Math.floor(Math.random()*5000)*(Math.round(Math.random())*2-1), w: 5, h: 5 });