<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>Bomberman Game</title>
<style>
body {
margin: 0;
background-color: #333;
display: flex;
flex-direction: column;
align-items: center;
}
#gameCanvas {
border: 2px solid #000;
background-color: #000;
margin-top: 20px;
}
#instructions {
color: white;
font-family: sans-serif;
margin-top: 20px;
}
</style>
</head>
<body>
<h1 style="color:white;">Bomberman Game</h1>
<canvas id="gameCanvas" width="800" height="800"></canvas>
<div id="instructions">
<p>ใช้ปุ่มลูกศรเพื่อเคลื่อนที่ และกด Space เพื่อวางระเบิด</p>
</div>
<script>
// กำหนดขนาดกริดและขนาดเซลล์
const gridWidth = 25;
const gridHeight = 25;
const cellSize = 32; // เซลล์ 32px => canvas 800x800
// เวลาของระเบิดและเวลาการแสดงผลของการระเบิด
const bombFuseTime = 2000; // ระเบิดระเบิดภายใน 2 วินาที
const explosionDuration = 500; // การระเบิดแสดงผล 0.5 วินาที
const explosionRange = 3; // ระยะการระเบิดในแต่ละทิศ (คลาสสิก Bomberman)
const enemyMoveInterval = 1000; // ศัตรูเคลื่อนที่ทุก 1 วินาที
// สร้างอาเรย์สำหรับบอร์ด (0 = พื้น, 1 = ผนัง, 2 = อุปสรรคทำลายได้)
let board = [];
for (let y = 0; y < gridHeight; y++) {
board[y] = [];
for (let x = 0; x < gridWidth; x++) {
// กำหนดผนังรอบขอบ
if (y === 0 || y === gridHeight - 1 || x === 0 || x === gridWidth - 1) {
board[y][x] = 1; // ผนังแข็ง (ไม่ทำลายได้)
} else if (y % 2 === 0 && x % 2 === 0) {
board[y][x] = 1; // รูปแบบผนังแบบจับคู่ (แบบดั้งเดิม)
} else {
// สุ่มสร้างอุปสรรคทำลายได้ (breakable block) ด้วยความน่าจะเป็น 30%
board[y][x] = (Math.random() < 0.3) ? 2 : 0;
}
}
}
// ทำความสะอาดพื้นที่เริ่มต้นสำหรับผู้เล่น (มุมซ้ายบน)
board[1][1] = 0;
board[1][2] = 0;
board[2][1] = 0;
// กำหนดตำแหน่งเริ่มต้นของผู้เล่น
let player = { x: 1, y: 1, alive: true };
// รายการระเบิดที่วางไว้
let bombs = [];
// รายการการระเบิด (แสดงผลระเบิด)
let explosions = [];
// สร้างศัตรูแบบสุ่ม (จำนวน 5 ตัว) ให้ปรากฏในพื้นที่ที่เป็นพื้นและไม่ใกล้ผู้เล่น
let enemies = [];
const numEnemies = 5;
while (enemies.length < numEnemies) {
let ex = Math.floor(Math.random() * gridWidth);
let ey = Math.floor(Math.random() * gridHeight);
if (board[ey][ex] === 0 && (Math.abs(ex - 1) + Math.abs(ey - 1)) > 5) {
enemies.push({ x: ex, y: ey });
}
}
let gameOver = false;
// กำหนด canvas และ context สำหรับการวาด
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
ctx.font = cellSize + "px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
let lastTime = 0;
let lastEnemyMoveTime = 0;
function gameLoop(timestamp) {
if (!lastTime) lastTime = timestamp;
let deltaTime = timestamp - lastTime;
lastTime = timestamp;
update(deltaTime);
draw();
if (!gameOver) {
requestAnimationFrame(gameLoop);
}
}
function update(deltaTime) {
// อัปเดตรายการระเบิด (bombs)
for (let i = bombs.length - 1; i >= 0; i--) {
bombs[i].timer -= deltaTime;
if (bombs[i].timer <= 0) {
triggerExplosion(bombs[i]);
bombs.splice(i, 1);
}
}
// อัปเดตการแสดงผลการระเบิด (explosions)
for (let i = explosions.length - 1; i >= 0; i--) {
explosions[i].timer -= deltaTime;
if (explosions[i].timer <= 0) {
explosions.splice(i, 1);
} else {
// ตรวจสอบว่าผู้เล่นอยู่ในระเบิดหรือไม่
for (let exp of explosions[i].cells) {
if (player.x === exp.x && player.y === exp.y) {
player.alive = false;
gameOver = true;
}
}
}
}
// เคลื่อนที่ศัตรูทุก enemyMoveInterval
lastEnemyMoveTime += deltaTime;
if (lastEnemyMoveTime >= enemyMoveInterval) {
moveEnemies();
lastEnemyMoveTime = 0;
}
// ตรวจสอบว่าศัตรูชนกับผู้เล่นหรือไม่
for (let enemy of enemies) {
if (enemy.x === player.x && enemy.y === player.y) {
player.alive = false;
gameOver = true;
}
}
// ถ้าสังหารศัตรูหมดแล้ว ให้แสดง “You Win!”
if (enemies.length === 0) {
gameOver = true;
}
}
// ฟังก์ชันสำหรับระเบิด (คำนวณพื้นที่ที่ได้รับผลกระทบตามทิศ)
function triggerExplosion(bomb) {
let explosionCells = [];
// รวมเซลล์ที่ระเบิดด้วย (เซลล์ที่วางระเบิด)
explosionCells.push({ x: bomb.x, y: bomb.y });
const directions = [
{ dx: 1, dy: 0 },
{ dx: -1, dy: 0 },
{ dx: 0, dy: 1 },
{ dx: 0, dy: -1 }
];
for (let dir of directions) {
for (let r = 1; r <= explosionRange; r++) {
let nx = bomb.x + dir.dx * r;
let ny = bomb.y + dir.dy * r;
if (nx < 0 || ny < 0 || nx >= gridWidth || ny >= gridHeight) break;
if (board[ny][nx] === 1) { // ผนังแข็งบล็อกการระเบิด
break;
}
explosionCells.push({ x: nx, y: ny });
if (board[ny][nx] === 2) { // หากเป็นอุปสรรคทำลายได้ ให้ลบออกและหยุดการกระจาย
board[ny][nx] = 0;
break;
}
}
}
explosions.push({ cells: explosionCells, timer: explosionDuration });
// ลบศัตรูที่อยู่ในพื้นที่ระเบิด
for (let i = enemies.length - 1; i >= 0; i--) {
for (let exp of explosionCells) {
if (enemies[i].x === exp.x && enemies[i].y === exp.y) {
enemies.splice(i, 1);
break;
}
}
}
// ตรวจสอบว่าผู้เล่นอยู่ในพื้นที่ระเบิดหรือไม่ (เช็คทันที)
for (let exp of explosionCells) {
if (player.x === exp.x && player.y === exp.y) {
player.alive = false;
gameOver = true;
}
}
}
// ฟังก์ชันเคลื่อนที่ศัตรูแบบสุ่ม
function moveEnemies() {
for (let enemy of enemies) {
let directions = [
{ dx: 1, dy: 0 },
{ dx: -1, dy: 0 },
{ dx: 0, dy: 1 },
{ dx: 0, dy: -1 }
];
// สุ่มลำดับทิศทาง
directions.sort(() => Math.random() - 0.5);
for (let dir of directions) {
let nx = enemy.x + dir.dx;
let ny = enemy.y + dir.dy;
if (nx < 0 || ny < 0 || nx >= gridWidth || ny >= gridHeight) continue;
if (board[ny][nx] === 0) {
enemy.x = nx;
enemy.y = ny;
break;
}
}
}
}
// ฟังก์ชันวาดภาพทั้งหมด
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// วาดบอร์ด (พื้น, ผนัง, อุปสรรค)
for (let y = 0; y < gridHeight; y++) {
for (let x = 0; x < gridWidth; x++) {
let cell = board[y][x];
let posX = x * cellSize;
let posY = y * cellSize;
if (cell === 1) {
ctx.fillStyle = "#555"; // สีผนัง
} else if (cell === 2) {
ctx.fillStyle = "#a52a2a"; // สีอุปสรรคทำลายได้ (สีน้ำตาล)
} else {
ctx.fillStyle = "#9acd32"; // สีพื้น (สีเขียวอ่อน)
}
ctx.fillRect(posX, posY, cellSize, cellSize);
ctx.strokeStyle = "#ccc";
ctx.strokeRect(posX, posY, cellSize, cellSize);
}
}
// วาดระเบิดที่ยังไม่ได้ระเบิด (bombs)
for (let bomb of bombs) {
drawIcon("💣", bomb.x, bomb.y);
}
// วาดการระเบิด (explosions)
for (let explosion of explosions) {
for (let cell of explosion.cells) {
drawIcon("🔥", cell.x, cell.y);
}
}
// วาดผู้เล่น (player)
if (player.alive) {
drawIcon("🙂", player.x, player.y);
}
// วาดศัตรู (enemies)
for (let enemy of enemies) {
drawIcon("👾", enemy.x, enemy.y);
}
// แสดงข้อความเมื่อเกมจบ
if (gameOver) {
ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
ctx.fillRect(0, canvas.height/2 - 50, canvas.width, 100);
ctx.fillStyle = "white";
ctx.font = "48px sans-serif";
let message = (enemies.length === 0 && player.alive) ? "You Win!" : "Game Over";
ctx.textAlign = "center";
ctx.fillText(message, canvas.width/2, canvas.height/2);
}
}
// ฟังก์ชันวาดไอคอนในตำแหน่งกริดที่กำหนด
function drawIcon(icon, gridX, gridY) {
let posX = gridX * cellSize + cellSize/2;
let posY = gridY * cellSize + cellSize/2;
ctx.fillText(icon, posX, posY);
}
// ฟังก์ชันจัดการการกดปุ่มคีย์บอร์ด
document.addEventListener('keydown', function(e) {
if (gameOver) return;
let newX = player.x;
let newY = player.y;
if (e.key === "ArrowUp") {
newY -= 1;
} else if (e.key === "ArrowDown") {
newY += 1;
} else if (e.key === "ArrowLeft") {
newX -= 1;
} else if (e.key === "ArrowRight") {
newX += 1;
} else if (e.key === " ") { // วางระเบิดด้วย Space
// หากยังไม่มีระเบิดอยู่ที่ตำแหน่งนี้ ให้เพิ่มระเบิด
let exists = bombs.some(b => b.x === player.x && b.y === player.y);
if (!exists) {
bombs.push({ x: player.x, y: player.y, timer: bombFuseTime });
}
return;
}
// ตรวจสอบว่าเคลื่อนที่ไปได้ (เฉพาะเซลล์ที่เป็นพื้น)
if (newX >= 0 && newX < gridWidth && newY >= 0 && newY < gridHeight) {
if (board[newY][newX] === 0) {
player.x = newX;
player.y = newY;
}
}
});
requestAnimationFrame(gameLoop);
</script>
</body>
</html>
Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.
HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.
<!DOCTYPE html><html> and ends with </html><h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.<p>..</p> tag.<a> tag.
<a href="https://onecompiler.com/html">HTML online compiler</a>
<img> tag, where src attribute consists of image name.<button>..</button> tag<ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.<a href="https://onecompiler.com/html">HTML online compiler</a>
CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.
Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.
body{
padding: 25px;
}
.title {
color: #228B22;
font-family: Candara;
}
<table> tag.<tr> tag<th> tag<td> tag<caption> tag<script> is the tag used to write scripts in HTML<script src="script.js"></script>