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

No:46659

51

Make a game that has a magic that can convert enem..ALL
Developer User20190｜Date and time 24/2/25 17:54:54
Build time 7.526 sec｜Game capacity 2.227KB｜

Magic Conversion Game

→ 　

0　

0　

　
　
　
　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Magic Conversion Game</title>
<style>
  body {
    text-align: center;
    background-color: #f0f0f0;
  }
  
  canvas {
    border: 2px solid black;
  }
</style>
</head>
<body>
<h1>Magic Conversion Game</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
  const canvas = document.getElementById("gameCanvas");
  const ctx = canvas.getContext("2d");
  
  let playerX = 200;
  let playerY = 200;
  const playerSize = 20;
  
  let enemies = [];
  const numEnemies = 5;
  
  const playerColor = "blue";
  const enemyColor = "red";
  
  class Enemy {
    constructor(x, y, size) {
      this.x = x;
      this.y = y;
      this.size = size;
      this.isConverted = false;
    }
  }
  
  for (let i = 0; i < numEnemies; i++) {
    const enemy = new Enemy(Math.random() * 380, Math.random() * 380, 15);
    enemies.push(enemy);
  }
  
  function drawPlayer() {
    ctx.fillStyle = playerColor;
    ctx.fillRect(playerX, playerY, playerSize, playerSize);
  }
  
  function drawEnemies() {
    enemies.forEach(enemy => {
      if (enemy.isConverted) {
        ctx.fillStyle = playerColor;
      } else {
        ctx.fillStyle = enemyColor;
      }
      ctx.fillRect(enemy.x, enemy.y, enemy.size, enemy.size);
    });
  }
  
  function convertEnemy(index) {
    enemies[index].isConverted = true;
  }
  
  function checkCollision() {
    enemies.forEach((enemy, index) => {
      if (!enemy.isConverted && playerX < enemy.x + enemy.size &&
          playerX + playerSize > enemy.x &&
          playerY < enemy.y + enemy.size &&
          playerY + playerSize > enemy.y) {
        
        convertEnemy(index);
      }
    });
  }
  
  function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    drawPlayer();
    drawEnemies();
    checkCollision();
    
    requestAnimationFrame(update);
  }
  
  window.addEventListener("keydown", e => {
    if (e.key === "ArrowRight") {
      playerX += 10;
    } else if (e.key === "ArrowLeft") {
      playerX -= 10;
    } else if (e.key === "ArrowDown") {
      playerY += 10;
    } else if (e.key === "ArrowUp") {
      playerY -= 10;
    }
  });
  
  update();
</script>
</body>
</html>