Hero's Adventure The player operates "👦" and defeats the enemy "😈" on the screen. 👦 can destroy 😈 by touching it. At that time, a huge “💥” emoji will be displayed for 0.5 seconds. When you defeat all the 😈 on the screen, a giant "👺" will appear. When you touch 👺, ``You saved the world and became a legendary hero! is displayed, and the game is cleared.'s game

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

No:2074

4441

←

Prev Next

→

Hero's Adventure The player operates "👦" and defea..ALL
Developer もちきなこ｜Date and time 23/6/20 1:15:29
Build time 45.154 sec｜Game capacity 3.882KB｜

Script

←

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>勇者のぼうけん</title>
    <style type="text/css">
      body {
        font-size: 3em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <script>
      // プレイヤーを表す絵文字
      var player = '👦';
      // 敵を表す絵文字
      var enemy = '😈';
      // 爆発を表す絵文字
      var explosion = '💥';
      // ボスを表す絵文字
      var boss = '👺';
      
      // プレイヤーの初期位置
      var playerX = 50;
      var playerY = 50;
      // 敵の数
      var enemyCount = 10;
      // 敵の配列
      var enemies = [];
      // プレイヤーを描画する関数
      function drawPlayer() {
        document.body.innerHTML += player;
      }
      // 敵をランダムな位置に描画する関数
      function drawEnemy() {
        var x = Math.floor(Math.random() * 90) + 5;
        var y = Math.floor(Math.random() * 50) + 20;
        var enemyObj = {x: x, y: y};
        enemies.push(enemyObj);
        document.body.innerHTML += '<span id="' + enemies.length + '">' + enemy + '</span>';
        document.getElementById(enemies.length).style.position = 'absolute';
        document.getElementById(enemies.length).style.left = x + '%';
        document.getElementById(enemies.length).style.top = y + '%';
      }
      // 敵を消滅させる関数
      function killEnemy(enemyObj) {
        document.body.innerHTML += explosion;
        document.getElementById(enemies.indexOf(enemyObj) + 1).remove();
        enemies.splice(enemies.indexOf(enemyObj), 1);
      }
      // ボスを描画する関数
      function drawBoss() {
        document.body.innerHTML += boss;
        document.getElementById('boss').style.position = 'absolute';
        document.getElementById('boss').style.left = '50%';
        document.getElementById('boss').style.top = '50%';
      }
      // ゲームクリアを表示する関数
      function clearGame() {
        document.body.innerHTML += '<h1>あなたは世界を救い、伝説の勇者になった！</h1>';
      }
      // キーボードイベント
      document.addEventListener('keydown', function(event) {
        switch(event.key) {
          case 'ArrowLeft':
            playerX -= 5;
            break;
          case 'ArrowUp':
            playerY -= 5;
            break;
          case 'ArrowRight':
            playerX += 5;
            break;
          case 'ArrowDown':
            playerY += 5;
            break;
        }
        document.getElementById('player').style.left = playerX + '%';
        document.getElementById('player').style.top = playerY + '%';
        // 敵と接触した場合
        for (var i = 0; i < enemies.length; i++) {
          var enemyObj = enemies[i];
          var deltaX = playerX - enemyObj.x;
          var deltaY = playerY - enemyObj.y;
          var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
          if (distance < 5) {
            killEnemy(enemyObj);
          }
        }
        // 全ての敵を倒した場合
        if (enemies.length == 0) {
          drawBoss();
        }
        // ボスと接触した場合
        var deltaXB = playerX - 50;
        var deltaYB = playerY - 50;
        var distanceB = Math.sqrt(deltaXB * deltaXB + deltaYB * deltaYB);
        if (distanceB < 5) {
          clearGame();
        }
      });
      // プレイヤーを描画
      document.body.innerHTML += '<span id="player">' + player + '</span>';
      document.getElementById('player').style.position = 'absolute';
      document.getElementById('player').style.left = playerX + '%';
      document.getElementById('player').style.top = playerY + '%';
      // 敵を描画
      for (var i = 0; i < enemyCount; i++) {
        drawEnemy();
      }
    </script>
  </body>
</html>