canonno/index.html Secret

## index.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>Num Dance</title>
  </head>

  <body bgcolor="#10100E">
    <div>Teachable Machine Image Model - p5.js and ml5.js</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 src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
    <script type="text/javascript">

  // Classifier Variable
  let classifier;
  // Model URL
  let imageModelURL = 'https://teachablemachine.withgoogle.com/models/J0HX-DHu2/';

  // Video
  let video;
  let flippedVideo;
  // To store the classification
  let label = "";
  let label_before = "";

   //時間周り
   let startTime;
   const oneSec = 1000;
   let elapsedTime = 0;
   const time_limit_max = 60;
   let time_limit;
   let start_sec;
   let elapsed_sec = 0;
   const sec_max = 7;
   let sec = 7;

   //画面モード
   let mode="game";

   //お題
   let odai_num = 1;

  // Load the model first
  function preload() {
    classifier = ml5.imageClassifier(imageModelURL + 'model.json');
  }

  //初期化処理
  function setup() {
    createCanvas(640, 640);
    //タイマー始動
    startTime = millis();
    start_sec = millis();

    //ゲーム設定の初期化
    mode = "game";
    odai_num = 1;
    time_limit = time_limit_max;

    // Create the video
    video = createCapture(VIDEO);
    video.size(640, 480);
    video.hide();

    flippedVideo = ml5.flipImage(video);
    // Start classifying
    classifyVideo();
  }

  // Get a prediction for the current video frame
  function classifyVideo() {
    flippedVideo = ml5.flipImage(video)
    classifier.classify(flippedVideo, gotResult);
    flippedVideo.remove();

  }

  // When we get a result
  function gotResult(error, results) {
    // If there is an error
    if (error) {
      console.error(error);
      return;
    }
    label_before = label;
    // The results are in an array ordered by confidence.
    // console.log(results[0]);
    label = results[0].label;

    if (label_before==label && label == odai_num){
      const now = millis();
      elapsed_sec = now - start_sec;
      if (elapsed_sec >= 1000){
        sec--;
        start_sec = millis();
        if(sec <= 0){
          next_stage();
        }
      }
    }else{
      sec = sec_max;
    }
    // Classifiy again!
    classifyVideo();
  }

  //常にここが実行される
  function draw() {
    //ゲームの状態によって処理を変える
    switch (mode){
      case "game":
        play_game();
        break;
      case "game_over":
        game_over();
        break;
      case "game_clear":
        game_clear();
        break;

    }
  }

  //ゲーム中の処理
  function play_game(){
    background(0);
    // Draw the video
    image(flippedVideo, 0, 0);

    // Draw the label
    fill(255);

    //画面右側の文字群
    textSize(50);
    textAlign(CENTER);
    text(label, 450, height - 4);
    textSize(25);
    textAlign(CENTER);
    text("あと"+sec+"秒耐えろ！", 450, 560);

    //画面左側の文字群
    textSize(50);
    textAlign(CENTER);
    text("お題："+odai_num, 190, height - 4);
    textSize(25);
    textAlign(CENTER);
    text("残り時間あと"+time_limit+"秒", 190, 560);

    //経過時間を測定
    const now = millis();
    elapsedTime = now - startTime;

    //1000ms経過したらtime_limitを1下げる
    if(elapsedTime >= oneSec){
      time_limit--;
      startTime = millis();

      //time_limitが0になったらmodeを変える
      if (time_limit <= 0){
        mode = "game_over";
      }
    }
  }

  //次のお題へ
  function next_stage(){
    odai_num++

    //お題が10になったらクリア
    if(odai_num >=10){
      mode = "game_clear";
    }

    //お題クリアで60秒追加
    time_limit +=60;
    sec = sec_max;
  }

　//ゲームクリアの処理
  function game_clear(){
    background(0);
    text("数字の気持ちが完璧に分かりました", 250, 300);
    textSize(25);
    text("Press r button to retry !", 220, 350);
    if (key == "r") {
        key = 0;
        setup();
    }
  }

  //ゲームオーバーの処理
  function game_over(){
    background(0)
    text(odai_num-1+"まで気持ちが分かりました", 250, 300);
    textSize(25);
    text("Press r button to retry !", 220, 350);
    if (key == "r") {
      key = 0;
      setup();
    }
  }


</script>
  </body>
</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>Num Dance</title>
	</head>

	<body bgcolor="#10100E">
	<div>Teachable Machine Image Model - p5.js and ml5.js</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 src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
	<script type="text/javascript">

	// Classifier Variable
	let classifier;
	// Model URL
	let imageModelURL = 'https://teachablemachine.withgoogle.com/models/J0HX-DHu2/';

	// Video
	let video;
	let flippedVideo;
	// To store the classification
	let label = "";
	let label_before = "";

	//時間周り
	let startTime;
	const oneSec = 1000;
	let elapsedTime = 0;
	const time_limit_max = 60;
	let time_limit;
	let start_sec;
	let elapsed_sec = 0;
	const sec_max = 7;
	let sec = 7;

	//画面モード
	let mode="game";

	//お題
	let odai_num = 1;

	// Load the model first
	function preload() {
	classifier = ml5.imageClassifier(imageModelURL + 'model.json');
	}

	//初期化処理
	function setup() {
	createCanvas(640, 640);
	//タイマー始動
	startTime = millis();
	start_sec = millis();

	//ゲーム設定の初期化
	mode = "game";
	odai_num = 1;
	time_limit = time_limit_max;

	// Create the video
	video = createCapture(VIDEO);
	video.size(640, 480);
	video.hide();

	flippedVideo = ml5.flipImage(video);
	// Start classifying
	classifyVideo();
	}

	// Get a prediction for the current video frame
	function classifyVideo() {
	flippedVideo = ml5.flipImage(video)
	classifier.classify(flippedVideo, gotResult);
	flippedVideo.remove();

	}

	// When we get a result
	function gotResult(error, results) {
	// If there is an error
	if (error) {
	console.error(error);
	return;
	}
	label_before = label;
	// The results are in an array ordered by confidence.
	// console.log(results[0]);
	label = results[0].label;

	if (label_before==label && label == odai_num){
	const now = millis();
	elapsed_sec = now - start_sec;
	if (elapsed_sec >= 1000){
	sec--;
	start_sec = millis();
	if(sec <= 0){
	next_stage();
	}
	}
	}else{
	sec = sec_max;
	}
	// Classifiy again!
	classifyVideo();
	}

	//常にここが実行される
	function draw() {
	//ゲームの状態によって処理を変える
	switch (mode){
	case "game":
	play_game();
	break;
	case "game_over":
	game_over();
	break;
	case "game_clear":
	game_clear();
	break;

	}
	}

	//ゲーム中の処理
	function play_game(){
	background(0);
	// Draw the video
	image(flippedVideo, 0, 0);

	// Draw the label
	fill(255);

	//画面右側の文字群
	textSize(50);
	textAlign(CENTER);
	text(label, 450, height - 4);
	textSize(25);
	textAlign(CENTER);
	text("あと"+sec+"秒耐えろ！", 450, 560);

	//画面左側の文字群
	textSize(50);
	textAlign(CENTER);
	text("お題："+odai_num, 190, height - 4);
	textSize(25);
	textAlign(CENTER);
	text("残り時間あと"+time_limit+"秒", 190, 560);

	//経過時間を測定
	const now = millis();
	elapsedTime = now - startTime;

	//1000ms経過したらtime_limitを1下げる
	if(elapsedTime >= oneSec){
	time_limit--;
	startTime = millis();

	//time_limitが0になったらmodeを変える
	if (time_limit <= 0){
	mode = "game_over";
	}
	}
	}

	//次のお題へ
	function next_stage(){
	odai_num++

	//お題が10になったらクリア
	if(odai_num >=10){
	mode = "game_clear";
	}

	//お題クリアで60秒追加
	time_limit +=60;
	sec = sec_max;
	}

	//ゲームクリアの処理
	function game_clear(){
	background(0);
	text("数字の気持ちが完璧に分かりました", 250, 300);
	textSize(25);
	text("Press r button to retry !", 220, 350);
	if (key == "r") {
	key = 0;
	setup();
	}
	}

	//ゲームオーバーの処理
	function game_over(){
	background(0)
	text(odai_num-1+"まで気持ちが分かりました", 250, 300);
	textSize(25);
	text("Press r button to retry !", 220, 350);
	if (key == "r") {
	key = 0;
	setup();
	}
	}



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