Maneki Neko Ranbu💪🐱✨ on canvas's game

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

No:7910

166

←

Prev Next

→

Maneki Neko Ranbu💪🐱✨ on canvas
Developer User3840｜Date and time 23/7/10 21:51:37
Build time 19.207 sec｜Game capacity 3.734KB｜

Script

以下は、JavaScriptを使用して実装された「招き猫乱舞」ゲームの例です。このゲームでは、招き猫が画面内をランダムに動き回り、タップすることでポイントを獲得することが目的です。

このゲームでは、招き猫の画像をキャンバス上で表示し、その位置をランダムに変更しながら動き回ります。画面内をタップして招き猫をクリックすると、ポイントが加算されます。招き猫が画面外に出ても反対側から再び現れるようになっています。ゲームオーバーになった場合は、ポイントの合計がアラートで表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>招き猫乱舞</title>
  <style>
    #gameCanvas {
      width: 100vw;
      height: 100vh;
      background-color: lightgray;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// 招き猫の画像
    const catImage = new Image();
    catImage.src = 'path_to_cat_image.png';

// ゲームの状態
    let score = 0;
    let isPlaying = true;

// ゲームオーバー時の処理
    function gameOver() {
      isPlaying = false;
      alert('Game Over! Your score: ' + score);
    }

// 招き猫のクラス
    class Cat {
      constructor(x, y, speedX, speedY) {
        this.x = x;
        this.y = y;
        this.speedX = speedX;
        this.speedY = speedY;
        this.width = 100;
        this.height = 100;
      }

update() {
        this.x += this.speedX;
        this.y += this.speedY;

// 画面外に出たら反対側に移動する
        if (this.x > canvas.width + this.width) {
          this.x = -this.width;
        } else if (this.x < -this.width) {
          this.x = canvas.width + this.width;
        }

if (this.y > canvas.height + this.height) {
          this.y = -this.height;
        } else if (this.y < -this.height) {
          this.y = canvas.height + this.height;
        }
      }

draw() {
        ctx.drawImage(catImage, this.x, this.y, this.width, this.height);
      }
    }
    
    // 招き猫の配列
    const cats = [];

// 初期状態で3匹の招き猫を生成
    for (let i = 0; i < 3; i++) {
      const randomX = Math.random() * canvas.width;
      const randomY = Math.random() * canvas.height;
      const randomSpeedX = (Math.random() - 0.5) * 2;
      const randomSpeedY = (Math.random() - 0.5) * 2;
      const cat = new Cat(randomX, randomY, randomSpeedX, randomSpeedY);
      cats.push(cat);
    }

// キャンバスをクリックしたときの処理
    canvas.addEventListener('click', function(event) {
      if (!isPlaying) {
        return;
      }

for (const cat of cats) {
        if (
          event.clientX >= cat.x &&
          event.clientX <= cat.x + cat.width &&
          event.clientY >= cat.y &&
          event.clientY <= cat.y + cat.height
        ) {
          score++;
          cat.x = -cat.width;
          cat.y = -cat.height;
        }
      }
    });

// ゲームのメインループ
    function gameLoop() {
      if (!isPlaying) {
        return;
      }

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (const cat of cats) {
        cat.update();
        cat.draw();
      }

requestAnimationFrame(gameLoop);
    }

gameLoop();
  </script>
</body>
</html>
```