HTML5 スタートレックを自分で作成するためのサンプル コードを共有する

学習html5のcanvas3日目、物足りなさを感じて忘れてしまいましたあっという間にできたので、空き時間を利用して、プレイする小さなゲームを作成する準備をしました。ゲームはパフォーマンスに注意を払う必要があり、ユーザーによる変更可能性も考慮する必要があると思います。さて、シンプルですが興味深い旅を始めましょう—

最初に効果を確認したい場合は、ジャンプを試してみてください

最初のステップはもちろんキャンバスです

1 <canvas id="canvas" width="300" height="400">你的浏览器不支持Canvas</canvas>

JavaScript全体の構造は次のとおりです:

var定义一些变量
planeMoveTimer飞机移动监听/计时器
attackEnemyTimer发射炮弹计时器
onkeydown监听
onkeyup监听
drawPlane画飞机
drawEnemy画敌人

最初にいくつかの変数を事前定義します

var _keyA = _keyD = _keyW = _keyS = 0,  // 存储按键状态

    step = 8,                          // 飞机移动速率
    w = 34, h = 44,                  // 飞机实际大小
    planeX = 133, planeY = 356,      // 飞机目前位置
    planeSrc = "feiji.png",          // 飞机素材位置
    imgW = 177, imgH = 220,          // 飞机源图尺寸

    cw = 300, ch = 400,  // 画布大小
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

このゲームでは 1 つの外部リソース (画像) のみを使用します。アドレスを取得するには、次の場所にあるプロジェクトの GitHub の場所のリンクにアクセスしてください。この記事の一番下にジャンプ

最初に2つの描画方法を見てみましょう

rreee

飛行機の絵はonload()メソッドで描画できるはずです。現在の敵はまだオレンジ色の束です。動かないレンガをキャンバスの上部に描画します

次に、2 つのキーボード イベントを見てください:

function drawPlane(x, y) {
    var img = new Image();
    img.src = planeSrc;  // 飞机源图地址
    img.onload = function() {
        ctx.drawImage(img, 0, 0, imgW, imgH, planeX, planeY, w, h);
    }
}
function drawEnemy(){
    for(var a=0;a<cw;a+=10) {
        for(var b=0;b<ch-300;b+=10) {
            ctx.beginPath();
            ctx.fillStyle = "orange";
            ctx.strokeStyle = "black";
            ctx.strokeRect(a, b, 10 ,10);
            ctx.fillRect(a, b, 10, 10);
            ctx.closePath();
        }
    }
}

変数 _keyA、_keyD、_keyW、_keyS を直接設定する必要がある理由については、描画イベントをトリガーする場合、その理由は、2 つのキーを同時に長押しすると、イベントを同時にトリガーすることはできず、最初に押したキーは 1 回だけトリガーされ、最後に押したキーだけが常にイベントをトリガーできるためです。簡単に言うと、左上隅に移動して A と W を同時に押したい場合、A が W よりも少し遅いと仮定すると、その瞬間は の移動経路になります。航空機は最初に 1 ステップ上に移動し、次に左に移動します。これは明らかに私が望んでいることではありません。ボタンが押されたときのステータスを 1 に設定するために 4 つの変数を使用します。ボタンが押されたとき 立ち上がるときにステータスを 0 に設定し、タイマーを使用してこれらのキーのステータスを継続的に読み取り、時間内に航空機のステータスを更新します

航空機の移動タイマーは次のとおりです。

window.document.onkeydown = function(evt){
    evt = (evt) ? evt : window.event;
    switch(evt.keyCode) {
        case 65:  // A
            _keyA = 1;
            break;
        case 68:  // D
            _keyD = 1;
            break;
        case 87:  // W
            _keyW = 1;
            break;
        case 83:  // S
            _keyS = 1;
            break;
    }
}
window.document.onkeyup = function(evt){
    evt = (evt) ? evt : window.event;
    switch(evt.keyCode) {
        case 65:  // A
            _keyA = 0;
            break;
        case 68:  // D
            _keyD = 0;
            break;
        case 87:  // W
            _keyW = 0;
            break;
        case 83:  // S
            _keyS = 0;
            break;
    }
}

ctx.clearRect() を使用して、航空機の次の状態を描画する準備をします。ただし、ゲームに背景がある場合、大きな問題があります。と重複している場合は、航空機ではないものを削除する必要はありません。申し訳ありませんが、この問題は今のところ考慮しません

ボタンの状態を判断することで、各動作のステップ距離がプリセットされます。ステップを実行し、境界を処理します

その後、攻撃タイマー:

var planeMoveTimer = window.setInterval(function(){
    if(_keyA||_keyD||_keyW||_keyS){
        ctx.clearRect(planeX, planeY, w, h);
        _keyA && (planeX-=step);
        _keyD && (planeX+=step);
        _keyW && (planeY-=step);
        _keyS && (planeY+=step);
        planeX>=0 || (planeX=0);
        planeX<=(cw-w) || (planeX=cw-w);
        planeY>=0 || (planeY=0);
        planeY<=(ch-h) || (planeY=ch-h);
        drawPlane(planeX, planeY);
    }
}, 10);

砲弾は 0.5 秒ごとに発射され、各砲弾には制御しやすいように個別のタイマーが設定されています。私も最初にワイプしてからペイントする方法を使用しています。砲弾の動きにはステップ距離もあるので、砲弾のいわゆる貫通効果がダイレクトに現れます。 背景と同じ色で直線を描くだけで砲弾のステップ距離を変更してみてください。砲弾の移動速度、砲弾のサイズも調整できます

最後のステップは、敵と航空機を描画することです。

りー

完了!まだまだ最適化を進めてプレイアビリティを高めていきたいのですが、時間がないので他にも学ぶべきことがたくさんあるので、とりあえずこのゲームはこんな感じです！シンプルではないでしょうか！はは、恥ずかしいしタイトルが魅力的すぎて仕方ない！

以上がHTML5 スタートレックを自分で作成するためのサンプル コードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。