leaving a decision to someone else (often of a meal to be selected by the chef)'s game

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

No:3465

2324

←

Prev Next

→

leaving a decision to someone else (often of a mea..ALL
Developer User3707｜Date and time 23/6/25 6:08:08
Build time 22.306 sec｜Game capacity 2.534KB｜

Script

モンスター退治ゲーム

スコア: 0

説明：このゲームでは、画面内にランダムな位置に出現するモンスターをクリックして退治するというものです。スマホでもプレイ可能で、スコアが表示されます。canvas上で描画を行い、JavaScriptでモンスターの位置を更新する処理をしています。

←

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">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>モンスター退治ゲーム</title>
  <style>
    body {
      font-size: 2rem;
      text-align: center;
      margin: 0;
      padding-top: 10%;
    }
    canvas {
      width: 100%;
      height: 80%;
      border: 1px solid #CCC;
    }
    button {
      display: inline-block;
      border-radius: 5px;
      background-color: #EEE;
      color: #333;
      font-size: 2rem;
      padding: 0.5rem 1.5rem;
      margin-top: 20px;
      cursor: pointer;
    }
    .score {
      font-size: 3rem;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <button id="startBtn">スタート</button>
  <p class="score">スコア: 0</p>

canvas.width = window.innerWidth;
    canvas.height = window.innerHeight * 0.8;

let score = 0;
    let monsterX = Math.random() * (canvas.width - 50);
    let monsterY = Math.random() * (canvas.height - 50);

function drawMonster() {
      ctx.fillStyle = '#FF9900';
      ctx.fillRect(monsterX, monsterY, 50, 50);
    }

function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

function updateScore() {
      score++;
      scoreElm.textContent = `スコア: ${score}`;
    }

function startGame() {
      clearCanvas();
      drawMonster();
    }

startBtn.addEventListener('click', startGame);

canvas.addEventListener('click', function(event) {
      const mouseX = event.clientX;
      const mouseY = event.clientY;

if (mouseX >= monsterX && mouseX <= monsterX + 50 &&
          mouseY >= monsterY && mouseY <= monsterY + 50) {
        updateScore();
        monsterX = Math.random() * (canvas.width - 50);
        monsterY = Math.random() * (canvas.height - 50);
        clearCanvas();
        drawMonster();
      }
    });
  </script>
</body>
</html>