canonno/haihai.html

## haihai.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="image-button.css">
    <title>ﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｱｱｱｱｲｨｯ</title>
  </head>

  <body bgcolor="#10100E">
    <div id = "canvas"></div>

    <a class="btn-cross" onclick="startSound()">
      結末ばかりに気を取られ
    </a>
    <a class="btn-cross" onclick="stopSound()">
      ﾊｱｱｱｱｱｱｱｱｱｱｲｨｯｯｯ
    </a>

  <div id="player1"></div>
  <div id="player2"></div>
  <div id="player3"></div>
  <div id="player4"></div>
  <div id="player5"></div>
  <div id="player6"></div>
  <div id="player7"></div>
  <div id="player8"></div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script type="text/javascript">

      //////////////////////////////////////
      // 画面に表示するために使うGlobal変数 //
      //////////////////////////////////////
      let label = 'Now Loading...';

      ///////////////////////////////////////////////
      // Teachable Machineによる判定と表示ロジック ///
      //////////////////////////////////////////////

      //キャンバスの作成・判定
      function setup() {
        let canvas = createCanvas(400, 300);
        canvas.parent("canvas");
      }

      //labelを常に描画し続ける処理
      function draw() {
        background(0);
        // Draw the label in the canvas
        fill(255);
        textSize(18);
        textAlign(CENTER, CENTER);
        text(label, width / 2, height / 2);
      }

        ////////////////////////////////
      // Youtube Player API側の処理 //
      ////////////////////////////////

      //おまじない
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      //YoutubePlayerを埋め込む処理
      var player1;
      var player2;
      var player3;
      var player4;
      var player5;
      var player6;
      var player7;
      var player8;

      const sec = 1.5
      const base = 35
      let sec1 = base
      let sec2 = base + Math.random() * sec
      let sec3= base + sec + Math.random() * sec
      let sec4 = base + sec*2 + Math.random() * sec
      let sec5 = base + sec*3 + Math.random() * sec
      let sec6 = base + sec*4 + Math.random() * sec
      let sec7 = base + sec*5 + Math.random() * sec
      let sec8 = base + sec*6 + Math.random() * sec

      var player_list;

      let stage = window.prompt("いくつのｿｳﾙでﾊｱｱｱｱｲｨｯｯｯする？(1～8)","")
      let count = 0;
      let loss = 0;
      let hai_time = 67.016

      const vol = 10;

      const cond_dic = {
          height: '0',
          width: '0',
          videoId:"Ujb-ZeX7Mo8",
          events: {
            'onReady': onPlayerReady,
            'onStateChange':onPlayerStateChage
          }
        }

      //読み込んだ際に最初に走る処理
      function onYouTubeIframeAPIReady() {
        //player1の定義
        player1 = new YT.Player('player1', cond_dic);
        player2 = new YT.Player('player2', cond_dic);
        player3 = new YT.Player('player3', cond_dic);
        player4 = new YT.Player('player4', cond_dic);
        player5 = new YT.Player('player5', cond_dic);
        player6 = new YT.Player('player6', cond_dic);
        player7 = new YT.Player('player7', cond_dic);
        player8 = new YT.Player('player8', cond_dic);


        player_list= [
        {"player":player1,"sec":sec1},
        {"player":player2,"sec":sec2},
        {"player":player3,"sec":sec3},
        {"player":player4,"sec":sec4},
        {"player":player5,"sec":sec5},
        {"player":player6,"sec":sec6},
        {"player":player7,"sec":sec7},
        {"player":player8,"sec":sec8},
      ]}


      async function startSound(){
        count = 0;
        loss = 0;
        label = "Music Now loading..."
        for (let idx= 0;idx<stage;idx++){
          console.log("player"+idx+"stareted")
          player_list[idx]["player"].loadVideoById({
          videoId:"Ujb-ZeX7Mo8",
          startSeconds:player_list[idx]["sec"],
          endSeconds:80,
        })
          player_list[idx]["player"].playVideo();
        }
      }

      //PlayerがReadyになったときに走る処理
      function onPlayerReady(event) {
        //音量をセット
        player = event.target
        player.setVolume(vol);
        label = "ﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｱｱｱｱｱｱｱｱｱｱｱｱｱｲｨｯｯｯｯｯｯｯｯｯｯｯｯ"
      }

      function onPlayerStateChage(event){
        if (event.data == YT.PlayerState.PLAYING){
          label = ""
        }
      }

      function stopSound(){
        let player_time_list = []
        for (let idx=0;idx<stage;idx++){
          player_time_list.push(player_list[idx]["player"].getCurrentTime())
        }
        player_time_list.sort(compare)

        let dif = player_time_list[count]-hai_time;
        loss += Math.abs(dif)
        result = hantei(dif)

        label += "\n"+(count+1)+"ﾊｱｨ:"+result
        count++

        if (count == stage){
          result = final_result(loss)
          label += "\n\n結果:"+result
        }

        //https://www.sejuku.net/blog/62904
        function compare(a,b){
          return b- a;
        }
      }
      function hantei(dif){
        let result;
        let thre1 = 2
        let thre2 = 0.5
        let thre3 = 0.05
        if (dif < -1*thre1){
          result = "早すぎる"
        }else if (dif>=-1*thre1 && dif<-1*thre2){
          result = "ちょっと早い"
        }else if (dif>=-1*thre2&&dif<-1*thre3 ){
          result = "ナイス！"
        }else if (dif>=-1*thre3&&dif<=thre3){
          result = "ﾊﾟｱｱｱｧﾌｪｸﾄｯｯｯ！"
        }else if (dif>thre3&&dif<=thre2){
          result = "ナイス！"
        }else if (dif>thre2 && dif<=thre1){
          result = "ちょっと遅い"
        }else if (dif>thre1){
          result = "遅すぎる"
        }
        return result
      }

      function final_result(loss){
        let result;
        if (loss > 0.5*stage){
          result = "もう少し頑張ろう！ﾊｱｱｱｱｲｨｯｯｯ"
        } else if (loss<= 0.5*stage && loss>0.05*stage){
          result = "ステージクリア！！ﾊｱｱｱｱｲｨｯｯｯ"
        } else if (loss <= 0.5*stage){
          result = "完璧だ！！ｳﾙﾄﾗｿｳｳｩｯﾊｱｱｱｲｯｯｯｯｯ"
        }
        return result
      }


    </script>
  </body>
</html>

## image-button.css
  .btn-cross {
    display: inline-block;
    position: relative;
    padding: 0.25em 1em;
    border-top: solid 2px rgb(182, 242, 247);
    border-bottom: solid 2px rgb(182, 242, 247);
    text-decoration: none;
    font-weight: bold;
    color: #cbf1f8;
  }
  .btn-cross:before, .btn-cross:after {
    content: '';
    position: absolute;
    top: -7px;
    width: 2px;
    height: -webkit-calc(100% + 14px);
    height: calc(100% + 14px);
    background-color: rgb(182, 242, 247);
    transition: .3s;
  }
  .btn-cross:before {
    left: 7px;
  }
  .btn-cross:after {
    right: 7px;
  }
  .btn-cross:hover:before {
    top: 0px;
    left:0;
    height: 100%;
  }
  .btn-cross:hover:after {
    top: 0px;
    right: 0;
    height: 100%;
  }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="image-button.css">
	<title>ﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｱｱｱｱｲｨｯ</title>
	</head>

	<body bgcolor="#10100E">
	<div id = "canvas"></div>

	<a class="btn-cross" onclick="startSound()">
	結末ばかりに気を取られ
	</a>
	<a class="btn-cross" onclick="stopSound()">
	ﾊｱｱｱｱｱｱｱｱｱｱｲｨｯｯｯ
	</a>

	<div id="player1"></div>
	<div id="player2"></div>
	<div id="player3"></div>
	<div id="player4"></div>
	<div id="player5"></div>
	<div id="player6"></div>
	<div id="player7"></div>
	<div id="player8"></div>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
	<script type="text/javascript">

	//////////////////////////////////////
	// 画面に表示するために使うGlobal変数 //
	//////////////////////////////////////
	let label = 'Now Loading...';

	///////////////////////////////////////////////
	// Teachable Machineによる判定と表示ロジック ///
	//////////////////////////////////////////////

	//キャンバスの作成・判定
	function setup() {
	let canvas = createCanvas(400, 300);
	canvas.parent("canvas");
	}

	//labelを常に描画し続ける処理
	function draw() {
	background(0);
	// Draw the label in the canvas
	fill(255);
	textSize(18);
	textAlign(CENTER, CENTER);
	text(label, width / 2, height / 2);
	}

	////////////////////////////////
	// Youtube Player API側の処理 //
	////////////////////////////////

	//おまじない
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	//YoutubePlayerを埋め込む処理
	var player1;
	var player2;
	var player3;
	var player4;
	var player5;
	var player6;
	var player7;
	var player8;

	const sec = 1.5
	const base = 35
	let sec1 = base
	let sec2 = base + Math.random() * sec
	let sec3= base + sec + Math.random() * sec
	let sec4 = base + sec2 + Math.random() sec
	let sec5 = base + sec3 + Math.random() sec
	let sec6 = base + sec4 + Math.random() sec
	let sec7 = base + sec5 + Math.random() sec
	let sec8 = base + sec6 + Math.random() sec

	var player_list;

	let stage = window.prompt("いくつのｿｳﾙでﾊｱｱｱｱｲｨｯｯｯする？(1～8)","")
	let count = 0;
	let loss = 0;
	let hai_time = 67.016

	const vol = 10;

	const cond_dic = {
	height: '0',
	width: '0',
	videoId:"Ujb-ZeX7Mo8",
	events: {
	'onReady': onPlayerReady,
	'onStateChange':onPlayerStateChage
	}
	}

	//読み込んだ際に最初に走る処理
	function onYouTubeIframeAPIReady() {
	//player1の定義
	player1 = new YT.Player('player1', cond_dic);
	player2 = new YT.Player('player2', cond_dic);
	player3 = new YT.Player('player3', cond_dic);
	player4 = new YT.Player('player4', cond_dic);
	player5 = new YT.Player('player5', cond_dic);
	player6 = new YT.Player('player6', cond_dic);
	player7 = new YT.Player('player7', cond_dic);
	player8 = new YT.Player('player8', cond_dic);


	player_list= [
	{"player":player1,"sec":sec1},
	{"player":player2,"sec":sec2},
	{"player":player3,"sec":sec3},
	{"player":player4,"sec":sec4},
	{"player":player5,"sec":sec5},
	{"player":player6,"sec":sec6},
	{"player":player7,"sec":sec7},
	{"player":player8,"sec":sec8},
	]}


	async function startSound(){
	count = 0;
	loss = 0;
	label = "Music Now loading..."
	for (let idx= 0;idx<stage;idx++){
	console.log("player"+idx+"stareted")
	player_list[idx]["player"].loadVideoById({
	videoId:"Ujb-ZeX7Mo8",
	startSeconds:player_list[idx]["sec"],
	endSeconds:80,
	})
	player_list[idx]["player"].playVideo();
	}
	}

	//PlayerがReadyになったときに走る処理
	function onPlayerReady(event) {
	//音量をセット
	player = event.target
	player.setVolume(vol);
	label = "ﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｲﾊｱｱｱｱｱｱｱｱｱｱｱｱｱｲｨｯｯｯｯｯｯｯｯｯｯｯｯ"
	}

	function onPlayerStateChage(event){
	if (event.data == YT.PlayerState.PLAYING){
	label = ""
	}
	}

	function stopSound(){
	let player_time_list = []
	for (let idx=0;idx<stage;idx++){
	player_time_list.push(player_list[idx]["player"].getCurrentTime())
	}
	player_time_list.sort(compare)

	let dif = player_time_list[count]-hai_time;
	loss += Math.abs(dif)
	result = hantei(dif)

	label += "\n"+(count+1)+"ﾊｱｨ:"+result
	count++

	if (count == stage){
	result = final_result(loss)
	label += "\n\n結果:"+result
	}

	//https://www.sejuku.net/blog/62904
	function compare(a,b){
	return b- a;
	}
	}
	function hantei(dif){
	let result;
	let thre1 = 2
	let thre2 = 0.5
	let thre3 = 0.05
	if (dif < -1*thre1){
	result = "早すぎる"
	}else if (dif>=-1thre1 && dif<-1thre2){
	result = "ちょっと早い"
	}else if (dif>=-1thre2&&dif<-1thre3 ){
	result = "ナイス！"
	}else if (dif>=-1*thre3&&dif<=thre3){
	result = "ﾊﾟｱｱｱｧﾌｪｸﾄｯｯｯ！"
	}else if (dif>thre3&&dif<=thre2){
	result = "ナイス！"
	}else if (dif>thre2 && dif<=thre1){
	result = "ちょっと遅い"
	}else if (dif>thre1){
	result = "遅すぎる"
	}
	return result
	}

	function final_result(loss){
	let result;
	if (loss > 0.5*stage){
	result = "もう少し頑張ろう！ﾊｱｱｱｱｲｨｯｯｯ"
	} else if (loss<= 0.5stage && loss>0.05stage){
	result = "ステージクリア！！ﾊｱｱｱｱｲｨｯｯｯ"
	} else if (loss <= 0.5*stage){
	result = "完璧だ！！ｳﾙﾄﾗｿｳｳｩｯﾊｱｱｱｲｯｯｯｯｯ"
	}
	return result
	}


	</script>
	</body>
	</html>
	.btn-cross {
	display: inline-block;
	position: relative;
	padding: 0.25em 1em;
	border-top: solid 2px rgb(182, 242, 247);
	border-bottom: solid 2px rgb(182, 242, 247);
	text-decoration: none;
	font-weight: bold;
	color: #cbf1f8;
	}
	.btn-cross:before, .btn-cross:after {
	content: '';
	position: absolute;
	top: -7px;
	width: 2px;
	height: -webkit-calc(100% + 14px);
	height: calc(100% + 14px);
	background-color: rgb(182, 242, 247);
	transition: .3s;
	}
	.btn-cross:before {
	left: 7px;
	}
	.btn-cross:after {
	right: 7px;
	}
	.btn-cross:hover:before {
	top: 0px;
	left:0;
	height: 100%;
	}
	.btn-cross:hover:after {
	top: 0px;
	right: 0;
	height: 100%;
	}