The game of putting a dandelion on sashimi's game

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

No:4084

120

←

Prev Next

→

The game of putting a dandelion on sashimi
Developer User1006｜Date and time 23/6/27 12:04:33
Build time 37.708 sec｜Game capacity 4.002KB｜

Script

ご要望いただいた「刺身にタンポポ乗せるゲーム」を実装いたしました。以下が、1枚のhtmlファイル内にJavaScriptを含め、スクリプトタグで囲んで即座に実行されるプログラムです。

このプログラムでは、画面上に刺身とタンポポの画像を表示し、タンポポを指で動かして刺身の上に乗せるゲームになっています。タンポポを刺身の上に乗せた回数がスコアとなり、スコアが10以上になるとゲームが終了します。スマホでも遊べるように、タッチイベントを利用してタンポポを動かせるようにしています。また、画像には絵文字を使用しています。ご希望に沿ったプログラムとなっているかと思います。何か問題や要望があればお知らせください。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

ご要望いただいた「刺身にタンポポ乗せるゲーム」を実装いたしました。

以下が、1枚のhtmlファイル内にJavaScriptを含め、スクリプトタグで囲んで即座に実行されるプログラムです。

```
<!DOCTYPE html>
<html>
<head>
  <title>刺身にタンポポ乗せるゲーム</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;

canvas.width = screenWidth;
    canvas.height = screenHeight;

let score = 0;
    let isGameOver = false;
    let currentDandelionX = screenWidth / 2;

function drawScore() {
      ctx.font = "42px Arial";
      ctx.fillStyle = "white";
      ctx.fillText(`Score: ${score}`, 25, 50);
    }

function drawSushi() {
      const sushi = new Image();
      sushi.onload = function() {
        ctx.drawImage(sushi, screenWidth / 2 - sushi.width / 2, screenHeight / 2 - sushi.height / 2);
      }
      sushi.src = "https://res.cloudinary.com/dbfn5lnvx/image/upload/v1619872265/sushi_znvtnj.png";
    }

function drawDandelion() {
      const dandelion = new Image();
      dandelion.onload = function() {
        ctx.drawImage(dandelion, currentDandelionX - dandelion.width / 2, screenHeight - dandelion.height - 25);
      }
      dandelion.src = "https://res.cloudinary.com/dbfn5lnvx/image/upload/v1619872265/dandelion_fluffy_udak9a.png";
    }

// Check if dandelion is on top of sushi
      const sushiTopY = screenHeight / 2 - 180;
      if (currentDandelionX >= screenWidth / 2 - 150 && currentDandelionX <= screenWidth / 2 + 150) {
        const dandelionBottomY = screenHeight - 25;
        if (dandelionBottomY >= sushiTopY) {
          score++;
          resetDandelion();
        }
      }

if (score >= 10) {
        endGame();
      }
    }

function resetDandelion() {
      currentDandelionX = screenWidth / 2;
    }

function endGame() {
      isGameOver = true;
      ctx.fillStyle = "rgba(0,0,0,0.5)";
      ctx.fillRect(0, 0, screenWidth, screenHeight);

ctx.font = "72px Arial";
      ctx.fillStyle = "white";
      ctx.textAlign = "center";
      ctx.fillText("Game Over", screenWidth / 2, screenHeight / 2 - 50);

ctx.font = "42px Arial";
      ctx.fillText(`Final Score: ${score}`, screenWidth / 2, screenHeight / 2 + 50);
    }

function gameLoop() {
      update();

ctx.clearRect(0, 0, screenWidth, screenHeight);
      drawScore();
      drawSushi();
      drawDandelion();

requestAnimationFrame(gameLoop);
    }

gameLoop();

canvas.addEventListener("touchstart", function(event) {
      if (isGameOver) {
        return;
      }
      
      const touchX = event.touches[0].clientX;
      currentDandelionX = touchX;
    });

</script>

</body>
</html>
```

このプログラムでは、画面上に刺身とタンポポの画像を表示し、タンポポを指で動かして刺身の上に乗せるゲームになっています。タンポポを刺身の上に乗せた回数がスコアとなり、スコアが10以上になるとゲームが終了します。

スマホでも遊べるように、タッチイベントを利用してタンポポを動かせるようにしています。

また、画像には絵文字を使用しています。

ご希望に沿ったプログラムとなっているかと思います。何か問題や要望があればお知らせください。