view source

JavaScript

document.title = '算数ドリル 暗算 足し算 引き算 脳トレゲーム';

let w = document.body.clientWidth;
let h = window.innerHeight;

document.oncontextmenu = function () {return false;}
$(function(){
  $demo = $('#demo');

  let clearCount = 0;
  let numMaxDef = 5;
  let symbols = ['+','-','×'];
  eq = '=';
  $h1 = $('<h1>').text(document.title);
  $demo.after($h1);

  function setQuiz(){
    $demo.empty();
    let numMax = numMaxDef + clearCount*3;
    if(numMax>99){numMax=99;}
    let n1 = Math.floor(Math.random()*numMax)+2;
    let n2 = Math.floor(Math.random()*n1)+1;
    let symbol = symbols[Math.floor(Math.random()*symbols.length)];
    let n3 = 0;

    if(clearCount < 3){
      symbol = '+';
    }

    if(symbol === '+'){
      n3 = n1 + n2;
    } else if(symbol === '-'){
      n3 = n1 - n2;
    } else if(symbol === '×'){
      n3 = n1 * n2;
    }

    let answer = n3;
    answers = [];
    answerStart = answer + Math.floor(Math.random()*4)-3;
    answers.push(answerStart);
    answers.push(answerStart+1);
    answers.push(answerStart+2);
    if(answer>39){
      plamin1 = Math.random().toFixed()*2-1;
      answers.push(answer+10*plamin1);
      answers.push((answer+plamin1)+10*plamin1);
    } else {
      answers.push(answerStart+3);
      answers.push(answerStart+4);
    }

    if(!answers.includes(answer)){
      answers.push(answer);
      answers.shift();
    }

    answers.sort(function(a, b) {
      return a - b;
    });
    let formulaAry = [n1,symbol,n2,eq,n3];
    formulaAry.forEach(function(v,i){
      let $b = $('<b>').text(v);
      $demo.append($b);
      if(v>999){
       $b.addClass('digit4');
      }
      if(i===4){
       $b.addClass('space');
      }
    });
    answers.forEach(function(v,i){
      let $b = $('<b>').text(v);
      $demo.append($b);
      if(v>999){
       $b.addClass('digit4');
      }
      $b.addClass('choice');
      $b.on('click',function(){
        if(!$(this).hasClass('choice')){return;}
        var t = Number($(this).text());
        if(t === answer){
          $(this).addClass('ok');
          $('.space').addClass('ok');
          clearCount++;
        } else {
          $(this).addClass('ng');
          $('.space').addClass('ng');
        }
        $('.choice').removeClass('choice');
        $('.space').removeClass('space');

        $btn = $('<button>').text('次の問題へ');
        $demo.append($btn);
        $btn.on('click', function(){
          setQuiz();
        });
      });

    });
  }
  setQuiz();
});

CSS

#demo{
  user-select:none;
  text-align:center;
}
#demo b{
  display:inline-block;
  width:20%;
  height:20vw;
  line-height:20vw;
  text-align:center;
  font-size:8vw;
  font-weight:bold;
  border:1px solid #000;
  border-bottom:8px solid #000;
  box-sizing:border-box;
  font-family:serif;
}
#demo b.space{
  color:transparent;
}
#demo b.select{
  color:#555;
}
#demo b.choice{
  background-color:#ccc;
  color:#555;
}
#demo b.choice:hover{
  background-color:#eee;
  color:#000;
  cursor:pointer;
}
#demo b.ok{
  background-color:#afa;
  color:#000;
}
#demo b.ng{
  background-color:#faa;
}
button{
  width:100%;
  padding:12px;
  font-size:5vw;
  box-sizing:border-box;
}
#demo a{
  display:inline-block;
  padding:12px;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-game-arithmetic/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。