เกมส์ Pacman168 ทำในรูปแบบ HTML5 ตามความนิยมในปัจจุบัน

#game-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
}

#game-board {
display: grid;
grid-template-columns: repeat(28, 20px);
grid-template-rows: repeat(36, 20px);
}

.cell {
width: 20px;
height: 20px;
border: 1px solid black;
}

#pacman {
background-color: yellow;
border-radius: 50%;
}

.ghost {
background-color: red;
border-radius: 50%;
}

// โค้ด Javascript สำหรับเกม Pacman168
const board = document.getElementById(‘game-board’);
const pacman = document.createElement(‘div’);
pacman.id = ‘pacman’;
board.appendChild(pacman);

// เริ่มต้นตำแหน่งของ Pacman
let pacmanPosition = { x: 0, y: 0 };
drawPacman();

// ฟังก์ชันสำหรับวาด Pacman บนตำแหน่งปัจจุบัน
function drawPacman() {
pacman.style.gridColumn = pacmanPosition.x + 1;
pacman.style.gridRow = pacmanPosition.y + 1;
}

// ฟังก์ชันสำหรับเคลื่อนที่ Pacman
function movePacman(dx, dy) {
pacmanPosition.x += dx;
pacmanPosition.y += dy;
drawPacman();
}

// ฟังก์ชันสำหรับตรวจจับการกดปุ่ม
window.addEventListener(‘keydown’, (event) => {
switch(event.key) {
case ‘ArrowUp’:
movePacman(0, -1);
break;
case ‘ArrowDown’:
movePacman(0, 1);
break;
case ‘ArrowLeft’:
movePacman(-1, 0);
break;
case ‘ArrowRight’:
movePacman(1, 0);
break;
}
});