簡単なHTML 5 Canvasの小さなゲームを開発する方法

原文:How to make a simple HTML 5 Canvas game
HTML 5 Canvasの小さいゲームの開発を素早く手に入れたいですか?以下、一例を用いてハンドヘルド教育を行う.(私の経歴を疑うなら、A Wizard's Lizardというゲームの半数以上の開発は私が完成した)
ソースコードのgameを直接見てみましょう.js、もちろんオンラインでゲームを体験することもできます.
ゲームのスクリーンショット
キャンバスの作成

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

まず、ゲームの舞台としてキャンバスを作成する必要があります.ここでは、HTMLに直接要素を書くのではなく、JSコードでコード作成を説明するのも便利です.キャンバスがあればコンテキストを取得して描画できます.キャンバスサイズも設定し、最後にページに追加します.
画像の準備

//     
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "images/background.png";

ゲームには画像が欠かせないので、まずいくつかの画像をロードします.簡単に言えば、ここでは単純なピクチャオブジェクトのみを作成し、クラスやHelperを書いてピクチャロードを行うのではありません.bgReadyこの変数は、画像のロードが完了したかどうかを識別するために使用され、画像のロードが完了していない場合に描画を行うとエラーが報告されるため、安心して使用することができる.
ゲーム全体で使用する3枚の画像:背景、英雄、怪物は私たちが上の方法で処理します.
ゲームオブジェクト

//     
var hero = {
    speed: 256, //        
    x: 0,
    y: 0
};
var monster = {
    x: 0,
    y: 0
};
var monstersCaught = 0;

後で使用するオブジェクトを定義します.私たちの には、彼が毎秒どれだけの画素を移動するかを制御するためのspeed属性があります. ゲーム中は移動しないので、座標属性だけで十分です.monstersCaughtは、モンスターが捕まった回数を格納するために使用されます.
ユーザーの入力処理

//     
var keysDown = {};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);

今からユーザーの入力を処理します(ゲーム開発に初めて触れた先端の学生にとって、この部分は頭が必要になるかもしれません).フロントエンド開発では,ユーザがクリックイベントをトリガーしてからアニメーションを実行したり,非同期リクエストを開始したりするのが一般的であるが,ここではゲームの論理がよりコンパクトになり,入力にタイムリーに応答することを望んでいる.すぐに応答するのではなく、ユーザーの入力を保存します.
このため、ユーザが押下したキー値(keysDown)をkeyCodeというオブジェクトで保存し、押下したキー値がこのオブジェクトにあれば、対応する処理を行う.
ゲームを始める

//                  
var reset = function () {
    hero.x = canvas.width / 2;
    hero.y = canvas.height / 2;

    //              
    monster.x = 32 + (Math.random() * (canvas.width - 64));
    monster.y = 32 + (Math.random() * (canvas.height - 64));
};

resetメソッドは、新しいラウンドとゲームを開始するために使用されます.このメソッドでは、ヒーローをキャンバスの中心に戻し、モンスターをランダムな場所に置きます.
オブジェクトの更新

//          
var update = function (modifier) {
    if (38 in keysDown) { //      ↑
        hero.y -= hero.speed * modifier;
    }
    if (40 in keysDown) { //      ↓
        hero.y += hero.speed * modifier;
    }
    if (37 in keysDown) { //      ←
        hero.x -= hero.speed * modifier;
    }
    if (39 in keysDown) { //      →
        hero.x += hero.speed * modifier;
    }

    //          ？
    if (
        hero.x <= (monster.x + 32)
        && monster.x <= (hero.x + 32)
        && hero.y <= (monster.y + 32)
        && monster.y <= (hero.y + 32)
    ) {
        ++monstersCaught;
        reset();
    }
};

これがゲーム中に画面を更新するためのupdate関数であり,規則的に繰り返し呼び出される.まず、ユーザーが現在押しているのは中方向キーであることを確認し、ヒーローを対応する方向に移動します.
少し頭が痛いのは、このmodifier変数かもしれません.mainの方法でソースを見ることができますが、ここでは詳しく説明する必要があります.これは1に基づいて開始され、時間とともに変化する因子である.例えば1秒が過ぎて、その値は1で、英雄の速度は1を乗じて、つまり毎秒256画素を移動します.半秒の値が0.5の場合、ヒーローの速度に0.5を乗じます.つまり、この半秒以内にヒーローは通常の速度の半分の速度で移動します.理論的には、このupdateメソッドは非常に速く頻繁に呼び出されるため、modifierの値は小さいが、この因子があれば、私たちのコードが速くても遅くても、英雄の移動速度が一定であることを保証することができる.
現在、ヒーローの移動はユーザーの入力に基づいており、次に移動中にトリガーされたイベント、すなわちヒーローがモンスターと出会うことをチェックします.これが本ゲームの勝利点で、monstersCaught+1で新しいラウンドが再開されます.
レンダーオブジェクト(Render Objects)

//       
var render = function () {
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }

    if (heroReady) {
        ctx.drawImage(heroImage, hero.x, hero.y);
    }

    if (monsterReady) {
        ctx.drawImage(monsterImage, monster.x, monster.y);
    }

    //   
    ctx.fillStyle = "rgb(250, 250, 250)";
    ctx.font = "24px Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
};

前の仕事はすべて退屈で、あなたがすべてのものを描いた後まで.まずもちろん背景を描きます.そして法のように英雄や怪物も描き出す.この過程の順序にはこだわりがある.後に描いた物体が前の物体を覆うからだ.
その後、Canvasの描画コンテキストのスタイルを変更し、fillTextを呼び出して文字、すなわちスコアボードの一部を描画します.このゲームは他に複雑なアニメーション効果や戦闘シーンはなく、一部の大功を成し遂げました!
しゅじゅんかんすう

//      
var main = function () {
    var now = Date.now();
    var delta = now - then;

    update(delta / 1000);
    render();

    then = now;

    //        
    requestAnimationFrame(main);
};

上の主関数はゲーム全体の流れを制御します.まず、現在の時間を取得して時間差を計算します(最後にメイン関数が呼び出されたときから何ミリ秒が経過しましたか).modifierが得られた後、1000(すなわち1秒のミリ秒数)で割ってupdate関数に入力される.最後にrender関数を呼び出し、今回の時間を保存します.
ゲーム中のループアップ画面については「Onslautht!Arena Case Studio」を参照してください.
サイクルのさらなる解釈について

// requestAnimationFrame          
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

上のコードを完全に理解していなければ大丈夫ですが、説明するのはいつも素晴らしいと思います.main関数を循環的に呼び出すために、本ゲームの前にsetIntervalを使用した.しかし、requestAnimationFrameというより良い方法があります.新しい方法を使用するには、ブラウザの互換性を考慮しなければなりません.上のシムは、Paul Irishブログのオリジナルの簡略化されたバージョンであることを考慮しています.
ゲームを開始!

//   ，     ！
var then = Date.now();
reset();
main();

やっと完成しました.これは本ゲームの最後のコードです.まず、then関数を最初に実行するために初期の時間変数mainを設定する.reset関数を呼び出して新しいゲームを開始します(覚えているなら、この関数の役割は英雄を画面の真ん中に置くと同時に怪物をランダムな場所に置いて英雄が捕まえるのを便利にすることです).
これで、簡単なH 5ゲームを開発するために必要な基本的な勉強を身につけたと思います.このゲームやダウンロードコードを自分で研究しましょう:)