AI game creator

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

No:4293

4349

←

Prev Next

→

bumberman
Developer もちきなこ｜Date and time 23/6/27 19:08:44
Build time 60.427 sec｜Game capacity 7.188KB｜

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>
#board {
  display: grid;
  grid-template-columns: repeat(11, 50px);
  grid-template-rows: repeat(11, 50px);
  gap: 0;
  border: 1px solid black;
}
.cell {
  border: 1px solid white;
  background-color: grey;
}
.bomb {
  background-color: red;
}
.enemy {
  background-color: yellow;
}
.player {
  background-color: blue;
}
</style>
</head>

<body>
  <div id="board"></div>
  <script>
    const width = 11
    const height = 11
    const cells = []

for (let i = 0; i < height; i++) {
      for (let j = 0; j < width; j++) {
        if ((i == 0 || i == height - 1) || (j == 0 || j == width - 1) || (i % 2 == 0 && j % 2 == 0)) {
          cells.push({
            type: 'block',
            ele: null
          })
        } else {
          cells.push({
            type: 'cell',
            x: j,
            y: i,
            ele: null,
            bomb: null
          })
        }
      }
    }

function movePlayer(direction) {
      const playerIndex = cells.findIndex(cell => cell.type === 'player')
      const playerPos = {x: playerIndex % width, y: Math.floor(playerIndex / width)}
      let newPosition = null

switch (direction) {
        case 'top':
          newPosition = {x: playerPos.x, y: playerPos.y - 1};
          break;
        case 'bottom':
          newPosition = {x: playerPos.x, y: playerPos.y + 1};
          break;
        case 'left':
          newPosition = {x: playerPos.x - 1, y: playerPos.y};
          break;
        case 'right':
          newPosition = {x: playerPos.x + 1, y: playerPos.y};
          break;
      }

const newCellIndex = newPosition.y * width + newPosition.x;
      const newCell = cells[newCellIndex]

if (newCell.type === 'cell' && !newCell.bomb) {
        document.getElementById('cell-'+playerIndex).classList.remove('player')
        document.getElementById('cell-'+newCellIndex).classList.add('player')
        cells[playerIndex].type = 'cell'
        playerIndex[newCellIndex].type = 'player'
      }
    }

function placeEnemies() {
      for (let i = 0; i < cells.length; i++) {
        const cell = cells[i]
        if (cell.type === 'cell' && Math.random() < 0.1) {
          cell.type = 'enemy'
          document.getElementById('cell-'+i).classList.add('enemy')
        }
      }
    }

function moveEnemies() {
      const enemies = cells.filter(cell => cell.type === 'enemy')
      for (let i = 0; i < enemies.length; i++) {
        const enemyIndex = cells.findIndex(cell => cell === enemies[i])
        const enemyPos = {x: enemyIndex % width, y: Math.floor(enemyIndex / width)}

const playerIndex = cells.findIndex(cell => cell.type === 'player')
        const playerPos = {x: playerIndex % width, y: Math.floor(playerIndex / width)}

let moveDirection = '';

if (playerPos.y < enemyPos.y) {
          moveDirection = 'top'
        } else if (playerPos.y > enemyPos.y) {
          moveDirection = 'bottom'
        } else if (playerPos.x < enemyPos.x) {
          moveDirection = 'left'
        } else {
          moveDirection = 'right'
        }

const newEnemyPos = {
          x: moveDirection === 'left' ? enemyPos.x - 1 : moveDirection === 'right' ? enemyPos.x + 1 : enemyPos.x,
          y: moveDirection === 'top' ? enemyPos.y - 1 : moveDirection === 'bottom' ? enemyPos.y + 1 : enemyPos.y
        }

const newEnemyIndex = newEnemyPos.y * width + newEnemyPos.x
        const newEnemyCell = cells[newEnemyIndex]
        if (newEnemyCell.type === 'cell' && !newEnemyCell.bomb) {
          document.getElementById('cell-'+enemyIndex).classList.remove('enemy')
          document.getElementById('cell-'+newEnemyIndex).classList.add('enemy')
          cells[enemyIndex].type = 'cell'
          cells[newEnemyIndex].type = 'enemy'
        }
      }
    }

function placeBomb() {
      const playerIndex = cells.findIndex(cell => cell.type === 'player')
      const bombIndex = playerIndex- width
      const bombCell = cells[bombIndex]

if (bombCell.type === 'cell' && !bombCell.bomb) {
        const bomb = document.createElement('div')
        bomb.classList.add('bomb')
        bombCell.ele = bomb
        bombCell.bomb = true
        document.getElementById('cell-'+bombIndex).appendChild(bomb)

setTimeout(() => {
          explode(bombIndex)
        }, 3000)
      }
    }

function explode(bombIndex) {
      const bombCell = cells[bombIndex]
      bombCell.ele.parentNode.removeChild(bombCell.ele)
      bombCell.bomb = false

const positions = [
        bombIndex - width,
        bombIndex + width,
        bombIndex - 1,
        bombIndex + 1
      ]

positions.forEach((pos) => {
        const cell = cells[pos]
        if (cell.type === 'enemy') {
          document.getElementById('cell-'+pos).classList.remove('enemy')
          cell.type = 'cell'
        }

if (cell.ele && cell.ele.classList.contains('enemy')) {
          cell.ele.parentNode.removeChild(cell.ele)
          cell.type = 'cell'
        }
      })
    }

render()
    placePlayer()
    placeEnemies()

document.addEventListener('keydown', (event) => {
      switch (event.keyCode) {
        case 37: // left
          movePlayer('left')
          moveEnemies()
          break;

case 38: // up
          movePlayer('top')
          moveEnemies()
          break;

case 39: // right
          movePlayer('right')
          moveEnemies()
          break;

case 40: // down
          movePlayer('bottom')
          moveEnemies()
          break;

case 32: // space bar
          placeBomb()
          break;
      }
    });
  </script>
</body>
</html>