CSS3 と JavaScript_html/css_WEB-ITnose を使用して「ストリートファイター」ゲームを開発する

最近、CSS3 のsteps() アニメーション プロパティを使用して PNG 背景アニメーションを生成する素晴らしいテクニックを学びました。この技術の主な機能は、PNGの背景画像を敷き詰めることでGIF画像のアニメーション効果を「再現」することです。

私の友人は皆、私が若い頃ストリートファイター ゲームに夢中だったことを知っています。そしてこの資料を見たとき...私の心に何が起こったか知っていますか?

デモを見る

最初の CSS アクションを作成しましょう

まず、ストレート パンチ (以下のパターンのアクションです) を実装する必要があります。三番目）。最初のステップは、Photoshop を開き、これらの写真を幅 70 ピクセル、高さ 80 ピクセルに保つことです。これらの画像の作成に役立つ Texture Packer という素晴らしい Web サイトがあります。最後に、画像は次のようになります:

次に DIV が必要です。アクションはこの DIV に表示されます:

/* html */<div class="ken"></div>/* css */.ken {     width:70px; height:80px; /* exactly the size of an image in our sprite */    background-image:url('../images/sprite.png'); }

は省略しましたここに必要になる可能性があるブラウザーの CSS プレフィックス。次に、パンチ用の CSS コードは次のようになります。

/* css */.punch {     animation: punch steps(4) 0.15s infinite; }@keyframes punch {    from { background-position:0px -160px; }    to { background-position:-280px -160px; }}

ここで行うことは、アニメーション CSS クラス (.punch) を定義することです。基本的なアクションは、背景の位置を 0px から移動させることです。から - 280 ピクセル (X 軸に沿って)。このアクションには 4 つのフレームがあり (ステップ(4) は 4 組のパンチ画像に対応します)、このアクションは 0.15 秒で完了します。ここでの設定はループです。

DIV.ken の .punch クラスを追加/削除するメソッドも必要です。このメソッドは、コントロール キーが押されたときに呼び出されます。

/* javascript */$(document).on('keydown', function(e) {    if (e.keyCode === 68) { // 68 是键盘上的D字符        $('.ken').addClass('punch');        setTimeout(function() { $ken.removeClass('punch'); }, 150);    }});

誰かが「D」キーを押した場合、jQuery の addClass('punch') を使用して CSS クラスを追加し、setTimeout を使用して 150 ミリ秒の遅延を設定して削除します (アクションが0.15秒で完了します）。基本的に、これはすべてのアニメーションを作成するために必要な基礎知識です。

SASS を使用してコードを改善する

私たちが行っていることに注意を払うと、コード内の一部の値は決して変更されないことがわかります (コードの長さと幅)画像など)、After アニメーションを作成した後、コードが大量に繰り返されていることがわかり、コードが読みにくく、保守しにくくなります。 SASS は重複コードの排除に役立ちます。

まず、animation() や keyframes() など、いくつかの基本的な @mixin を作成する必要があります。

@mixin animation($params) {     -webkit-animation:$params;    -moz-animation:$params;    -ms-animation:$params;    animation:$params;}@mixin keyframes($name) {     @-webkit-keyframes $name { @content }    @-moz-keyframes    $name { @content }    @-ms-keyframes     $name { @content }    @keyframes         $name { @content }}

画像の長さと幅を変数に保存する必要があります。 SASS 変数 ここで便利です:

$spriteWidth:70px;$spriteHeight:80px;

最後に、これをすべてまとめて、アニメーション アクションを宣言し、背景の動きの位置を計算する複雑な SASS ミックスインを作成します:

@mixin anim($animName, $steps, $animNbr, $animParams){    .#{$animName} {         @content;        @include animation($animName steps($steps) $animParams);     }    @include keyframes($animName) {        from { background-position:0px (-$spriteHeight * ($animNbr - 1)); }        to { background-position:-($spriteWidth * $steps) (-$spriteHeight * ($animNbr - 1)); }    }}

これで、1 行のコードでアニメーション アクションを作成できます。

$spriteWidth:70px;$spriteHeight:80px;/* 直拳 */@include anim($animName:punch, $steps:3, $animNbr:3, $animParams:.15s infinite);/* 踢腿 */@include anim($animName:kick, $steps:5, $animNbr:7, $animParams:.5s infinite);/* 波動拳 */@include anim($animName:hadoken, $steps:4, $animNbr:1, $animParams:.5s infinite);...

$animNbr 変数は重要です。アニメーションの計算はこの数値に基づいています。実際には、これはアニメーション内のアクション シーケンスの番号です。最初の例はロングパンチです。写真内の位置は 3、キックは 7 などです。

光電ボールの衝突検出

非常に高い頻度で衝突を検出する必要があります。光電ボールの位置 (オフセット) は 50 ミリ秒ごとにチェックされます。光電ボールのオフセットがウィンドウ幅を超える場合、ボールが境界に当たることを意味するため、すぐに .explode CSS クラスを適用する必要があります。

方法は次のとおりです。完璧ではありませんが、機能します:

var $fireball = $('<div/>', { class:'fireball' });$fireball.appendTo($ken);var isFireballColision = function(){     return $fireballPos.left + 75 > $(window).width();};var explodeIfColision = setInterval(function(){    $fireballPos = $fireball.offset();    if (isFireballColision()) {        $fireball.addClass('explode');         clearInterval(explodeIfColision);        setTimeout(function() { $fireball.remove(); }, 500);     }}, 50);

デモを見る

次に行うべきこと

効果音やBGMなどの視覚効果を簡単に追加できるほか、Web RTC機能を追加して複数のコンピュータで複数のキャラクターを制御することもできます。 (NodeJS と Socket.io、または Meteor フレームワークを使用できるかもしれません) これらが私が Web 開発を好む理由です。Web 開発は無限の可能性を与えてくれます。

(英語: CSS アニメーションと JavaScript を使用してストリートファイターのデモを構築します。)