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

No:3766

211

←

Prev Next

→

Maze and rock-paper-scissors
Developer User3181｜Date and time 23/6/26 14:40:57
Build time 67.549 sec｜Game capacity 7.386KB｜

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>
  </head>
  <body>
    <h1>迷路ゲーム</h1>
    <p>スマホの方は矢印ボタンで操作してください。</p>
    <div id="maze"></div>
    <button onclick="drawMaze()">迷路を作成</button>
    <button onclick="startGame()">スタート</button>
    <script>
      var player;
      var maze;

function drawMaze() {
        var mazeDiv = document.getElementById("maze");
        mazeDiv.innerHTML = "";

var row = 5;
        var col = 5;

maze = new Array(row);

for (var i = 0; i < row; i++) {
          maze[i] = new Array(col);
          for (var j = 0; j < col; j++) {
            var wall = Math.floor(Math.random() * 2);
            if (wall == 1) {
              maze[i][j] = "wall";
            } else {
              maze[i][j] = "path";
            }
          }
        }

player = {
          x: 0,
          y: 0
        };

var goal = {
          x: row-1,
          y: col-1
        };

for (var i = 0; i < row; i++) {
          var rowDiv = document.createElement("div");
          rowDiv.classList.add("row");
          for (var j = 0; j < col; j++) {
            var cellSpan = document.createElement("span");
            cellSpan.classList.add("cell");
            if (maze[i][j] == "wall") {
              cellSpan.classList.add("wall");
            } else if (i == player.x && j == player.y) {
              cellSpan.classList.add("player");
            }
            rowDiv.appendChild(cellSpan);
          }
          mazeDiv.appendChild(rowDiv);
        }

var goalCell = document.querySelectorAll(".row")[goal.x].querySelectorAll(".cell")[goal.y];
        goalCell.classList.add("goal");
      }

function moveRight() {
        if (player.y < maze[0].length - 1 && maze[player.x][player.y + 1] != "wall") {
          var curCell = document.querySelectorAll(".row")[player.x].querySelectorAll(".cell")[player.y];
          curCell.classList.remove("player");
          player.y++;
          var newCell = document.querySelectorAll(".row")[player.x].querySelectorAll(".cell")[player.y];
          newCell.classList.add("player");
        }
      }

function moveLeft() {
        if (player.y > 0 && maze[player.x][player.y - 1] != "wall") {
          var curCell = document.querySelectorAll(".row")[player.x].querySelectorAll(".cell")[player.y];
          curCell.classList.remove("player");
          player.y--;
          var newCell = document.querySelectorAll(".row")[player.x].querySelectorAll(".cell")[player.y];
          newCell.classList.add("player");
        }
      }

function moveUp() {
        if (player.x > 0 && maze[player.x - 1][player.y] != "wall") {
          var curCell = document.querySelectorAll(".row")[player.x].querySelectorAll(".cell")[player.y];
          curCell.classList.remove("player");
          player.x--;
          var newCell = document.querySelectorAll(".row")[player.x].querySelectorAll(".cell")[player.y];
          newCell.classList.add("player");
        }
      }

function moveDown() {
        if (player.x < maze.length - 1 && maze[player.x + 1][player.y] != "wall") {
          var curCell = document.querySelectorAll(".row")[player.x].querySelectorAll(".cell")[player.y];
          curCell.classList.remove("player");
          player.x++;
          var newCell = document.querySelectorAll(".row")[player.x].querySelectorAll(".cell")[player.y];
          newCell.classList.add("player");
        }
      }

以上が迷路ゲームのコードです。スマートフォンで矢印ボタンをタップすることでも操作できます。

【じゃんけんゲーム】
以下がコードです。
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>じゃんけんゲーム</title>
  </head>
  <body>
    <h1>じゃんけんゲーム</h1>
    <p>スマホの方は画面をタップしてください。</p>
    <div id="result"></div>
    <div id="game">
      <img src="rock.png" onclick="play('rock')" style="width: 100px; margin-right: 10px;">
      <img src="scissors.png" onclick="play('scissors')" style="width: 100px; margin-right: 10px;">
      <img src="paper.png" onclick="play('paper')" style="width: 100px;">
    </div>
    <script>
      function play(human) {
        var cpu = Math.floor(Math.random() * 3);
        var hands = ["rock", "scissors", "paper"];
        var resultDiv = document.getElementById("result");

switch(cpu) {
          case 0:
            var cpuHand = hands[0];
            break;
          case 1:
            var cpuHand = hands[1];
            break;
          case 2:
            var cpuHand = hands[2];
            break;
        }

var result;

if (human == "rock" && cpuHand == "scissors") {
          result = "勝ち！";
        } else if (human == "rock" && cpuHand == "paper") {
          result = "負け！";
        } else if (human == "scissors" && cpuHand == "rock") {
          result = "負け！";
        } else if (human == "scissors" && cpuHand == "paper") {
          result = "勝ち！";
        } else if (human == "paper" && cpuHand == "rock") {
          result = "勝ち！";
        } else if (human == "paper" && cpuHand == "scissors") {
          result = "負け！";
        } else {
          result = "引き分け！";
        }

resultDiv.innerHTML = result;
      }
    </script>
  </body>
</html>
```

以上がじゃんけんゲームのコードです。スマートフォンで画面をタップすることでもじゃんけんができます。

以上が、迷路とじゃんけんの２つのゲームのプログラムです。どうぞお楽しみください。