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

No:25309

Magic battle against your enemies Use four differ..ALL
Developer Dooz studio｜Date and time 23/11/20 10:54:40
Build time 106.303 sec｜Game capacity 4.06KB｜

Script

Magic Rush - Battle Against Your Enemies!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
   <title>Magic Rush - Battle Against Your Enemies!</title>
</head>
<body>
   <h1>Magic Rush - Battle Against Your Enemies!</h1>
   <canvas id="gameCanvas" width="500" height="500"></canvas>
  
   <script>
   // Initialize the game canvas
   const canvas = document.getElementById("gameCanvas");
   const ctx = canvas.getContext("2d");
  
   // Player character properties
   let playerX = canvas.width / 2;
   let playerY = canvas.height / 2;
   const playerSize = 50;
   let playerHealth = 100;
   let playerMana = 100;
  
   // Enemy character properties
   let enemyX = Math.random() * (canvas.width - playerSize);
   let enemyY = Math.random() * (canvas.height - playerSize);
   const enemySize = 50;
   const enemyHealth = 100;
  
   // Ability properties
   const abilities = ["Fireball", "Ice Shard", "Lightning Bolt", "Heal"];
   const abilitiesDamage = [30, 20, 40, -30];
   const abilitiesManaCost = [40, 25, 45, 20];
  
   // Event listener for keyboard controls
   document.addEventListener("keydown", handleKeyPress);
  
   // Main game loop
   function gameLoop() {
       // Clear the canvas
       ctx.clearRect(0, 0, canvas.width, canvas.height);
  
       // Draw player character
       ctx.fillStyle = "blue";
       ctx.fillRect(playerX, playerY, playerSize, playerSize);
  
       // Draw enemy character
       ctx.fillStyle = "red";
       ctx.fillRect(enemyX, enemyY, enemySize, enemySize);
  
       // Draw player health and mana bars
       ctx.fillStyle = "green";
       ctx.fillRect(10, 10, playerHealth, 10);
       ctx.fillStyle = "blue";
       ctx.fillRect(10, 30, playerMana, 10);
  
       // Draw enemy health bar
       ctx.fillStyle = "red";
       ctx.fillRect(canvas.width - enemyHealth, 10, enemyHealth, 10);
  
       // Check for game over condition
       if (playerHealth <= 0) {
           alert("Game Over - You Lost!");
           resetGame();
       } else if (enemyHealth <= 0) {
           alert("Congratulations! You Defeated the Enemy!");
           resetGame();
       }
  
       // Request animation frame for continuously updating the canvas
       requestAnimationFrame(gameLoop);
   }
  
   // Handle keyboard controls
   function handleKeyPress(e) {
       const key = e.keyCode;
  
       // Ability key 1 (Fireball)
       if (key === 49) {
           useAbility(0);
       }
  
       // Ability key 2 (Ice Shard)
       if (key === 50) {
           useAbility(1);
       }
  
       // Ability key 3 (Lightning Bolt)
       if (key === 51) {
           useAbility(2);
       }
  
       // Ability key 4 (Heal)
       if (key === 52) {
           useAbility(3);
       }
   }
  
   // Use specified ability
   function useAbility(abilityIndex) {
       const abilityName = abilities[abilityIndex];
  
       if (playerMana >= abilitiesManaCost[abilityIndex]) {
           // Perform ability action based on its type
           if (abilitiesDamage[abilityIndex] > 0) {
               enemyHealth -= abilitiesDamage[abilityIndex];
           } else {
               playerHealth -= abilitiesDamage[abilityIndex];
           }
  
           // Update player mana
           playerMana -= abilitiesManaCost[abilityIndex];
  
           if (playerMana < 0) {
               playerMana = 0;
           }
  
           // Log the action
           console.log("Player used " + abilityName + "!");
           console.log("Player Health: " + playerHealth);
           console.log("Player Mana: " + playerMana);
           console.log("Enemy Health: " + enemyHealth);
       } else {
           alert("You don't have enough mana to use " + abilityName + "!");
       }
   }
  
   // Reset the game
   function resetGame() {
       playerX = canvas.width / 2;
       playerY = canvas.height / 2;
       playerHealth = 100;
       playerMana = 100;
       enemyX = Math.random() * (canvas.width - playerSize);
       enemyY = Math.random() * (canvas.height - playerSize);
       enemyHealth = 100;
   }
  
   // Start the game loop
   gameLoop();
   </script>
</body>
</html>