カテゴリー
【Sassで作るCssミニゲーム】Cssミニゲームで複数のステージを実装する
※ 当ページには【広告/PR】を含む場合があります。
2021/07/05
結局はjavascriptを(ちょっと)使う...
「Cssミニゲームで使うのはCssとHtmlのみ！」複数のステージの画面を切り替える<script>マルチステージを作るスクリプトの仕組み
ゲーム？ゲームの状態 おわり！
<p>ゲームの状態 <span id="span1"></span></p>
<form name="form1">
<input type="checkbox" name="stage1" value="stage1" /><span>画面１</span>
<input type="checkbox" name="stage2" value="stage2" /><span>画面２</span>
<input type="checkbox" name="stage3" value="stage3" /><span>画面３</span>
</form>
<input type="button" value="ゲーム？" onclick="checkGameState()" />
<script>
function checkGameState() {
const s1 = document.form1.stage1;
const s2 = document.form1.stage2;
const s3 = document.form1.stage3;
if (s1.checked && s2.checked && s3.checked) {
document.getElementById("span1").textContent = 'おわり！'
} else {
document.getElementById("span1").textContent = ''
};
}
</script>
checked順序のあるマルチステージを作る
画面1 > 画面2 > 画面3 > 終わり
<form id="form1">
<p>ゲームの状態: <span id="span1"></span></p>
<input type="reset" id="reset">
<input type="checkbox" id="stage1"/>
<input type="checkbox" id="stage2"/>
<input type="checkbox" id="stage3"/>
<div id="gs1"><label for="stage1">画面１</label></div>
<div id="gs2"><label for="stage2">画面２</label></div>
<div id="gs3"><label for="stage3">画面３</label></div>
<div id="gsr"><label for="reset">リセットしてニューゲーム</label></div>
</form>
<script>
document.getElementById("stage3").addEventListener("change", (e) => {
const s1 = document.getElementById("stage1");
const s2 = document.getElementById("stage2");
const s3 = document.getElementById("stage3");
if (s1.checked && s2.checked && s3.checked) {
document.getElementById("span1").textContent = 'おわり！';
};
});
document.getElementById("reset").addEventListener("click", (e) => {
document.getElementById("span1").textContent = '';
});
</script>
#form1 {
input { display: none; }
#gs1 {display: block}
#gs2 {display: none}
#gs3 {display: none}
#gsr {display: none}
#stage1:checked ~ {
#gs1 {display: none}
#gs2 {display: block}
}
#stage2:checked ~ {
#gs2 {display: none}
#gs3 {display: block}
}
#stage3:checked ~ {
#gs3 {display: none}
#gsr {display: block}
}
}
input-label要素
//....
document.getElementById("stage3").addEventListener("change", (e) => {
const s1 = document.getElementById("stage1");
const s2 = document.getElementById("stage2");
const s3 = document.getElementById("stage3");
if (s1.checked && s2.checked && s3.checked) {
document.getElementById("span1").textContent = 'おわり！';
};
});
document.getElementById("reset").addEventListener("click", (e) => {
document.getElementById("span1").textContent = '';
});
//....
stage3reset複数画面遷移のあるCssミニゲームの実装例
<form id="game-wrapper">
<p class="game-header">ゲームの状態: <span id="gamestate">さあゲェムを始めましょう</span></p>
<input type="reset" id="reset"/>
<input type="checkbox" id="start"/>
<input type="checkbox" id="stage1"/>
<input type="checkbox" id="stage2"/>
<input type="checkbox" id="stage3"/>
<div id="stage---op" class="stage stage--op">
<label for="start">クリックしてゲェム開始!</label>
</div>
<div id="stage---1" class="stage stage--main stage--main--1">
<label for="stage1">ステージ１です！クリックしてください。</label>
</div>
<div id="stage---2" class="stage stage--main stage--main--2">
<label for="stage2">ステージ２です！！クリックしてください。</label>
</div>
<div id="stage---3" class="stage stage--main stage--main--3">
<label for="stage3">最後のステージです！！！クリックしてください。</label>
</div>
<div id="stage---reset" class="stage stage--end">
<label for="reset">リセットしてニューゲェム</label>
</div>
</form>
<script>
document.getElementById("start").addEventListener("change", (e) => {
document.getElementById("gamestate").textContent = 'ゲェムプレイ中！';
});
document.getElementById("stage3").addEventListener("change", (e) => {
const ss = document.getElementById("start");
const s1 = document.getElementById("stage1");
const s2 = document.getElementById("stage2");
const s3 = document.getElementById("stage3");
if (ss.checked && s1.checked && s2.checked && s3.checked) {
document.getElementById("gamestate").textContent = 'ゲェムクリアしました！';
};
});
document.getElementById("reset").addEventListener("click", (e) => {
document.getElementById("gamestate").textContent = 'さあゲェムを始めましょう';
});
</script>
#game-wrapper {
width: 100%;
height: 300px;
background-color: darkgray;
box-sizing: border-box;
position:relative;
input { display: none; }
.game-header {
position: absolute;
top: 0;
left: 0;
background: #220c0c;
color: #039e03;
z-index: 1;
margin: 0;
font-size: 22px;
padding: 6px 8px 6px 8px;
border-radius: 0 0 25px 0;
}
.stage {
position: absolute;
display: block;
width: 100%;
height: 100%;
font-size: 24px;
&--op {
display: flex;
align-items: center;
justify-content: center;
label {
display: block;
flex: 0 0 auto;
margin: 0 auto;
}
}
&--main {
display: flex;
align-items: center;
justify-content: center;
label {
flex: 0 0 auto;
margin: 0 auto;
}
&--1 {
color: blue;
font-size: 18px;
}
&--2 {
color: rgb(99, 231, 169);
font-size: 22px;
}
&--3 {
color: rgb(235, 212, 85);
font-size: 24px;
}
}
&--end {
display: flex;
align-items: center;
justify-content: center;
background: darkgray;
label {
flex: 0 0 auto;
margin: 0 auto;
color: white;
}
}
}
#stage {
&---op {display: flex}
&---1,&---2,&---3,&---reset {display: none}
}
#start:checked ~ {
#stage---op {display: none}
#stage---1 {display: flex}
}
#stage1:checked ~ {
#stage---1 {display: none}
#stage---2 {display: flex}
}
#stage2:checked ~ {
#stage---2 {display: none}
#stage---3 {display: flex}
}
#stage3:checked ~ {
#stage---3 {display: none}
#stage---reset {display: flex}
}
}
まとめ
その他のリンク記事
関連記事
【Sassで解説】Cssミニゲームで開始画面と終了画面を(もちろんcssだけで)実装する
2021/06/01
ID#:40
Sass Webサイト作成 ミニゲーム
【Sassで解説】Cssミニゲームで開始画面と終了画面を(もちろんcssだけで)実装する
一つ前の回で、Cssミニゲームの中身をどう実装しているのか基礎的なCss&Htmlを使ったテクニックの話題を取り上げてみました。これだけだとミニゲームとしては物足りないので、今回は補足的にミニゲームにオープニング画面とエンド画面の追加方法を考えてみましょう。
クリックするとリンク先へ飛びます関連記事
【Sassで作るCssミニゲーム〜番外編】親子要素でonclickなどのイベントをどちらか一方に指定する方法
2021/07/11
ID#:56
HTML Css ミニゲーム作成
【Sassで作るCssミニゲーム〜番外編】親子要素でonclickなどのイベントをどちらか一方に指定する方法
html要素が階層構造になっている場合、入れ子になったイベントをもつ親子要素が重なって処理されるときがあります。今回はイベントが重なっても、親/子のクリックイベントのみ発火したい/したくないを選択的に制御する方法を考えてみましょう。
クリックするとリンク先へ飛びます記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー