0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Deno DeployでJSXとTailwind CSSを使った「四則計算ゲーム」のソースコード

Posted at
'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を表示する。
});
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?