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

No:2733

1425

←

Prev Next

→

Death Star vs. old man
Developer User3591｜Date and time 23/6/22 13:39:05
Build time 33.68 sec｜Game capacity 3.639KB｜

Script

デススターvsおっさん

START

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>デススターvsおっさん</title>
  </head>
  <body>
    <h1>デススターvsおっさん</h1>
    <a href="#" onclick="startGame()">START</a>
    
    <canvas id="canvas" width="300" height="500"></canvas>
    
    <script>
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      let score = 0;
      
      // デススターを描画する関数
      function drawDeathStar(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 30, 0, 2 * Math.PI);
        ctx.fillStyle = "gray";
        ctx.fill();
        ctx.closePath();
        ctx.beginPath();
        ctx.arc(x, y, 40, 0, 2 * Math.PI);
        ctx.strokeStyle = "red";
        ctx.stroke();
        ctx.closePath();
      }
      
      // おっさんを描画する関数
      function drawMan(x, y) {
        // おっさんの体
        ctx.fillRect(x - 10, y - 50, 20, 50);
        // おっさんの顔
        ctx.beginPath();
        ctx.arc(x, y - 55, 10, 0.2 * Math.PI, 1.8 * Math.PI);
        ctx.lineTo(x - 10, y - 65);
        ctx.lineTo(x + 10, y - 65);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.closePath();
        // おっさんの帽子
        ctx.beginPath();
        ctx.arc(x, y - 60, 15, 0, 2 * Math.PI);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.closePath();
        ctx.beginPath();
        ctx.arc(x, y - 60, 10, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();
        ctx.closePath();
      }
      
      // おっさんが動く関数
      function moveMan(event) {
        // スマホの場合はタップした場所に移動する
        if (event.type === "touchstart" || event.type === "touchmove") {
          manX = event.touches[0].clientX - canvas.offsetLeft;
        } else { // PCの場合はマウスの場所に移動する
          manX = event.clientX - canvas.offsetLeft;
        }
      }
      
      // ゲームのメイン関数
      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawDeathStar(deathStarX, deathStarY);
        drawMan(manX, manY);
        manY++;
        // おっさんがデススターにぶつかった場合
        if (manX >= deathStarX - 40 && manX <= deathStarX + 40 && manY >= deathStarY - 40 && manY <= deathStarY + 40) {
          score--;
          manY = 0;
        }
        // おっさんがキャンバスの外に出た場合
        if (manY > canvas.height) {
          score++;
          manY = 0;
          deathStarX = Math.floor(Math.random() * canvas.width);
          deathStarY = -50;
        }
        // スコアを表示
        ctx.font = "bold 20px sans-serif";
        ctx.fillStyle = "white";
        ctx.fillText("SCORE: " + score, 10, 30);
        if (score >= 10) {
          // ゲームクリア
          ctx.font = "bold 50px sans-serif";
          ctx.fillStyle = "green";
          ctx.fillText("CLEAR!!", canvas.width / 2 - 120, canvas.height / 2);
        } else {
          requestAnimationFrame(gameLoop);
        }
      }
      
      // ゲームを始める関数
      function startGame() {
        canvas.style.display = "block";
        canvas.addEventListener("mousemove", moveMan);
        canvas.addEventListener("touchstart", moveMan);
        canvas.addEventListener("touchmove", moveMan);
        manX = canvas.width / 2;
        manY = 0;
        deathStarX = Math.floor(Math.random() * canvas.width);
        deathStarY = -50;
        score = 0;
        gameLoop();
      }
    </script>
  </body>
</html>