ブルースワットのアクションゲーム！ショウ(青)、サラ(紫)、シグ(黒)の3人がエイリアンを倒すぞ！'s game

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

No:45483

←

Prev Next

→

ブルースワットのアクションゲーム！ショウ(青)、サラ(紫)、シグ(黒)の3人がエイリアンを倒すぞ！
Developer セイザー饅頭｜Date and time 24/2/20 19:08:08
Build time 5.862 sec｜Game capacity 1.497KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ブルースワットのアクションゲーム！</title>
   <style>
      body {
         text-align: center;
      }
      #gameCanvas {
         border: 1px solid black;
         margin: 0 auto;
      }
   </style>
</head>
<body>
   <canvas id="gameCanvas" width="800" height="600"></canvas>
   
   <script>
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      
      let playerX = canvas.width / 2;
      let playerY = canvas.height / 2;
      const playerSize = 50;
      
      function drawPlayer() {
         ctx.fillStyle = "blue";
         ctx.fillRect(playerX, playerY, playerSize, playerSize);
      }
      
      function clearCanvas() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
      
      function updateGameArea() {
         clearCanvas();
         drawPlayer();
      }
      
      document.addEventListener('keydown', (event) => {
         const key = event.key;
         if (key === 'ArrowUp') {
            playerY -= 10;
         } else if (key === 'ArrowDown') {
            playerY += 10;
         } else if (key === 'ArrowLeft') {
            playerX -= 10;
         } else if (key === 'ArrowRight') {
            playerX += 10;
         }
         updateGameArea();
      });
      
      updateGameArea();
   </script>
</body>
</html>