【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方
※ 当ページには【広告/PR】を含む場合があります。
2021/07/06
2022/01/18
目次
- 1. HTML&CSSプログラミングの学習法３選
- 1-1. ①書籍から学ぶ
- スラスラわかるHTML&CSSのきほん
- 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
- 初心者からちゃんとしたプロになる HTML+CSS標準入門
- 1-2. ②動画配信型教材で学ぶ〜Udemy
- 1-3. ③オンラインスクールで学ぶ〜テックアカデミー
- 1-1. ①書籍から学ぶ
- 2. プログラム制作ログ
ゲーム概要
【プログラムバージョン1.0】
更新日：2022/01/18
画面に出されるクイズを4つの選択肢の中から選んでみて遊んでください。
HTML&CSSプログラミングの学習法３選
①書籍から学ぶ
スラスラわかるHTML&CSSのきほん
HTMLとCSSの基礎を理解する！ スラスラわかるHTML&CSSのきほん 第2版
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
HTML&CSSの教科書ベストセラー 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
HTML&CSSの初心者に最適 これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
初心者からちゃんとしたプロになる HTML+CSS標準入門
コツコツ勉強したい人におすすめ 初心者からちゃんとしたプロになる HTML+CSS標準入門〈モバイルファースト、レスポンシブ、Flexbox〉
②動画配信型教材で学ぶ〜Udemy
☆どこでも学べるUdemyの動画講座☆ 「Udemy」【HTML/CSS/JavaScript】フロントエンドエンジニアになりたい人の Webプログラミング入門
③オンラインスクールで学ぶ〜テックアカデミー
☆テックアカデミーのエンジニア育成プログラム☆ 「テックアカデミー」Webデザインコース
プログラム制作ログ
最新バージョンのソースコード
App.sveltestyle.scssApp.svelte
<script lang="ts">
let stages = [...Array(6).keys()].map(m => ({id: `${m+1}`, stageName: `stage${m+1}`, checkbox: `checkmark${m+1}`}));
let result = 0;
let total = 0;
let gameStateSpan: any;
$: clearStageArr = Array(6).fill(false);
$: checkmarkArr = Array(6).fill(false);
$: resultMessage = result == total ? `全問正解🎉あなたは「タコマスター」の称号を得ました！！` : `正解率は ${result}/${total} でした。`;
function initGame() {
gameStateSpan.textContent = 'さあ４択クイズを始めましょう';
checkmarkArr = Array(6).fill(false);
clearStageArr = Array(6).fill(false);
result = 0, total = 0;
}
function liClick(event: any) {
const m_ = window.getComputedStyle(event.target,'::after').content.match(/(\d+)\/correct/);
if (m_) {
checkmarkArr[parseInt(`${m_[1]}`, 10) - 1] = true;
result++;
gameStateSpan.textContent += '⭕ ';
} else {
gameStateSpan.textContent += '❌ ';
};
total++;
}
function invalidClick(event: any){
gameStateSpan.textContent += '😢 ';
total++;
}
</script>
<form id="game-wrapper">
<p class="game-header"><span id="gamestate" bind:this="{gameStateSpan}">さあ４択クイズを始めましょう</span></p>
<input type="reset" id="reset"/>
<input type="checkbox" id="start" on:change="{e => { gameStateSpan.textContent = '成績: ';}}"/>
<div id="stage---op" class="stage stage--op"><label for="start">クリックしてスタート</label></div>
{#each stages as stage, i}
<input type="checkbox" id="stage{stage.id}" bind:checked="{clearStageArr[i]}" />
<input type="checkbox" id="checkmark{stage.id}" bind:checked="{checkmarkArr[i]}"/>
{/each}
{#each stages as stage}
<div id="stage---{stage.id}" class="stage stage--main stage--main--{stage.id}">
<label for="stage{stage.id}" on:click="{e => invalidClick(e)}">
<ul class="flexlist">
{#each Array(4) as _}
<li on:click|stopPropagation="{e => liClick(e)}">
{/each}
</ul>
</label>
</div>
{/each}
<div id="stage---reset" class="stage stage--end">
<p class="score-board"><span id="score" contenteditable="true" bind:textContent={resultMessage}></span></p>
<label for="reset" on:click="{e => initGame()}">もう一度トライ</label>
</div>
</form>
<style lang="scss">
@import "./style.scss";
</style>
style.cssApp.svelte
#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: #ceeece;
z-index: 1;
margin: 0;
font-size: 22px;
padding: 6px 0 6px 0;
width: 100%;
}
$stages: (
'start' : ('op', ''),
'stage1': ('1', 'タコの足は何本？', ('５本', '８本', '１０本', '足はない'), 2, blue),
'stage2': ('2', 'タコは何動物？', ('地球外生物', '緩歩動物', '実は植物', '軟体動物'), 4, rgb(231, 185, 99)),
'stage3': ('3', 'タコの水揚げ量が世界一の国？', ('中国','カナダ','モーリタニア','日本'), 1, rgb(211, 51, 203)),
'stage4': ('4', 'タコの心臓は何個？', ('１個','２個','３個','８個'), 3, rgb(68, 67, 8)),
'stage5': ('5', 'タコの弱点は？', ('イソギンチャク','直射日光','真水','ウミウシ'), 3, rgb(179, 53, 15)),
'stage6': ('6', 'タコの脳は何個？', ('３個','９個','１２個','実は存在しない'), 2, rgb(79, 100, 4))
);
.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;
animation: flash 1s linear infinite;
}
}
&--main {
display: flex;
align-items: center;
justify-content: center;
label {
flex: 0 0 auto;
margin: 0 auto;
}
@for $i from 2 through length($stages) {
$item: nth($stages,$i);
$item: nth($item,2);
&--#{nth($item,1)} {
color: nth($item,5);
font-size: 22px;
}
}
}
&--end {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: darkgray;
label {
flex: 0 0 auto;
display: inline-block;
font-weight: bold;
padding: 0 0 0 0;
text-decoration: none;
color: #00BCD4;
background: #ECECEC;
margin: 0 auto;
animation: flash 1s linear infinite;
}
}
@keyframes flash {
0%,100% { opacity: 1; }
50% { opacity: 0; }
}
}
.stage--main {
ul.flexlist {
border: 1px solid #666;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
margin: 10px auto 2px;
padding: 0;
width: 300px;
li {
border: 1px solid #aaa;
line-height: 110%;
margin: 5px 2px 5px 2px;
padding: 8px;
text-align: center;
width: 35%;
&:hover { color: chartreuse; }
&::after {
content: "wrong";
visibility: hidden;
display: block;
width: 0;
height: 0;
}
}
}
}
#stage {
&---op { display: flex }
@for $i from 2 through length($stages) {
$item: nth($stages,$i);
$item: nth($item,2);
&---#{nth($item,1)} { display: none; }
}
&---reset { display: none; }
}
@for $i from 1 through length($stages) {
$item: nth($stages, $i);
$item: nth($item,1);
##{$item}:checked ~ {
$item: nth($stages, $i);
$item: nth($item, 2);
$item: nth($item,1);
#stage---#{$item} { display: none }
@if $i == length($stages) {
#stage---reset {
display: flex;
opacity: 1;
animation: fadeIn 0.3s ease-in 0s forwards;
}
} @else {
$item: nth($stages, $i + 1);
$item: nth($item,2);
$item: nth($item,1);
#stage---#{$item} {
display: flex;
opacity: 1;
animation: fadeIn 0.3s ease-in 0s forwards;
$item: nth($stages, $i + 1);
$item: nth($item,2);
$item: nth($item,2);
label::before { content: '問題#{$i}：#{$item}'; }
$item: nth($stages, $i + 1);
$item: nth($item,2);
$quiz_option: nth($item,3);
$answer: nth($item,4);
@for $j from 1 through length($quiz_option) {
ul.flexlist {
li:nth-child(#{$j}) {
&::before {content: '#{nth($quiz_option,$j)}';}
@if $j == $answer {
&::after { content: "#{nth($item,1)}/correct"; }
}
}
}
}
}
}
}
}
@keyframes fadeIn {
0% {
display: none;
opacity: 0;
}
1% {
display: flex;
opacity: 0;
}
100% {
display: flex;
opacity: 1;
}
}
}
style.scssstyle.css
index.htmlstyle.cssバージョン1.0 (2022/01/18修正分)
バージョン0.7 (2022/01/14修正分)
バージョン0.6 (2022/01/11修正分)
バージョン0.5 (2022/01/09修正分)
バージョン0.4 (2021/12/22修正分)
バージョン0.3 (2021/12/18修正分)
バージョン0.2 (2021/12/15修正分)
バージョン0.1 (2021/07/06作成分)
記事を書いた人
ナンデモ系エンジニア
これからの"地方格差"なきプログラミング教育とは何かを考えながら、 地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。
カテゴリー
- 1. HTML&CSSプログラミングの学習法３選
- 1-1. ①書籍から学ぶ
- スラスラわかるHTML&CSSのきほん
- 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
- 初心者からちゃんとしたプロになる HTML+CSS標準入門
- 1-2. ②動画配信型教材で学ぶ〜Udemy
- 1-3. ③オンラインスクールで学ぶ〜テックアカデミー
- 1-1. ①書籍から学ぶ
- 2. プログラム制作ログ