○☓クイズ

問題順と回答のみ記録するので、問題文は自分で読み上げてください

view source

JavaScript

var key = "2";
function crypto() {
  var src = "12345ABCDE";
  var des = "";

  des = CryptoJS.AES.encrypt(src, key);
  console.log('Source :' + src);
  console.log('Crypto :' + des);

  var decrypted = CryptoJS.AES.decrypt(des, key);
  console.log('Decrypt:' + decrypted);
  var decrypt = decrypted.toString(CryptoJS.enc.Utf8);
  console.log('utf8     :' + decrypt);
}
crypto();


function cryptoDec(text) {
  var decrypted = CryptoJS.AES.decrypt(text, key);
  console.log('Decrypt:' + decrypted);
  var decrypt = decrypted.toString(CryptoJS.enc.Utf8);
  console.log('utf8     :' + decrypt);
  return decrypt
}

$(function(){
  var s = location.search.substring(1) || '';
  s = cryptoDec(s);
  if(!s){
    s = 'xox';
  }
  console.log(s);
  var w = document.body.clientWidth;
  var h  = window.innerHeight;
  var cx  = w/4;
  var cy  = h/4;
  var cr  = Math.min(cx,cy);
  var stage = 1;
  $demo = $('#demo');
  $stage = $('<div>',{id:'stage'}).text(stage);
  $panels = $('<div>',{id:'panels'});
  $panelO = $('<canvas>',{width:w/2,height:h});
  $panelX = $('<canvas>',{width:w/2,height:h});
  $panelO[0].width = w/2;
  $panelX[0].width = w/2;
  $panelO[0].height = h;
  $panelX[0].height = h;
  $demo
    .append($stage)
    .append($panels);
  $panels
    .append($panelO)
    .append($panelX);
  var se = new Audio('/mp3/correct1.mp3');

  function answer(r){
    //
    var result = s.substr(stage-1,1);
    if(r === result){
      se.currentTime = 0;
      se.play();
    }
    stage++;
    $stage.text(stage);
  }

  $panelO.on('click', function(){
    answer('o');
  });
  $panelX.on('click', function(){
    answer('x');
  });


  var ctx1 = $panelO[0].getContext('2d');
  ctx1.beginPath () ;
  ctx1.arc( cx, cy, cr/2, 0*Math.PI/180, 360*Math.PI/180, false ) ;
  ctx1.strokeStyle = 'rgb(240,30,30)';
  ctx1.lineWidth = cr/4;
  ctx1.stroke() ;

  var ctx2 = $panelX[0].getContext('2d');
  ctx2.beginPath();
  ctx2.lineWidth = cr/4;
  ctx2.strokeStyle = 'rgb(0,120,200)';
  ctx2.moveTo((cx-cr/2), (cy-cr/2));
  ctx2.lineTo((cx+cr/2), (cy+cr/2));
  ctx2.moveTo((cx+cr/2), (cy-cr/2));
  ctx2.lineTo((cx-cr/2), (cy+cr/2));
  ctx2.stroke();

  var questions = [];
  $btnPlus = $('<button>').text('+');
  $btnMinus = $('<button>').text('-');
  $demo
    .append($btnPlus);

  $btnPlus.on('click', function(){
    questions.push([]);
    setQuestion(questions.length-1);
  });
  $btnMinus.on('click', function(){
    questions.shift();
    $questionsWrap.find(div).eq(-1).remove();
  });

  function setQuestion(i){
    $div = $('<div>')
    $o = $('<input>',{type:'radio',name:'stage'+i, value:'o'});
    $x = $('<input>',{type:'radio',name:'stage'+i, value:'x'});
    $div
      .append($o)
      .append($x);
    $questionsWrap
      .append($div);
  }
  $questionsWrap = $('<div>')
  $demo
    .append($questionsWrap);
});

CSS

#demo{

}
#stage{
  text-align:center;
  font-size:64px;
  font-weight:bold;
}
#panels{
  display:flex;
}

#panels canvas{
  width:50%;
  cursor:pointer;
}
#panels canvas:hover{
  opacity:0.8;
}

HTML

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

view-source:https://hi0a.com/demo/-js/js-crypto-ox-quiz/

ABOUT

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

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

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

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

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

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

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

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