view source

JavaScript

document.title = 'じゃんけんゲーム グー / チョキ / パー';
var stage = 1;
var timer;
var t=0;
var ary = [
  'gu',
  'choki',
  'pa',
];
var boutAry = [
  'かち',
  'まけ',
  'あいこ',
];

var seFiles = [
  'janken',
  'gu',
  'choki',
  'pa',
  'win',
  'lose',
  'draw',
];
var se = {};
seFiles.forEach(function(v){
  se[v] = new Audio(v+'.mp3');
});
console.log(se);
var beforeBout = -1;


$(function(){
  $demo = $('#demo');
  $h1 = $('<h1>').text(document.title);
  $h2 = $('<h2>').text('ゲーセンのあれ 音が出るよ');
  $player = $('<div>',{id:'player'});
  $enemy = $('<div>',{id:'enemy'});
  src = 'janken-'+ary[0]+'.png';
  $img = $('<img>',{src:src});
  $result = $('<div>',{id:'result'});
  $demo
    .append($enemy)
    .append($player)
    .append($result);
  $enemy.append($img);
  $demo.after($h2).after($h1);

  $enemy.on('click', function(){
    shuffleHand();
  });

  ary.forEach(function(v,i){
    var $a = $('<a>',{n:i});
    var src = 'janken-'+v+'.png';
    var $i = $('<img>',{src:src});
    $a.append($i);
    $player.append($a);
    $a.on('click', function(){
      var target = $(this);

      if(!$demo.hasClass('stop')){
        stopHand(target);
      } else {
        shuffleHand();
      }
    });
  });
  var $playerImg = $player.find('a');
  function checkBout(a,b){
    a = Number(a);
    b = Number(b);
    console.log({
      a:a,
      b:b,
    })
    if(a===b){
      return 2;
    }
    if(a===0 && b===1){
      return 0;
    }
    if(a===1 && b===2){
      return 0;
    }
    if(a===2 && b===0){
      return 0;
    }
    return 1;
  }
  function stopHand(target){
    clearInterval(timer);
    $demo.addClass('stop');
    $playerImg.removeClass('select');
    target.addClass('select');
    var playerN = target.attr('n');
    var enemyN = $img.attr('n');
    var bout = checkBout(playerN, enemyN);
    var boutText;
    if(bout === 0){
      boutText = 'win';
      stage++;
    } else if(bout === 1) {
      boutText = 'lose';
      stage--;
    } else {
      boutText = 'draw';
    }
    beforeBout = bout;
    target.attr({bout:boutText});
    se[ary[enemyN]].play();
    setTimeout(function(){
      se[boutText].play();
    },399)
    $result.text(boutAry[bout]);
  }
  function changeHand(){
    t++;
    if(t>=ary.length){t=0;}
    var src = 'janken-'+ary[t]+'.png';
    $img.attr({src:src,n:t});
  }
  function shuffleHand(){
    if(beforeBout !== 2){
      $result.text('じゃんけん!');
      se['janken'].play();
    }
    var pace = 100-(stage*13);
    if(pace < 7){pace=7;}
    if($demo.hasClass('stop')){
      $playerImg.removeAttr('bout');
      $playerImg.removeClass('select');
      $demo.removeClass('stop');
      timer = setInterval(function(){
        changeHand();
      }, pace);
    }
  }
  $demo.addClass('stop');
  shuffleHand();

});
//http://www.vita-chi.net/sozai1.htm
//声 びたちー素材館

CSS

#player{
  height:30vmin;
  display:flex;
  justify-content: center;
  align-items: center;
}
#player img{
  width:25vmin;
  height:25vmin;
  opacity:0.8;
}
#player a{
  border-radius:12px;
  cursor:pointer;
}
#player a:hover{
  background-color:rgba(0,0,0,0.1);
  opacity:1;
}
#player a[bout="win"]{
  background-color:rgba(90,200,200,0.5);
}
#player a[bout="lose"]{
  background-color:rgba(255,120,100,0.5);
}
#player a[bout="tie"]{
  background-color:rgba(240,170,10,0.5);
}

#enemy{
  margin-top:10px;
  text-align:center;
  height:40vmin;
}
#enemy img{
  width:40vmin;
  height:40vmin;
  opacity:0.7;
}

#result{
  height:20vmin;
  line-height:20vmin;
  font-size:16vmin;
  font-weight:bold;
  text-align:center;
}

#demo.stop #enemy img{
  opacity:1;
}
#demo.stop #player img{
  opacity:0.05;
}
#demo.stop #player .select img{
  opacity:1;
}

HTML

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

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

ABOUT

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

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

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

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

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

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

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