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

No:3322

1801

←

Prev Next

→

Hackathon game with characters from Touhou Project..ALL
Developer User3685｜Date and time 23/6/24 13:28:30
Build time 54.34 sec｜Game capacity 6.433KB｜

Script

東方ダンジョン

キャラを選択して、ダンジョンを探索しよう！

ダンジョン

スコア：0

←

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>
  </head>
  <body>
    <h1>東方ダンジョン</h1>
    <p>キャラを選択して、ダンジョンを探索しよう！</p>
    <div id="character-selection">
      <button id="reimu-button"><img src="reimu.png" alt="博麗 霊夢"></button>
      <button id="marisa-button"><img src="marisa.png" alt="霧雨 魔理沙"></button>
      <button id="sakuya-button"><img src="sakuya.png" alt="十六夜 咲夜"></button>
      <button id="youmu-button"><img src="youmu.png" alt="魂魄 妖夢"></button>
    </div>
    <div id="dungeon">
      <h2>ダンジョン</h2>
      <canvas id="canvas" width="400" height="400"></canvas>
      <div id="scoreboard">スコア：0</div>
      <button id="reset-button">リセット</button>
    </div>
    <script>
      // キャラ選択
      document.getElementById("reimu-button").addEventListener("click", function() {
        chooseCharacter("reimu");
      });
      document.getElementById("marisa-button").addEventListener("click", function() {
        chooseCharacter("marisa");
      });
      document.getElementById("sakuya-button").addEventListener("click", function() {
        chooseCharacter("sakuya");
      });
      document.getElementById("youmu-button").addEventListener("click", function() {
        chooseCharacter("youmu");
      });
      
      // キャラ選択後の処理
      function chooseCharacter(character) {
        // キャンバスを表示
        document.getElementById("dungeon").style.display = "block";
        // キャラクターを設定
        currentCharacter = character;
        // ダンジョンを初期化
        reset();
      }
      
      // ダンジョン
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var currentCharacter;
      var score = 0;
      var tiles = [
        ["empty", "empty", "monster", "empty", "empty"],
        ["monster", "empty", "empty", "treasure", "empty"],
        ["empty", "empty", "empty", "empty", "monster"],
        ["obstacle", "empty", "treasure", "empty", "empty"],
        ["empty", "monster", "empty", "empty", "empty"]
      ];
      
      function drawTile(x, y, tileType) {
        if (tileType === "empty") {
          ctx.fillStyle = "#ffffff";
        } else if (tileType === "monster") {
          ctx.fillStyle = "#aa0000";
        } else if (tileType === "treasure") {
          ctx.fillStyle = "#ffff00";
        } else if (tileType === "obstacle") {
          ctx.fillStyle = "#000000";
        }
        ctx.fillRect(x, y, 80, 80);
      }
      
      function drawDungeon() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var row = 0; row < tiles.length; row++) {
          for (var col = 0; col < tiles[row].length; col++) {
            var tileType = tiles[row][col];
            drawTile(col * 80, row * 80, tileType);
          }
        }
      }
      
      function moveCharacter(dx, dy) {
        for (var row = 0; row < tiles.length; row++) {
          for (var col = 0; col < tiles[row].length; col++) {
            var tileType = tiles[row][col];
            if (tileType === currentCharacter) {
              var newRow = row + dy;
              var newCol = col + dx;
              if (newRow < 0 || newRow >= tiles.length || newCol < 0 || newCol >= tiles[newRow].length) {
                // ダンジョンの外に出た場合は動かない
                return;
              }
              var newTileType = tiles[newRow][newCol];
              if (newTileType === "monster") {
                // モンスターを倒す
                tiles[newRow][newCol] = "empty";
                score += 10;
              } else if (newTileType === "treasure") {
                // 宝箱を開ける
                tiles[newRow][newCol] = "empty";
                score += 50;
              } else if (newTileType === "obstacle") {
                // 障害物にぶつかる
                return;
              } else {
                // 何もない場合は移動する
                tiles[row][col] = "empty";
                tiles[newRow][newCol] = currentCharacter;
              }
            }
          }
        }
        drawDungeon();
        updateScoreboard();
      }
      
      // スコアボード
      function updateScoreboard() {
        document.getElementById("scoreboard").textContent = "スコア：" + score;
      }
      
      // リセット
      function reset() {
        tiles = [
          ["empty", "empty", "monster", "empty", "empty"],
          ["monster", "empty", "empty", "treasure", "empty"],
          ["empty", "empty", "empty", "empty", "monster"],
          ["obstacle", "empty", "treasure", "empty", "empty"],
          ["empty", "monster", "empty", "empty", "empty"]
        ];
        score = 0;
        for (var row = 0; row < tiles.length; row++) {
          for (var col = 0; col < tiles[row].length; col++) {
            if (tiles[row][col] === currentCharacter) {
              drawTile(col * 80, row * 80, "empty");
              tiles[row][col] = "empty";
            }
          }
        }
        var randomRow = Math.floor(Math.random() * tiles.length);
        var randomCol = Math.floor(Math.random() * tiles[randomRow].length);
        tiles[randomRow][randomCol] = currentCharacter;
        drawDungeon();
        updateScoreboard();
      }
      document.getElementById("reset-button").addEventListener("click", reset);
      
      // スマホでの操作
      var startX, startY;
      document.addEventListener("touchstart", function(event) {
        startX = event.touches[0].pageX;
        startY = event.touches[0].pageY;
      });
      document.addEventListener("touchmove", function(event) {
        event.preventDefault();
        var dx = event.touches[0].pageX - startX;
        var dy = event.touches[0].pageY - startY;
        if (dx > 50) {
          moveCharacter(1, 0);
          startX = event.touches[0].pageX;
        } else if (dx < -50) {
          moveCharacter(-1, 0);
          startX = event.touches[0].pageX;
        } else if (dy > 50) {
          moveCharacter(0, 1);
          startY = event.touches[0].pageY;
        } else if (dy < -50) {
          moveCharacter(0, -1);
          startY = event.touches[0].pageY;
        }
      });
    </script>
  </body>
</html>