HTML 5 canvasで簡単なゲームを作る

先日キャンバスcanvasで小さなゲームを作ることを学びましたが、canvasで作る手順をいくつか説明します.
1.Canvasオブジェクトを作成する
           
コードにはJSで動的に作成されたキャンバスが入っていますが、HTMLページでキャンバスを作成してからdocument.getELementById()
取得するには、この2つの方法には違いはありませんが、どちらに慣れているかを見てみましょう.

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

2.画像を読み込む
コードのbgReadyは、画像が完全にロードされているかどうかを識別するために使用されます.画像のロードが完了した後にのみ使用できます.ロードが完了する前に描画またはレンダリングされると、JSはDOM errorのエラーを報告します.
私たちは3枚の画像(背景、英雄、怪物)を使います.それぞれの画像はこのように処理する必要があります.

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

ここで注意しなければならないのは、bgImage.srcをbgImage.onloadの後に書くのはIE表示のバグを解決するためなので、皆さんはこのように書くことをお勧めします.
3.ゲームで使用するオブジェクトの定義
        
いくつかの変数を定義し、後で使用します.heroオブジェクトのspeedプロパティは、ヒーローの移動速度(ピクセル/秒)を表します.monsterオブジェクトは移動しないので、座標が1対しかありません.monstersCaughtはプレイヤーが捕まえたモンスターの数を表します.
4.プレイヤー入力処理
ユーザがどのキーを押したのか,キーボードイベントで処理し,押したキーのkeyCodeを空のオブジェクトKeysDownに保存する.この変数にキー符号化がある場合、ユーザは現在このキーを押していることを示す.
5.新しいゲーム
reset関数を呼び出すことで新しいゲームを開始します.この関数は、ヒーロー(プレイヤーキャラクタ)を画面の真ん中に配置し、ランダムにモンスターを配置する位置を選択します.
6.オブジェクトの更新

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;
	    }

updateにはmodifierパラメータがあります.modifierパラメータは、1から始まる時間に関する数です.間隔がちょうど1秒の場合、その値は1であり、ヒーローが移動する距離は256ピクセル(ヒーローの速度は256ピクセル/秒)である.間隔が0.5秒の場合、その値は0.5であり、英雄が移動する距離は速度の半分である.
7.レンダーオブジェクト
update関数は変更された値に相当し、render関数はパターンを描き、あなたの行動が見えるとゲームが面白くなります.まず背景画像をcanvasに描き、英雄と怪物に描きます.表層にある画像は、その下にある画素を上書きするので、順番に注意してください.
8.ゲームメインサイクル
ゲームのメインサイクルは、ゲームの流れを制御するために使用されます.まず、現在の時間を取得しなければなりません.そうすれば、時間差を計算することができます.その後modifierの値を計算しupdateに渡します.最後にrenderを呼び出してレコードを更新する時間.
9.ゲーム開始

	var then = Date.now();
	reset();
	main();

resetを呼び出して新しいゲームを開始します.次に、開始時間を変数thenに保存し、ゲームのメインサイクルを開始します.