使用JavaScript进行游戏开发

我们可以使用 CSS 3 scaleX 来翻转图像，但这会损害游戏性能。EASEJS 为我们提供了解决这个问题的方案，我们可以使用 addFlippedFrames 函数。addFlippedFrames 通过水平、垂直或同时翻转原始帧来扩展现有的精灵表，并添加适当的动画和帧数据。翻转后的动画名称将附加后缀（_h、_v、_hv，根据情况）。确保在调用此方法之前精灵表图像已完全加载。

所以在创建玩家对象之前，让我们添加以下行：

//( spriteSheet  horizontal  vertical  both ) 
createjs.SpriteSheetUtils.addFlippedFrames(playerSprite, true, false, false); 

start 函数应该如下所示：

function start() {
stage = new createjs.Stage(id("gameCanvas"));

var playerSprite = new createjs.SpriteSheet({
	animations:
	{
		"walk": [0, 9, null, frequency],
		"fall": [10, 21, null, frequency],
		"jump": [22, 32, null, frequency],
		"gamgam": [34, 64, null, frequency],
		"stand": [44, 44, null, frequency],
		"special_combo": [22, 32, "gamgam"]
	},
	images: [playerImage],
	frames:
		{
			height: playerWH,
			width: playerWH,
			regX: 0,
			regY: 0,
		}
});

createjs.SpriteSheetUtils.addFlippedFrames(playerSprite, true, false, false);

var fps = parseInt(id("fps").value);
var velocity = parseInt(id("velocity").value);

player = new createjs.BitmapAnimation(playerSprite);
player.x = id("gameCanvas").width / 2;
player.y = id("gameCanvas").height - playerWH;
player.vX = velocity;
_action = "walk";
player.gotoAndPlay("walk");

stage.addChild(player);

createjs.Ticker.setFPS(fps);
createjs.Ticker.useRAF = true;
createjs.Ticker.addEventListener("tick", tick);
}

在使用 addFlippedFrame 函数后，每个动画（动作 - 跳跃、行走等）都将复制一份以支持其他视图，翻转视图的名称末尾将带有 _h。因此，如果您想使用翻转图像向左行走，则需要调用 gotoAndPlay 函数并传入 "walk_h" 动作名称。

function tick() {
    if (_action.indexOf("walk") != -1) {
        if (player.x >= id("gameCanvas").width - playerWH) {
            // You reached the end -  We need to walk left
            player.direction = -90;
            player.gotoAndPlay("walk")
        }
        if (player.x < playerWH) {
            // You reached the end -  We need to walk right
            player.direction = 90;
            player.gotoAndPlay("walk_h");
        }
        // Moving the sprite based on the direction & the speed
        player.direction == 90 ? player.x += player.vX : player.x -= player.vX;
    }
    stage.update();
}  

查看演示

第四部分 - 创建游戏环境

在第三部分中，我们学习了如何在游戏空间中移动玩家，以及翻转玩家动画以支持水平和垂直视图。

在本帖中，我们将讨论游戏“氛围”，通过向游戏中添加背景和其他元素，但不仅仅是静态图像，而是动画图像，这将创造一个生动的游戏氛围。

在我们开始设计游戏之前，让我们先花点时间谈谈 PreloadJS 库，它也属于 CreateJS（EaseJS 也属于该库）。

PreloadJS 为 HTML 应用程序的内容预加载提供了一种一致的方式。预加载可以使用 HTML 标签和 XHR 进行。

所以，让我们向我们的 HTML 页面添加一个额外的 JavaScript 文件：

<script type="text/javascript" src="js/preloadjs-0.3.0.min.js"></script>  

现在，让我们添加一个名为 start 的额外函数 - 这个函数将负责在游戏开始之前加载所有游戏资源：

 function start() {           
    manifest = [
        { src: "assets/sky.png", id: "sky" },
        { src: "assets/ground.png", id: "ground" },
        { src: "assets/logo.png", id: "sun" },
        { src: "assets/hill.png", id: "hill" }
    ];
    loader = new createjs.LoadQueue(false);
    loader.onFileLoad = handleFileLoad;
    loader.onComplete = handleComplete;
    loader.loadManifest(manifest);
}  

正如您所见，我们定义了一个 manifest 对象（可以是任何名称），在该对象内，我们定义了在开始游戏之前所需的所有资源。

下载完成后，将调用 onComplete 事件，对于每个资源，将调用 onFileLoad 事件。

下面的代码会将每个资源添加到 assets 数组中：

var assets = [];
function handleFileLoad(event) {
    assets.push(event.item);
}  

在我们继续将图形实现到游戏中之前，让我们先看看它。

如图所示，这是地面的一小部分 - 我们将看到如何轻松地复制它来创建一个连续的地面贯穿整个游戏。

Name
地面
山丘
太阳
天空

所有资源都已添加到 assets 数组后，我们就可以开始将它们放置在游戏中了。

让我们开始放置地面图像，地面应该在整个游戏宽度上重复，这样它看起来就像一个连续的地板。第一步是创建一个新的 Shape 对象，其中包含地面图像。从下面的代码可以看出，Shape 对象的 w 属性设置为游戏宽度，这不会拉伸图像，而是在整个宽度上重复它。

最后，我们将地面 Shape 添加到 stage 中。

查看演示 4.1 

function handleComplete() {
    buildPlayerSprite();
    for (var i = 0; i < assets.length; i++) {
        var item = assets[i];
        var _id = item.id;
        var result = loader.getResult(_id);
        if (item.type == createjs.LoadQueue.IMAGE) {
            var bmp = new createjs.Bitmap(result);
        }
        switch (_id) {          
            case "ground":
                ground = new createjs.Shape();
                var g = ground.graphics;
                g.beginBitmapFill(result);
                g.drawRect(0, 0, w, 79);
                ground.y = h - 79;
                break;          
        }
    }
    stage.addChild(ground, player);
    player.gotoAndPlay("walk_h");
    
    var fieldValue = id("fps");
    var fps = parseInt(fieldValue.value);
    createjs.Ticker.setFPS(fps);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.addEventListener("tick", tick);
}  

查看演示 4.1 

从演示中可以看到玩家正在连续的地面上奔跑，但我们希望创建移动效果，使其看起来像是地面随着玩家一起移动。

要创建这种效果，我们需要更新 tick 函数并更改地面的 x 属性。

function tick() {
          var outside = w + 20;
        var position = player.x + player.vX;
        player.x = (position >= outside) ? -200 : position;
        ground.x = (ground.x - 10);
    }
    stage.update();
} 

查看演示 4.2

现在我们可以看到地面随着玩家移动，但是地面在右侧被切断了，因为它不够长，所以我们需要增加地面的 Shape 宽度。

case "ground":
   ground = new createjs.Shape();
   var g = ground.graphics;
   g.beginBitmapFill(result);
   g.drawRect(0, 0, w+330, 79);
   ground.y = h - 79;
   break; 

上面的代码显示地面 Shape 的宽度现在等于 w+330，这只是解决方案的一部分，因为地面 Shape 将从屏幕上消失。为了完全解决这个问题，我们需要通过添加我们添加的附加宽度的模数来更新 tick 函数。

这将确保地面完整地保留在游戏边界内。

ground.x = (ground.x - 10) % 330; 

查看演示 4.3 

现在我们了解了如何将对象添加到游戏舞台并创建效果和形状操作的基本示例，我们可以添加其余的游戏对象了。

* 注意 - 我添加了以下事件 - stagemousedown - 用于知道用户何时点击了游戏舞台。

function handleComplete() {
    buildPlayerSprite();
    for (var i = 0; i < assets.length; i++) {
        var item = assets[i];
        var _id = item.id;
        var result = loader.getResult(_id);
        if (item.type == createjs.LoadQueue.IMAGE) {
            var bmp = new createjs.Bitmap(result);
        }
        switch (_id) {
            case "sky":
                var g = new createjs.Graphics()
                g.beginBitmapFill(result);
                g.drawRect(0, 0, w * 2, h)
                sky = new createjs.Shape(g);
                break;
            case "ground":
                ground = new createjs.Shape();
                var g = ground.graphics;
                g.beginBitmapFill(result);
                g.drawRect(0, 0, w + 330, 79);
                ground.y = h - 79;
                break;
            case "hill":
                hill = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0, 0, w, 159));
                hill.x = 0;
                hill.scaleX = 3;
                hill.y = 163;
                break;
            case "sun":
                var g = new createjs.Graphics();
                g.beginBitmapFill(result);
                g.drawRect(0, 0, 129, 129);
                sun = new createjs.Shape(g);
                sun.x = w;
                sun.y = 37;
                break;
        }
    }
    stage.addChild(sky, ground, hill, sun, player);
    player.gotoAndPlay("walk_h");
    stage.addEventListener("stagemousedown", function () {
        play("jump_h");
    });
    var fieldValue = id("fps");
    var fps = parseInt(fieldValue.value);
    createjs.Ticker.setFPS(fps);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.addEventListener("tick", tick);
} 

最后，就像我们为地面 Shape 所做的那样，我们需要更改 tick 函数来操作这些对象。
 
这次我们添加了另一个参数来计算何时一个对象放置在游戏边界之外，一旦一个对象离开了游戏边界，我们就可以改变它的 x 属性并将其返回到游戏中。

 function tick() {
    if (_action.indexOf("walk") != -1 || _action.indexOf("jump") != -1) {
        var outside = w + 20;
        var position = player.x + player.vX;
        player.x = (position >= outside) ? -200 : position;
        sky.x = (sky.x - 5) % w;
        hill.x = (hill.x - 2) % w;
        ground.x = (ground.x - 10) % 330;
        sun.x = (sun.x - 1);
        if (sun.x <= -135) { sun.x = outside + 50; }
    }
    stage.update();
} 

查看演示 

第五部分 - 碰撞与跳跃

现在进入本教程的最后一部分，对象碰撞。

对于这个游戏，我们想创建一个基本的逻辑来处理对象碰撞 -> 如果玩家碰到岩石对象，游戏应该停止，玩家应该死亡（不是真的... ）。

我们将岩石对象添加到我们的 Stage 中（步骤 4），方法是在 handleComplete 函数下添加以下代码：

case "rock":
    var g = new createjs.Graphics()
    g.beginBitmapFill(result);
    g.drawRect(0, 0, 45, 44)
    rock = new createjs.Shape(g);
    rock.y = h - 119;
    rock.x = w;
    rock.height = 44;
    rock.width = 45;
    break;

现在，要在游戏中显示岩石，请添加以下代码。

 stage.addChild(sky, ground, hill, sun, player, rock); 

现在我们游戏中有了岩石对象，我们应该允许玩家跳跃以避免碰到岩石。要做到这一点，我们需要注册 stagemousedown 事件来捕获鼠标点击事件，一旦事件被调用，我们将播放跳跃动画并将 isJumping 对象设置为 true。

我们将以下代码放在 handleComplete 函数中，就在 setFPS 函数之前。

 stage.addEventListener("stagemousedown", function () {
    if (isJumping) return;
    play("jump_h");
    gameOver = false;
    isJumping = true;
});  

下一步是改变玩家跳跃时的 Y 值，以便跳到岩石上方。以下代码不是完成此任务的最佳方法，但对于本教程来说它简单快捷。

代码检查我们的玩家是否不在空中（以避免双重跳跃），并启动一个计时器，该计时器将在 1 秒后结束。一旦计时器完成，它将把玩家带回地面，但在此之前，它会将 Y 值增加 4 像素。当玩家在空中且达到最大高度时，计时器将 Y 值减少 4 像素。

function handleJump() {
    if (isJumping) {
        if (onTheAir == null) {
            onTheAir = setTimeout(function () {
                isJumping = false;
                player.y = playerBaseY;
                onTheAir = null;
                goingDown = false;
                top = false;
            }, 1000);
        }
        if (goingDown && player.y <= playerBaseY) {
            player.y += 4;
        }
        else {
            player.y -= 4;
            if (player.y <= maxJumpHeight)
                goingDown = true;
        }
    }
}  

要调用此代码，请在 tick 函数下添加以下代码：

function tick() {
    handleJump();
    ...
}  

现在我们可以通过在游戏上单击鼠标左键来执行跳跃。

最后一步是应用对象碰撞，所以如果玩家碰到岩石，我们需要停止游戏并播放 fall 动画。我建议您阅读 Object/Object Intersection 以查找和理解您可以进行对象碰撞的不同方法。

 function checkRectIntersection(r1, r2) {
    var deltax = r1.x - r2.x;
    var deltay = r1.y - r2.y;
    var dist = 25;
    if (Math.abs(deltax) < dist && Math.abs(deltay) < dist) {
        if (Math.sqrt(deltax * deltax + deltay * deltay) < dist) {
            return true;
        }
    }
    return false;
} 

添加 HandleCollision 函数，该函数将由 tick 函数每次调用以检查碰撞：

function HandleCollisions() {
    var a = getCollideableItemBounds(player);
    var b = getCollideableItemBounds(rock);

    var oppss = checkRectIntersection(a, b);

    if (oppss && !gameOver) {
        console.log(oppss);
        gameOver = true;
        play("fall_h");
    }
} 

查看演示 - 最终 

尽情享用！