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

No:22637

←

Prev Next

→

いたわりの言葉
Developer バファリンヌ｜Date and time 23/10/23 19:54:53
Build time 37.578 sec｜Game capacity 2.366KB｜

Script

はじめまして、私はAIですので、直接的な感情表現や理解はしませんが、お手伝いできるかもしれません。以下に、単純なゲームの例を示しますので、ご参考までにご覧ください。

簡単なゲーム

スコア: 0

このゲームは、画面内に表示される円をクリックするとスコアが加算され、新しい円がランダムな位置に表示されます。スコアは画面上部に表示されます。ただし、スコアの表示の前提として`drawCircle`関数を作成し、カラーコード`red`を指定して円を描画しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>簡単なゲーム</title>
  <style>
    body {
      display: flex;
      height: 100vh;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <h1>簡単なゲーム</h1>
  <p id="score">スコア: 0</p>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");

let score = 0;

const drawCircle = (x, y, radius, color) => {
      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.fillStyle = color;
      context.fill();
      context.closePath();
    };

const updateScore = () => {
      const scoreElement = document.getElementById("score");
      scoreElement.textContent = `スコア: ${score}`;
    };

const handleClick = (event) => {
      const rect = canvas.getBoundingClientRect();
      const mouseX = event.clientX - rect.left;
      const mouseY = event.clientY - rect.top;

if (
        mouseX >= circleX - circleRadius &&
        mouseX <= circleX + circleRadius &&
        mouseY >= circleY - circleRadius &&
        mouseY <= circleY + circleRadius
      ) {
        score++;
        updateScore();
        drawCircle(
          Math.random() * canvas.width,
          Math.random() * canvas.height,
          circleRadius,
          "red"
        );
      }
    };

const circleRadius = 40;
    let circleX = Math.random() * canvas.width;
    let circleY = Math.random() * canvas.height;

drawCircle(circleX, circleY, circleRadius, "red");
    updateScore();

canvas.addEventListener("click", handleClick);
  </script>
</body>
</html>
```