实体对象将存储所有我们需要在游戏地图上绘制对象的信息。 实体将使用 V(向量)属性支持位置,方向,甚至运动。 我也引进了 friction 属性他会随着时间慢慢减少运动矢量,所以当玩家在地图上移动他们不会无限制的漂走下去。

在正确的位置画游戏实体,我们使用 translate()函数转换我们的map-relative的 x 和 Y 坐标到view-relative坐标。 使用这种结合 if 声明,检查实体是否在当前的“视图”,我们可以在只有当他们出现在球员附近时绘制我们的游戏对象。

图像和动画

目前,我们的游戏实体只能在我们的游戏地图渲染成简单的矩形。取而代之, 我们想用图片甚至动画给我们的游戏内容带来活力。 我们可以使用 动画精灵将这种支持添加到游戏实体 ,它是用于游戏开发的一种普遍的技术。 我们的游戏对象将使用如下图的图片渲染。

这个单一映像都包含 组成对象不同状态的帧 。 从左到右,第一帧是我们飞船的 静止状态,紧随其后的是两个 向前的推力 帧,然后是两个 逆冲断层 帧,最后两个紧随其后 涡轮增压 帧。 我们可以通过添加支持这些精灵动画改善我们的脚本。

// load images game.resources = []; game.load = function(images){ // load image from url var loadFromUrl = function(url){ var img = new Image(); img.src = '/path/to/images/' + url + '.png'; game.resources[url] = { image: img, loaded: false }; img.onload = function(){ game.resources[url].loaded = true; }; }; // accept array or single resource if(images instanceof Array){ for(var i = 0; i < images.length; i++){ loadFromUrl(images[i]); } } else{ loadFromUrl(images); } }; // sprites game.sprite = function(options){ // settings var sprite = this; sprite.settings = { image: false, alpha: 1, x: 0, y: 0, w: 0, h: 0, speed: 0.02, // .001 = 1 frame/second frames: [], index: 0, dir: 'horizontal', loop: true }; sprite.settings = merge(sprite.settings, options); // update sprite.update = function(d){ sprite.settings.index += sprite.settings.speed * d; }; // draw sprite.draw = function(x, y, w, h){ // determine which frame to draw var frame = 0; if(sprite.settings.speed > 0){ var max = sprite.settings.frames.length; var idx = Math.floor(sprite.settings.index); frame = sprite.settings.frames[idx % max]; if(!sprite.settings.loop && idx > max){ var frame = sprite.settings.frames[sprite.settings.frames.length - 1]; } } // set new position if(sprite.settings.dir == 'vertical'){ sprite.settings.y = frame * sprite.settings.h; } else{ sprite.settings.x = frame * sprite.settings.w; } // render game.ctx.drawImage(sprite.settings.image, sprite.settings.x, sprite.settings.y, sprite.settings.w, sprite.settings.h, x, y, w, h); }; }; // load images game.load([ 'ship', 'star-small', 'star-large' ]); // add sprites to player game.player.settings.sprites['rest'] = new game.sprite({ image: game.resources['ship'].image, w: 32, h: 40, frames: [0], speed: 0 }); game.player.settings.sprites['forward'] = new game.sprite({ image: game.resources['ship'].image, w: 32, h: 40, frames: [1, 2] }); game.player.settings.sprites['reverse'] = new game.sprite({ image: game.resources['ship'].image, w: 32, h: 40, frames: [3, 4] }); game.player.settings.sprites['boost'] = new game.sprite({ image: game.resources['ship'].image, w: 32, h: 40, frames: [5, 6] });

 game.sprite() 对象允许我们快速指定sprite图像的宽度、高度、速度和方向。 使用这个函数,我们可以扩展我们的 实体() 对象包括支持sprite图像。  game.load() 函数处理图像加载,这样我们可以在游戏开始之前预加载图片。

键盘交互

最后给我们的游戏添加键盘交互脚本。 随着游戏开发, 独立跟踪keyup 和 keyDown 事件变得非常容易。 我更喜欢创建键码数组,可以在任何时间检查我们的脚本以查看特定的键是否在当前按下。 我们可以添加一点脚本做到这一点:

// keyboard game.keys = []; game.keydown = function(e){ game.keys[e.keyCode] = true; }; game.keyup = function(e){ game.keys[e.keyCode] = false; }; // listen window.addEventListener('keydown', game.keydown, false); window.addEventListener('keyup', game.keyup, false);

这个函数允许我们跟踪每一个键盘事件。 例如,如果我们想知道在任何时候left-arrow-key是否松开,我们可以检查 game.keys[37] ,当松开这个键这将返回 true, 在其他情况返回undefined 。 我们可以在每次game.update()执行时通过运行一个新的函数好好利用这个功能。

game.keypress = function(d){ // boost var boost = 1; if(game.keys[16]){ boost = 3; } // thrust if(game.keys[40]){ game.player.settings.v.x += Math.cos((game.player.settings.o - 270) * Math.PI / 180) * 0.002 * game.player.settings.speed * d; game.player.settings.v.y += Math.sin((game.player.settings.o - 270) * Math.PI / 180) * 0.002 * game.player.settings.speed * d; game.player.settings.status = 'reverse'; } else if(game.keys[38]){ game.player.settings.v.x += Math.cos((game.player.settings.o - 90) * Math.PI / 180) * 0.004 * (game.player.settings.speed * boost) * d; game.player.settings.v.y += Math.sin((game.player.settings.o - 90) * Math.PI / 180) * 0.004 * (game.player.settings.speed * boost) * d; game.player.settings.status = 'forward'; if(game.keys[16]){ game.player.settings.status = 'boost'; } } // rotate if(game.keys[37]){ game.player.settings.o -= (0.15 / boost) * d; if(game.player.settings.o < 0){ game.player.settings.o = 360 - game.player.settings.o; } else if(game.player.settings.o > 360){ game.player.settings.o = 0 + game.player.settings.o; } } if(game.keys[39]){ game.player.settings.o += (0.15 / boost) * d; if(game.player.settings.o < 0){ game.player.settings.o = 360 - game.player.settings.o; } else if(game.player.settings.o > 360){ game.player.settings.o = 0 + game.player.settings.o; } } };