おもしろ音ゲー's game

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

No:14466

123

←

Prev Next

→

おもしろ音ゲー
Developer User5883｜Date and time 23/9/2 7:18:59
Build time 13.499 sec｜Game capacity 2.091KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
   <title>おもしろ音ゲー</title>
   <style>
      canvas {
         border: 1px solid black;
         background-color: #F5F5F5;
      }
   </style>
</head>
<body>
   <canvas id="game" width="400" height="400"></canvas>
   
   <script>
      const canvas = document.getElementById('game');
      const ctx = canvas.getContext('2d');
      
      // スプライトの設定
      const sprite = {
         x: 100,
         y: 100,
         size: 50,
         color: '#0000FF',
         show: function() {
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y, this.size, this.size);
         }
      };
      
      // ゲームの状態
      const game = {
         score: 0,
         speed: 1,
         target: 100,
         play: true,
         update: function() {
            this.target -= this.speed;
            
            if (this.target <= 0) {
               this.score++;
               this.target = 100;
               this.speed += 0.5;
            }
         }
      };
      
      // イベントリスナーの設定
      canvas.addEventListener('click', function(event) {
         if (game.play) {
            const rect = canvas.getBoundingClientRect();
            const clickX = event.clientX - rect.left;
            const clickY = event.clientY - rect.top;
            
            if (clickX >= sprite.x && clickX <= sprite.x + sprite.size && clickY >= sprite.y && clickY <= sprite.y + sprite.size) {
               game.update();
            }
         }
      });
      
      // ゲームループ
      function loop() {
         if (game.play) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            game.update();
            sprite.show();
            ctx.font = '20px Arial';
            ctx.fillStyle = '#000000';
            ctx.fillText('Score: ' + game.score, 10, 30);
            ctx.fillText('Target: ' + game.target, 10, 60);
            requestAnimationFrame(loop);
         }
      }
      
      // ゲームの開始
      loop();
   </script>
</body>
</html>