AI game creator

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

No:5388

803

←

Prev Next

→

bumberman
Developer もちきなこ｜Date and time 23/6/30 0:47:49
Build time 32.956 sec｜Game capacity 2.841KB｜

Script

了解しました。ボンバーマンのゲームを作ります。以下がHTMLファイルのソースコードです。

このコードは、プレイヤーが「🙂」の絵文字で表されるボンバーマンを操作することができます。ボード上で上下左右に移動することができます。ボードは9x9のグリッドで、スタート位置は中央に設定されています。プレイヤーはキーボードの矢印キーを使用して操作することができます。矢印キーに応じて、プレイヤーの位置が更新され、ボードがリフレッシュされます。以上のコードをHTMLファイルに保存し、ブラウザで開くと、ボンバーマンのゲームをプレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解しました。ボンバーマンのゲームを作ります。

以下がHTMLファイルのソースコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ボンバーマン</title>
	<style>
		#board {
			display: grid;
			grid-template-columns: repeat(9, 1fr);
			grid-template-rows: repeat(9, 1fr);
			grid-gap: 2px;
			background-color: gray;
			width: 80vmin;
			height: 80vmin;
			margin: auto;
		}
		.cell {
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3vmin;
			cursor: pointer;
		}
		.cell:hover {
			background-color: lightgray;
		}
	</style>
</head>
<body>
	<div id="board"></div>
	
	<script>
		const board = document.getElementById('board');
		const numRows = 9;
		const numCols = 9;
		let playerRow = Math.floor(numRows / 2);
		let playerCol = Math.floor(numCols / 2);
		
		function initializeBoard() {
			for (let row = 0; row < numRows; row++) {
				for (let col = 0; col < numCols; col++) {
					const cell = document.createElement('div');
					cell.classList.add('cell');
					if (row === playerRow && col === playerCol) {
						cell.textContent = '🙂';
					}
					board.appendChild(cell);
				}
			}
		}
		
		function clearBoard() {
			while (board.firstChild) {
				board.removeChild(board.firstChild);
			}
		}
		
		function movePlayer(direction) {
			switch (direction) {
				case 'up':
					if (playerRow > 0) {
						playerRow--;
					}
					break;
				case 'down':
					if (playerRow < numRows - 1) {
						playerRow++;
					}
					break;
				case 'left':
					if (playerCol > 0) {
						playerCol--;
					}
					break;
				case 'right':
					if (playerCol < numCols - 1) {
						playerCol++;
					}
					break;
			}
			
			clearBoard();
			initializeBoard();
		}
		
		document.addEventListener('keydown', (event) => {
			if (event.key === 'ArrowUp') {
				movePlayer('up');
			} else if (event.key === 'ArrowDown') {
				movePlayer('down');
			} else if (event.key === 'ArrowLeft') {
				movePlayer('left');
			} else if (event.key === 'ArrowRight') {
				movePlayer('right');
			}
		});
		
		initializeBoard();
	</script>
</body>
</html>
```

このコードは、プレイヤーが「🙂」の絵文字で表されるボンバーマンを操作することができます。ボード上で上下左右に移動することができます。ボードは9x9のグリッドで、スタート位置は中央に設定されています。

プレイヤーはキーボードの矢印キーを使用して操作することができます。矢印キーに応じて、プレイヤーの位置が更新され、ボードがリフレッシュされます。

以上のコードをHTMLファイルに保存し、ブラウザで開くと、ボンバーマンのゲームをプレイすることができます。