CSS を使用して作成されたゲーム counter-increment_html/css_WEB-ITnose

私は CSS のダークアートと CSS を限界まで押し上げることが大好きです。多くの人は、この前処理技術がどれほど強力であるかを認識していません (特に Sass と組み合わせた場合)。この記事では、何か面白いことをしたいというこの 2 つの愛を組み合わせます。もちろん、次のクライアントから尋ねられるかもしれないし、聞かれないかもしれませんが、これを行うことに価値はありますか?しかし、この方法を試してみることによってのみ、言語を真に理解することができます (もちろん、CSS は言語ではないという人もたくさんいます)。ただし、純粋な CSS テクノロジーを使用して単純なゲームを作成することもできます。

Counter-Increment

counter-increment は比較的目立たない CSS プロパティであり、元々は番号付けデザインを目的としていました。これは非常に便利な CSS プロパティであり、十分にサポートされています。

Codrops の CSS リファレンスでは、このプロパティについて詳しく説明されています。参照することをお勧めします。

カウンタ リセット

ナンバリング設計にカウンタ インクリメントを使用するには、カウンタ リセットを使用してカウンタを設定する必要があります。 counter-increment と counter-reset の値は互いに一致する必要がありますが、たとえば次のように何でも構いません。

// 父元素有一个counter-reset应用于实例化（初始化）section {  counter-reset: unicornCounter;}// 被指定的子元素上开始计算section h1 {  counter-increment: unicornCounter;}

上記のコードでは、セクション内の各 2930c3e9d637f70738895291b0684c86 チェックボックスには、JavaScript を使用せずに (クリックするだけで) 変更できるグローバル プロパティ (checked) があります。これにより、チェックボックスが非常にユニークで、動的計算に適したものになります:

input:checked {    counter-increment: counterName;}

このようにして、各入力要素に counter-increment 属性を設定して、選択されたときに統計をカウントすることができます (上を参照)。簡単に言うと、ユーザーがチェックボックスを動的に選択または選択解除すると、それに応じてカウンタのインクリメントが応答できるようになります。

カウンターを表示

カウンターを表示するには、疑似要素 ( ::before または ::after ) とそのコンテンツを使用できます。変数名があるため、counter-increment を使用して増分計算を実行させることができます。例:

span::after {    content: counter(counterName);}

注: counter は表示されている要素のみをカウントします。 DOM 要素が display:none および Visibility:hidden に設定されている限り、カウントされません。

これは、カウンター インクリメントを使用してターゲットのヒットのスコアをカウントする小さなゲームの例です。各ターゲットはチェックボックスであり、アニメーション期間はランダムな値を使用してさまざまな速度で移動します。さらに、各ヒット ターゲットは、10 秒遅延するアニメーション遅延属性も使用します。ご興味がございましたら、次のゲームを新しいウィンドウで開き、ご自身で体験していただけます:

ここでのアニメーション効果はすべて CSS トランジションとアニメーションを通じて実現されていますが、将来的にはWeb アニメーション API によりアニメーションをより適切に制御できます。

カスタムカウンター

実際の使用では、カウンターをカスタマイズしたり (複数のカウンターを使用することもできます)、増分数を指定したりすることもできます (デフォルト値は 1)。次のように実行できます:

// 按2的增量input计数input:checked {  counter-increment: counterName 2;}// 每次input选中减去3input:checked {  counter-increment: counterName -3;}

上記のゲームをより複雑にしたい場合は、ターゲットごとにリング ターゲットを作成し、各リングのターゲット値を変えることができます:

上記の例では、各ターゲットは 1 つのチェックボックスではなく、3 つのチェックボックスになります:

<!-- HTML for target list --><ul class="game-area"><!-- Individual target -->  <ul class="target">    <li><input type="checkbox" class="inner-check"></li>    <li><input type="checkbox" class="middle-check"></li>    <li><input type="checkbox" class="outer-check"></li>  </ul><!-- Next targets here ... --></ul>

各チェックボックス (ゲーム) にカウンターを使用しますが、各チェックボックスに異なるカウンターインクリメント値を使用します。

.inner-check {    @extend %target-ring;    // ... style color and position    z-index: 3;    // counting "game" up by 5    &:checked {        counter-increment: game 5;    }    &:checked::after {        content: '+5';    }}.middle-check {    @extend %target-ring;    // ... style color and position    z-index: 2;    // counting "game" up by 3    &:checked {        counter-increment: game 3;    }    &:checked::after {        content: '+3';    }}.outer-check {    @extend %target-ring;    // ... style color and position    z-index: 1;    // counting "game" up by 1    &:checked {        counter-increment: game 1;    }    &:checked::after {        content: '+1';    }}

チェックボックス ロジック

これで、チェックボックス ロジックを使用して、さらに素晴らしい素晴らしいゲームを作成できるようになりました。これらのことは、:chceked および :not(:checked) 擬似セレクターを使用して行うことができます。

例: :checked + :checked 属性セレクターで別の要素を直接選択することもできます。:checked + :not(:checked) + :checked を使用して、on、off、on と同様の機能を実現することもできます。

この方法を使用してゲームを再作成しました (上記のアニメーション トリックのいくつかとともに、今回は独自の Z インデックスを使用しました)。

各例で X が勝つように円を作成するロジックの例を次に示します。

// x | x | x//   |   |//   |   |//// note: also works for a horizontal match on the// 2nd & 3rd rows, but more logic should be applied// to avoid false positives of 3 consecutive checks:checked + :checked + :checked ~ span::after { ... }// x |   |// x |   |// x |   |:checked + :not(:checked) + :not(:checked) + :checked + :not(:checked) + :not(:checked) + :checked ~ span::after { ... }//   | x |//   | x |//   | x |:not(:checked) + :checked + :not(:checked) + :not(:checked) + :checked + :not(:checked) + :not(:checked) + :checked ~ span::after { ... }//   |   | x//   |   | x//   |   | x:not(:checked) + :checked + :not(:checked) + :not(:checked) + :checked + :not(:checked) + :not(:checked) + :checked ~ span::after { ... }//   |   | x//   | x |// x |   |:not(:checked) + :not(:checked) + :checked + :not(:checked) + :checked + :not(:checked) + :checked ~ span::after { ... }// x |   |//   | x |//   |   | x:checked + :not(:checked) + :not(:checked) + :not(:checked) + :checked + :not(:checked) + :not(:checked) + :not(:checked)+ :checked ~ span::after { ... }

これにより、例がすぐに複雑になる可能性がありますが、心配しないでください。Sass がお手伝いします。 。 Jake Albaugh は、こ​​のプロパティがいかに強力で、Sass がいかに便利であるかを直接示す、さらに素晴らしいバイナリ計算機のサンプルを作成しました。ロジックが複雑になると、ロジックをより適切に維持できるプログラミング スキルが必要になります。

このテクニックを使って素敵なケースを作ったことがあれば、私が本当に見てみたいと思っている場合は、以下のコメントでケースのリンク アドレスを共有してください。

概要

この記事では、いくつかのゲームのケースを通じて、CSS カウンターインクリメントがいかに強力であるかを示します。また、いくつかの項目番号を実装するだけでなく、デザインすることもできます。は、さらに興味深いこともできると同時に、CSS の強力な魅力と実用的な価値を示します。

詳細な読書

• CSS カウンター
• CSS で生成されたコンテンツとコンポーネントのカウントからメリットを得る方法
• CSS カウンターと CSS3 Reversi UI について
• How To Benefit From CSS Generated Content And Counters
• Counters

この記事は @una の "Pure CSS Games with Counter-Increment" を元に翻訳したものです。翻訳には私たち自身の理解と考えが含まれています。翻訳が良くない場合や間違いがある場合は、業界の友人にアドバイスを求めてください。この翻訳を転載する場合は、英語のソースを明記してください: http://una.im/css-games/。

Da Mo

通称「Da Mo」、W3CPlus 創設者、現在は淘宝網で働いています。中国の Drupal コミュニティの中心メンバーの 1 人。彼は、HTML5、CSS3、Sass などのフロントエンド スクリプト言語について非常に深い理解と豊富な実践経験を持っており、特に CSS3 の研究に注力しており、中国で最初に研究と使用を行った人物の 1 人です。 CSS3テクノロジー。 CSS3、Sass、Drupalの中国人エバンジェリスト。 2014 年に『図解 CSS3: コア技術と事例実践』を出版しました。