0

HTML5 + CSS3 + JS で初めてゲームを作成しましたが、いくつか問題があります。シンプルなスネーク ゲームです ( http://5nake.ugu.pl/ )。

問題に取り掛かりましょう。アニメーションをオンにしてゲーム (「Gra jednoosobowa」) に入ると (設定でオン/オフを切り替えることができます (「Ustawienia」))、すべてが正しく描画されますが、クリアされないため、すべてが終了します。どこにでもあるようにヘビの部分があります。もちろん、そのようなゲームをプレイすることは不可能です。ただし、Firefox または Opera では、すべてが正しく機能しています。

別の既存の問題は、負けたときに、ヘビが単一のフラグメントに分割され、キャンバス要素を下っていくクイックアニメーションが必要であることです。次に、2 秒間テキスト ("Konice gry") が表示され、ゲームはプレイヤーに名前を書くように求め、ハイスコア画面 ("Wyniki") が表示されます。繰り返しますが、Google Chrome はそれについて何もせず、ゲームに負けるとフリーズするだけです。JS コンソールにレポートはありません。関連するコードは次のとおりです。

function gameOver() {
    stopGame();
    storage.set("activeGameData", null);
    display.gameOver(function() {
        announce("Koniec gry");
        setTimeout(function() {
            snake.game.showScreen("hiscore", board.getScore());
        }, 2500);
    });
}

そしてdisplay.gameOver()：

function gameOver(callback) {
    addAnimation(1000, {
        render : function(pos) {
            canvas.style.left =
                0.2 * pos * (Math.random() - 0.5) + "em";
            canvas.style.top =
                0.2 * pos * (Math.random() - 0.5) + "em";
        },
        done : function() {
            canvas.style.left = "0";
            canvas.style.top = "0";
            explode(callback);
        }
    });
}

explode()関数は次のとおりです。

function explode(callback) {
 // At the beginning there are many lines of some Math.random() with position,
 // velocity and rotation of every fragment of the snake which I skipped.
    addAnimation(3000, {
        before : function(pos) {
            ctx.clearRect(0,0,cols,rows);
        },
        render : function(pos, delta) {
            explodePieces(pieces, pos, delta);
        },
        done : callback
    });
}

そしてexplodePieces()：

function explodePieces(pieces, pos, delta) {
    // Some calculations on every fragment's position, velocity
    // and rotation skipped.
        ctx.save();
        ctx.translate(piece.pos.x, piece.pos.y);
        ctx.rotate(piece.rot * pos * Math.PI * 4);
        ctx.translate(-piece.pos.x, -piece.pos.y);
        drawObject(piece.type,
            piece.pos.x - 0.5,
            piece.pos.y - 0.5,
            1, piece.rotation
        );
        ctx.restore();
    }
}

アニメーション システムは次のように機能しrequestAnimationFrame()ています。アニメーション サイクルを実行しています。の最初の引数はaddAnimation()、アニメーションが持続する時間です。2 つ目は、3 つのプロパティを持つオブジェクトです。

  • before : アニメーションのフレームごとにキャンバスを準備しています
  • render : アニメーションのすべてのフレームを表示するのに関連します (`pos` は範囲 0-1 のアニメーションの位置です)
  • done : アニメーションの終了後に行われていること。



また、モバイル デバイスでゲームをプレイしようとすると、奇妙な問題が発生します。ゲームは Safari (iOS) と Firefox Mobile (Android) で (ほぼ) 正しく動作しています。他のOSでは確認していません。ただし、SafariやFirefoxでも負けた後にハイスコア画面に切り替わると、メインメニューに戻るはずの下部のボタン（「メニュー」）が機能しません。デスクトップブラウザ。これを行うコードは次のとおりです。

dom.bind(backButton, "click", function(e) {
        game.showScreen("main-menu"); // The showScreen function is working for sure.
});

は次のdom.bind()とおりです。

function bind(element, event, handler) {
    if (typeof element == "string") {
        element = $(element)[0];
    }
    element.addEventListener(event, handler, false)
}

助けていただければ幸いです。

コードを確認するための github リンクは次のとおりです: https://github.com/lewapkon/HTML5Snake。
グラフィックを担当するファイル: scripts/display.canvas.js。
gameOver 関数があるファイル: scripts/screen.game.js。
ハイスコ​​ア メニューのファイル: scripts/screen.hiscore.js。

4

1 に答える 1

0

animValue が定義されていないように見えますが、Firefox はどういうわけかこれを無視します。screen.settings.js で宣言されていますが、値が割り当てられていません。これを何と定義すればよいのかわからないので、調べて質問を明確にしてください。

于 2013-06-16T20:06:35.160 に答える