'use strict';
import { serve } from "https://deno.land/std@0.127.0/http/server.ts";
import { h, ssr, tw } from "https://crux.land/nanossr@0.0.3";
let database = {}; //計算問題と解答のセットを保存する
let question = ''; //計算問題
let judgement = ''; //正解か不正解を表示する変数
let color = 'red'; //変数judgementを表示するときの色を指定する
const createQuestion = () => { //計算問題を生成し、databaseに格納する
//a~eの5つの乱数を生成し、計算問題として表示する
const a = Math.ceil(Math.random() * 9);
const b = Math.ceil(Math.random() * 9);
const c = Math.ceil(Math.random() * 9);
const d = Math.ceil(Math.random() * 9);
const e = Math.ceil(Math.random() * 9);
//databaseのkeyに'計算問題'を、値に'正答'を格納する
database[`${a} + ${b} − ${c} × ${d} ÷ ${e}`] = a + b - c * d / e;
//計算問題の解が小数だった場合、問題生成をやり直す
if (Number.isInteger(a + b - c * d / e) === false) {
createQuestion();
}
//databaseの末尾の要素を取得する
question = Object.entries(database).pop();
};
//JSXを書くためのコンポーネント
const HTML = props => (
<main>
{/*autcomplete属性を記載することで、入力候補を表示させない*/}
<form class={tw`text-5xl text-center mt-10`} autocomplete='off'>
<span class={tw``}>
{question[0]} {/*計算問題を表示*/}
</span>
<p>
= <input class={tw`border border-4 w-32`} name='answer' type='tel' />
{/*value属性に正答を記載し、ユーザの解答を判定するのに使う*/}
<button class={tw`border p-4 m-4`} name='correct' value={question[1]}>解答</button>
</p>
{/*正解、不正解を色分けして表示する*/}
<p class={tw`text-${color}-500`}>{judgement}</p>
</form>
</main>
);
await serve(req => {
createQuestion(); //計算問題を生成する
const value = new URL(req.url).searchParams; //クエリパラメータを取得する
const answer = Number(value.get('answer'));
const correct = Number(value.get('correct'));
//answerが0ではない場合を前提として処理を進める。
if (answer !== 0) {
if (answer === correct) { //ユーザの解答が正解だった場合の処理
judgement = '正解';
color = 'green';
} else { //ユーザの解答が不正解だった場合の処理
judgement = '不正解';
color = 'red'
}
} else { //answerが0だった場合はページがリロードされ、新しい問題が表示される
judgement = '';
}
return ssr(() => <HTML />); //JSXを記載したコンポーネント、HTMLを表示する。
});
More than 1 year has passed since last update.
Deno DeployでJSXとTailwind CSSを使った「四則計算ゲーム」のソースコード
Posted at
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme