CSSゲームのススメ

What is この記事?

• これはみす55代非公式アドベントカレンダー22日目の記事となります。イケイケwriter がいっぱいるので是非ともご覧あれ〜〜　（人によって種々様々で面白いです！！）
• 本記事では 「htmlとcssだけでゲームを作るぞ!! という決意の元
  WITHOUT JAVASCRIPT!!
  でゲームを作成するという馬鹿な楽しい挑戦について変なテンションであれこれ話します。_{といっても苦労話はほぼ全カット。お笑い芸人もﾄﾎﾎ…}
• 目標としては 読んだ方が「cssでゲームを作るイメージ」を持てるようになることです。多少html&cssについての知識がないと辛い部分も途中あるかもしれませんが、その場合は一気に飛ばしてゲームだけでも遊んでくだされば幸いです。

Begin with 〜はじめに〜

• こんにちは、こんばんは、misw55代のヘビです。普段はunityを使ってゲーム作ることがしばしばです。misw55代のヘビです。
• misw発表会にはほとんど毎回出席しているものの、普段の活動など含め存在感が皆無であることを自負&自覚しておりますので、この機会に名前だけでも覚えていただけたら幸いです。私は５５代の『ヘビ』です!!!(非公式アドカレの私的利用)

what is CSS?

• CSS（Cascading Style Sheets、カスケーディング・スタイル・シート) とは、webページのスタイル（見た目）を整えるために使われる言語のことです。「文字の色を指定する」「文字にアニメーションをつける」「画像の表示位置や大きさを指定する」などは全てCSSによって設定することができます。
• 例えば上の
  WITHOUT JAVASCRIPT!!
  もcssを使って書いています。

Why CSS?

• 通常webページにおいて、ゲームはjavascriptというプログラミング言語を実行することでプレイすることができます。
• しかし、javascriptはプログラミング言語であるがためにアラートループ事件などの不正動作を起こす可能性があります。
• これが嫌で、ブラウザの設定でjavascriptをオフにしている人も多いでしょう。そんな人は、javascriptによって作成されたゲームで遊ぶことができません。_悲しい…
• しか〜し！cssのゲームであれば！！ほとんど全ての人間がプレイできます！！ 嬉しい！！！！
• まぁ、今時javascriptをオフにしている人なんてほとんどいないので意味は特にないんですけど、、
• だけど！！！
• だけれども！！！

　　　　　　
　＼＿（**）＿／　　　／　意味なんて！
　　　　｜　　　　　／　求めないのが！！
　　　　｜　　　　　＼　　浪漫
　　　／　＼　　　　　＼　じゃないのか！！！
　

Q: 我々は何故山に登る？　
　A: そこに山があるから

Q: 我は何故cssでゲームを作る？
A: そこに！cssがあるならば…！！やらずにはいられないのが漢のヘビってもんだろう…！！！
　　　　　　　　　＿
　　　　　　　　／　-＼　　／ そこに
＿＿ヘビ＿＿＿／　／￣　／　CSSが
＼＿＿＿＿＿＿＿／　　　　＼　あるから　　　
　　　　　　　　　　　　　　＼ 🐍（キリッ）

• （現在時刻： AM 02:57）
• 圧倒的！　⭐️深夜テンション⭐️
• まぁ　そんな感じで やってみた　Yo〜　（理由のこじつけ終了）
• さぁさぁLet’s go~~

How to ゲーム作る？ (maybe チョット 退屈)

There are 4 Rules

Rule 1:

• 画像は一切使いません！キャラクターはhtml&cssで描画します！！
• やり方
  • ①htmlのdom要素をいい感じに置きます
  • ② ①のdom要素をcssによってleft,top,width,height,background-colorなどをいい感じに設定します
  • ③やったね完成だ〜〜〜

構造例：

結果例：

Rule 2:

• 動画は一切使いません！アニメーションはcssで描画します！！
• やり方
  • cssの@keyframesにアニメーションを登録する。
  • css機能の正しい使い方のため 簡単
  • 実装例：
    　

    
    
    /右へ100px移動するアニメーション/
    
    @keyframes animation-name{
    
    0%{
    
    tramsform:translateX(0px);
    
    }
    
    100%{
    
    tramsform:translateX(100px);
    
    }
    
    }
    
    

Rule 3:

• cssでクリックイベントを実装しよう
• やり方：

  • cssにはクリックイベントを実行する機能がありません （はい、お疲れ様でした）

    • :active（マウスダウンしてる『間だけ』スタイル適用）や:hover（マウスがのってる『間だけ』スタイル適用）は存在するが、クリックで動作を発火させる、というものは存在しない

  • 擬似クリックボタンを作るんだ！！！

    • cssは「スタイルを適用する」という考え。

    • やり方：

      • ①要素Aにチェックが入った時のスタイルを記述する
        • 例：要素A: ＜label for=“{id_name}”></label> によって、要素Aをクリックした時に、チェックボックスである要素B: ＜input type=“checkbox” id=“{id_name}”>にチェックが入るようにする。
      • ②クリックによって要素Aにチェックが入るようにする
        • 例：要素B:checked ~ 要素Cによって、『チェックが入った』要素Bから相対的に指定した要素Cへ当てはめるスタイルを指定する。参考

    • 以上①,②によって、要素Aをクリックした時に要素Bへチェックが入り、要素B:checkedから要素Cへのスタイルの指定が通るようになり、要素Cへスタイルが適用される、という流れを作ることにより、要素Aのクリックで他のスタイルを当てはめることができる。例えば要素Aにジャンプボタンを、スタイルとしてジャンプアニメーションを用いれば、ジャンプボタンのクリックでジャンプができるようになる。

  • 実装例：

<input type="checkbox" id="id-name">
<label for="id-name>Click!</label>
<div id="contents">
<p>change this color</p>
</div>

<style>
#contents>p{
color:black;
}
#id-name:checked ~ #contents>p{
color:red;
}
</style>

click前

click後

Rule 3:

• 点数を数える。cssで足し算しようze！
• やり方：
  • counterを使うんだ… このやり方を見つけるのは若干苦労したのだ、、、
    • ①Rule2のように、何か要素のクリックでチェックボックスにチェックがつくようにする。
    • ②要素A{counter-reset: counter-name}によって、要素Aでカウンター「counter-name」の値を0にセットする。（初期値0なので一度目は必要ない?）
    • ③要素B:checked{counter-increment:counter-name 1}によって、「チェックの入った要素B」が登場する度にカウンター「counter-name」の値を+1する。
    • ④要素C::before{countent:counter(counter-name);}によって、要素Cにカウンター「counter-name」の値を設定する。
  • これによって、要素をクリックすることで（＝要素Bにチェックが入ることで）counterの値が増える、ということを表現できる。このcounterの値を得点として用いれば、得点を稼ぐゲームを実現できる。
• 実装例

<input type="checkbox" class="class-name">
<input type="checkbox" class="class-name">
<input type="checkbox" class="class-name">

<p id="ShowCounter"></p>

<style>
.class-name:checked{ /*class="class-name"のものがチャックされる度にcounterの値を+1*/
    counter-increment: score-counter 1;
}
#ShowCounter::before{
    content: counter(score-counter);
}
</style>

check前

check後

Rule 4:

• cssで当たり判定を行う行えねーよ！！

  • cssでは『スタイル』を記述できます（n回目）
  • この状況になったらこのイベントを発火する、という事は(多分)できません。

• アニメーションの実行タイミング(delay)を指定することで、状況に応じたアニメーションを実行させよう。

• やり方

  • 「？秒後にこのアニメーションを実行する 」指定する。
    • そのままアニメーションが実行される。
      • 例）地面の穴が3秒後に現れるように現れる場合、３秒後に落下するアニメーションを指定することで、穴に落ちたかのように見える
    • 別の「？秒後にこのアニメーションを実行する」を指定することでそれまでのアニメーションを上書きする。
      • 例）地面の穴が3秒後、8秒後にそれぞれ現れ、キャラクターが3秒後に落下するようアニメーションを設定している場合を考える。ジャンプボタンが2.5秒後~3秒後の間表示するようアニメーションを指定する。ジャンプボタンを押すことでcheckboxAにチェックが入る(Rule 2)。checkboxAにチェックが入っている時におけるキャラクターのアニメーションを「５秒後に落下する」とすることでアニメーションを上書きし、一つ目の穴では落下せず、二つ目の穴が現れる時に落下するようにする。これを繰り返すことで、タイミングよくボタンを押せばステージの先へ行けるが、押さなければ落下する、というゲームを作ることができる。

イメージ

ゲームの裏でのcheckboxの状況

Rule 5:

• Rule 1 〜 Rule 4をいい感じになるよう頑張って組み合わせてゲームを作る。網羅はできていませんが、大まかの後世はこんな感じです！！！

完成品…（pc&chromeを推奨。）

• 注意）ジャンプをした後は「リセット」を行う必要があります。例えばジャンプを二回する場合、「ジャンプ→リセット→ジャンプ」としてください。

github pages

github repository　（これのindex.html及び参照しているcssがゲームのコードとなっています）

iframe: ↓

プレイありがとうございました！！

どんな感じでできているかを見たい方は…

• 下のiframeのゲームを参考に、、

Conclusion 〜結論〜

• cssでもゲームっぽいものは作れはする

• が…大変辛い、、！！！

  • cssは所詮スタイル（見た目）を整えるための言語な訳で、
  • 分岐処理や配列などの機能が一切使えないわけで、、
  • cssゲーム制作用のライブラリなんていうのもないわけで、（ヘビが見つけられていないだけかもしれない）
  • 無駄に大量の時間が浪費されるわけで、(scss等は少し役立つかも)
  • cssだけっていう縛りプレイも意味は特にないわけで、

• 結論）人類はプログラミング言語を使うべきである

  • 演算機能、Setinterval(一定時間ごとに実行)機能、function（関数）機能、など当たり前の優れた機能を人類は使うべきだ、、、

_{いい経験にはなりました。。。}

ふり返り

• ふりかえり①
  　
  　＼＿（**）＿／　　　／　意味なんて！
  　　　　｜　　　　　／　求めないのが！！
  　　　　｜　　　　　＼　　浪漫
  　　　／　＼　　　　　＼　じゃないのか！！！
  　

？？？　

• ふりかえり②
  　　　　　　　　　＿
  　　　　　　　　／　-＼　　／ そこに
  ＿＿ヘビ＿＿＿／　／￣　／　CSSが
  ＼＿＿＿＿＿＿＿／　　　　＼　あるから 　
  　　　　　　　　　　　　　　＼ 🐍（キリッ）

そこにJavascriptもありますね ニッコリ :)

• ふりかえり③
  WITHOUT JAVASCRIPT!!
  USE JAVASCRIPT!!

〜〜　おしまい　〜〜

• ありがとうございました！

• cssは見た目を整える上でとってもexcellentな言語（偉大なるcss職人の手にかかれば本当にすごい。cssの神作：miswボカロ企画の1作品。余談ですがmiswのボカロ企画は他にも音楽も映像もとてもとても素晴らしいものばかりでいたく感動いたしました。私ヘビは何もしていませんが、、）ですが、プログラミング言語ではなくスタイルシート言語です！！

• ~p.s. javascript使え論を唱えましたが、ゲーム作るなら圧倒的にUnityが便利です~

• twitter account: @snakesneaks

  • dmなど大歓迎しております。dmください、、、dm、、（砂漠の水感覚）
  • 特に『一緒にゲーム作りたい』などのお誘いは神の雫のごとく大変喜びます。_{私ヘビは特定の宗教を支持しておりませんが、、}
  • なお以上の記事は全て私ヘビの分かる範囲で考え書いたものであり、事実と異なる点、異なる意見などもあるかもしれません。ご了承ください。

Thank You!