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($result)
    .append($enemy)
    .append($player);
  $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
//声　びたちー素材館

#demo{
  background-color:#E4AD10;
  background-image:url(bg.svg);
  background-position:center;
  background-repeat:repeat;
  background-size:cover;
}
#demo *{
  box-sizing:border-box;
}
#player{
  margin:0 auto;
  height:30vh;
  width:90vmin;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:#fff;
  border-radius: 25px;
}
#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:0 auto;
  text-align:center;
  height:40vh;
  line-height:40vh;
}

#enemy img{
  width:40vh;
  height:40vh;
  opacity:0.7;
}

#result{
  margin:0 auto;
  margin-bottom:10vh;
  height:20vh;
  width:90vmin;
  line-height:20vh;
  font-size:12vmin;
  font-weight:bold;
  text-align:center;
  background-color:#fff;
  border-radius: 25px;
}

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

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

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