Please make a virtual controller with arrow buttons to move the player. The player's arbitrary sword item can be moved to the position of the press on the touchscreen where pressed. An evil monster also has a sword which slowly moves towards the player. There is a 'Reset' button when tapped will restart the game. When the monster is defeated, delete the monster and add a new different monster with different number of health points. Health points are represented as a whole number fraction.'s game

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

No:35223

140

←

Prev Next

→

Please make a virtual controller with arrow button..ALL
Developer ZAPSTRON｜Date and time 24/1/13 16:44:08
Build time 14.177 sec｜Game capacity 3.986KB｜

Script

Sure, here's an example implementation of the game you described:

This implementation creates a game where the player object (blue square) can be moved using arrow buttons on a virtual controller implemented as arrow keys. The player's sword position is updated based on touch events. There is an evil monster (red square) that slowly moves towards the player. When the player and monster collide, the monster's health decreases by 10. When the monster's health reaches 0, the monster is removed, and a new one is added with a different random health value. There is also a 'Reset' button to restart the game.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure, here's an example implementation of the game you described:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-container {
      width: 400px;
      height: 400px;
      position: relative;
      border: 1px solid black;
    }
    
    #player {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
    }
    
    #monster {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
    }
    
    button {
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
    <div id="monster"></div>
  </div>
  <button id="reset-button">Reset</button>
  
  <script>
    var player = document.getElementById("player");
    var monster = document.getElementById("monster");
    var resetButton = document.getElementById("reset-button");
    
    var playerPosition = { x: 0, y: 0 };
    var monsterPosition = { x: 350, y: 350 };
    
    var playerSwordPosition = { x: 0, y: 0 };
    
    var monsterHealth = 100;
    
    function updatePlayerPosition() {
      player.style.left = playerPosition.x + "px";
      player.style.top = playerPosition.y + "px";
    }
    
    function updateMonsterPosition() {
      monster.style.left = monsterPosition.x + "px";
      monster.style.top = monsterPosition.y + "px";
    }
    
    function updatePlayerSwordPosition(event) {
      playerSwordPosition.x = event.clientX - event.target.offsetLeft;
      playerSwordPosition.y = event.clientY - event.target.offsetTop;
    }
    
    function updateGame() {
      updatePlayerPosition();
      updateMonsterPosition();
      
      if (monsterHealth <= 0) {
        monster.remove();
        addNewMonster();
      }
      else {
        if (playerPosition.x < monsterPosition.x) {
          monsterPosition.x -= 1;
        }
        else if (playerPosition.x > monsterPosition.x) {
          monsterPosition.x += 1;
        }
        
        if (playerPosition.y < monsterPosition.y) {
          monsterPosition.y -= 1;
        }
        else if (playerPosition.y > monsterPosition.y) {
          monsterPosition.y += 1;
        }
        
        if (checkCollision()) {
          monsterHealth -= 10;
        }
      }
      
      requestAnimationFrame(updateGame);
    }
    
    function checkCollision() {
      return playerPosition.x <= monsterPosition.x + 50 &&
             monsterPosition.x <= playerPosition.x + 50 &&
             playerPosition.y <= monsterPosition.y + 50 &&
             monsterPosition.y <= playerPosition.y + 50;
    }
    
    function addNewMonster() {
      monster = document.createElement("div");
      monster.id = "monster";
      monsterPosition = { x: 350, y: 350 };
      monsterHealth = Math.floor(Math.random() * 100) + 1;
      document.getElementById("game-container").appendChild(monster);
    }
    
    function resetGame() {
      playerPosition = { x: 0, y: 0 };
      playerSwordPosition = { x: 0, y: 0 };
      monsterHealth = 100;
      monsterPosition = { x: 350, y: 350 };
      monster.style.left = monsterPosition.x + "px";
      monster.style.top = monsterPosition.y + "px";
    }
    
    document.addEventListener("DOMContentLoaded", function() {
      document.addEventListener("mousemove", updatePlayerSwordPosition);
      
      resetButton.addEventListener("click", resetGame);
      
      updateGame();
    });
  </script>
</body>
</html>
```