AI game creator

Click here for free DL of the app version that can save data.

No:852

225

←

Prev Next

→

beat-em-up game
Developer User3164｜Date and time 23/6/17 20:24:10
Build time 20.671 sec｜Game capacity 1.857KB｜

Script

操作方法: タップすると音符が落ちてくるので、正しいタイミングでボタンを押してください。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>音ゲー</title>
  <style>
    canvas {
      width: 100%;
      height: 100%;
      background: black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <div>操作方法: タップすると音符が落ちてくるので、正しいタイミングでボタンを押してください。</div>
  <audio id="sound" src="sound.mp3"></audio>
  <script>
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");
    const sound = document.getElementById("sound");
    
    const notes = [];
    let score = 0;
    
    document.addEventListener("mousedown", (event) => {
      const mouseX = event.offsetX;
      const mouseY = event.offsetY;
      const note = notes.find((note) => {
        return (
          note.x < mouseX && mouseX < note.x + note.width &&
          note.y < mouseY && mouseY < note.y + note.height
        );
      });
      
      if (note) {
        score += 100;
        notes.splice(notes.indexOf(note), 1);
        sound.currentTime = 0;
        sound.play();
      }
    });
    
    setInterval(() => {
      const x = Math.random() * canvas.width * 0.8;
      const width = 50;
      const height = 50;
      const speed = 10;
      const note = {x: x, y: -height, width: width, height: height, speed: speed};
      notes.push(note);
    }, 1000);
    
    setInterval(() => {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      notes.forEach((note) => {
        note.y += note.speed;
        context.fillStyle = "white";
        context.fillRect(note.x, note.y, note.width, note.height);
      });
      
      context.fillStyle = "white";
      context.font = "20px sans-serif";
      context.fillText("SCORE: " + score, 10, 30);
    }, 1000/60);
  </script>
</body>
</html>