Jmx0OyFET0NUWVBFIGh0bWwmZ3Q7CiZsdDtodG1sJmd0OwombHQ7aGVhZCZndDsKICAgICZsdDt0aXRsZSZndDtTaW1wbGUgTU9CQSBHYW1lJmx0Oy90aXRsZSZndDsKICAgICZsdDtzdHlsZSZndDsKICAgICAgICBjYW52YXMgewogICAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjazsKICAgICAgICAgICAgYmFja2dyb3VuZDogIzJjM2U1MDsKICAgICAgICB9CiAgICAmbHQ7L3N0eWxlJmd0OwombHQ7L2hlYWQmZ3Q7CiZsdDtib2R5Jmd0OwogICAgJmx0O2NhbnZhcyBpZD0mcXVvdDtnYW1lQ2FudmFzJnF1b3Q7IHdpZHRoPSZxdW90OzgwMCZxdW90OyBoZWlnaHQ9JnF1b3Q7NjAwJnF1b3Q7Jmd0OyZsdDsvY2FudmFzJmd0OwogICAgJmx0O3NjcmlwdCZndDsKICAgICAgICBjb25zdCBjYW52YXMgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZ2FtZUNhbnZhcycpOwogICAgICAgIGNvbnN0IGN0eCA9IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpOwogICAgICAgIAogICAgICAgIC8vIOC4leC4seC4p+C4peC4sOC4hOC4o+C4q+C4peC4seC4gQogICAgICAgIGNvbnN0IHBsYXllciA9IHsKICAgICAgICAgICAgeDogNDAwLAogICAgICAgICAgICB5OiAzMDAsCiAgICAgICAgICAgIHJhZGl1czogMjAsCiAgICAgICAgICAgIHNwZWVkOiA1LAogICAgICAgICAgICBjb2xvcjogJyMzNDk4ZGInLAogICAgICAgICAgICBoZWFsdGg6IDEwMAogICAgICAgIH07CgogICAgICAgIC8vIOC4qOC4seC4leC4o+C4uQogICAgICAgIGNvbnN0IGVuZW1pZXMgPSBbXTsKICAgICAgICBjb25zdCBlbmVteVNldHRpbmdzID0gewogICAgICAgICAgICBzcGF3blJhdGU6IDEwMDAsIC8vIG1pbGxpc2Vjb25kcwogICAgICAgICAgICBsYXN0U3Bhd246IDAKICAgICAgICB9OwoKICAgICAgICAvLyDguIHguKPguLDguKrguLjguJkKICAgICAgICBjb25zdCBidWxsZXRzID0gW107CgogICAgICAgIC8vIOC4geC4suC4o+C4hOC4p+C4muC4hOC4uOC4oQogICAgICAgIGNvbnN0IGtleXMgPSB7CiAgICAgICAgICAgIEFycm93VXA6IGZhbHNlLAogICAgICAgICAgICBBcnJvd0Rvd246IGZhbHNlLAogICAgICAgICAgICBBcnJvd0xlZnQ6IGZhbHNlLAogICAgICAgICAgICBBcnJvd1JpZ2h0OiBmYWxzZQogICAgICAgIH07CgogICAgICAgIC8vIOC4o+C4sOC4muC4muC5gOC4geC4oQogICAgICAgIGZ1bmN0aW9uIGdhbWVMb29wKHRpbWVzdGFtcCkgewogICAgICAgICAgICB1cGRhdGUodGltZXN0YW1wKTsKICAgICAgICAgICAgZHJhdygpOwogICAgICAgICAgICByZXF1ZXN0QW5pbWF0aW9uRnJhbWUoZ2FtZUxvb3ApOwogICAgICAgIH0KCiAgICAgICAgZnVuY3Rpb24gdXBkYXRlKHRpbWVzdGFtcCkgewogICAgICAgICAgICAvLyDguIHguLLguKPguYDguITguKXguLfguYjguK3guJnguJfguLXguYgKICAgICAgICAgICAgaWYgKGtleXMuQXJyb3dVcCkgcGxheWVyLnkgLT0gcGxheWVyLnNwZWVkOwogICAgICAgICAgICBpZiAoa2V5cy5BcnJvd0Rvd24pIHBsYXllci55ICs9IHBsYXllci5zcGVlZDsKICAgICAgICAgICAgaWYgKGtleXMuQXJyb3dMZWZ0KSBwbGF5ZXIueCAtPSBwbGF5ZXIuc3BlZWQ7CiAgICAgICAgICAgIGlmIChrZXlzLkFycm93UmlnaHQpIHBsYXllci54ICs9IHBsYXllci5zcGVlZDsKCiAgICAgICAgICAgIC8vIOC4quC4o+C5ieC4suC4h+C4qOC4seC4leC4o+C4uQogICAgICAgICAgICBpZiAodGltZXN0YW1wIC0gZW5lbXlTZXR0aW5ncy5sYXN0U3Bhd24gJmd0OyBlbmVteVNldHRpbmdzLnNwYXduUmF0ZSkgewogICAgICAgICAgICAgICAgZW5lbWllcy5wdXNoKGNyZWF0ZUVuZW15KCkpOwogICAgICAgICAgICAgICAgZW5lbXlTZXR0aW5ncy5sYXN0U3Bhd24gPSB0aW1lc3RhbXA7CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIC8vIOC4geC4suC4o+C5gOC4hOC4peC4t+C5iOC4reC4meC4l+C4teC5iOC4qOC4seC4leC4o+C4uQogICAgICAgICAgICBlbmVtaWVzLmZvckVhY2goZW5lbXkgPSZndDsgewogICAgICAgICAgICAgICAgY29uc3QgZHggPSBwbGF5ZXIueCAtIGVuZW15Lng7CiAgICAgICAgICAgICAgICBjb25zdCBkeSA9IHBsYXllci55IC0gZW5lbXkueTsKICAgICAgICAgICAgICAgIGNvbnN0IGRpc3RhbmNlID0gTWF0aC5zcXJ0KGR4KmR4ICsgZHkqZHkpOwogICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICBlbmVteS54ICs9IChkeCAvIGRpc3RhbmNlKSAqIGVuZW15LnNwZWVkOwogICAgICAgICAgICAgICAgZW5lbXkueSArPSAoZHkgLyBkaXN0YW5jZSkgKiBlbmVteS5zcGVlZDsKICAgICAgICAgICAgfSk7CgogICAgICAgICAgICAvLyDguJXguKPguKfguIjguKrguK3guJrguIHguLLguKPguIrguJkKICAgICAgICAgICAgZW5lbWllcy5mb3JFYWNoKChlbmVteSwgaW5kZXgpID0mZ3Q7IHsKICAgICAgICAgICAgICAgIGNvbnN0IGR4ID0gcGxheWVyLnggLSBlbmVteS54OwogICAgICAgICAgICAgICAgY29uc3QgZHkgPSBwbGF5ZXIueSAtIGVuZW15Lnk7CiAgICAgICAgICAgICAgICBjb25zdCBkaXN0YW5jZSA9IE1hdGguc3FydChkeCpkeCArIGR5KmR5KTsKICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgaWYgKGRpc3RhbmNlICZsdDsgcGxheWVyLnJhZGl1cyArIGVuZW15LnJhZGl1cykgewogICAgICAgICAgICAgICAgICAgIHBsYXllci5oZWFsdGggLT0gMTsKICAgICAgICAgICAgICAgICAgICBlbmVtaWVzLnNwbGljZShpbmRleCwgMSk7CiAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0pOwogICAgICAgIH0KCiAgICAgICAgZnVuY3Rpb24gZHJhdygpIHsKICAgICAgICAgICAgLy8g4Lil4LmJ4Liy4LiH4Lir4LiZ4LmJ4Liy4LiI4LitCiAgICAgICAgICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTsKICAgICAgICAgICAgCiAgICAgICAgICAgIC8vIOC4p+C4suC4lOC4nOC4ueC5ieC5gOC4peC5iOC4mQogICAgICAgICAgICBjdHguYmVnaW5QYXRoKCk7CiAgICAgICAgICAgIGN0eC5hcmMocGxheWVyLngsIHBsYXllci55LCBwbGF5ZXIucmFkaXVzLCAwLCBNYXRoLlBJICogMik7CiAgICAgICAgICAgIGN0eC5maWxsU3R5bGUgPSBwbGF5ZXIuY29sb3I7CiAgICAgICAgICAgIGN0eC5maWxsKCk7CiAgICAgICAgICAgIAogICAgICAgICAgICAvLyDguKfguLLguJTguKjguLHguJXguKPguLkKICAgICAgICAgICAgZW5lbWllcy5mb3JFYWNoKGVuZW15ID0mZ3Q7IHsKICAgICAgICAgICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICAgICAgICAgIGN0eC5hcmMoZW5lbXkueCwgZW5lbXkueSwgZW5lbXkucmFkaXVzLCAwLCBNYXRoLlBJICogMik7CiAgICAgICAgICAgICAgICBjdHguZmlsbFN0eWxlID0gZW5lbXkuY29sb3I7CiAgICAgICAgICAgICAgICBjdHguZmlsbCgpOwogICAgICAgICAgICB9KTsKICAgICAgICAgICAgCiAgICAgICAgICAgIC8vIOC4p+C4suC4lOC5gOC4peC4t+C4reC4lAogICAgICAgICAgICBjdHguZmlsbFN0eWxlID0gJ3doaXRlJzsKICAgICAgICAgICAgY3R4LmZvbnQgPSAnMjBweCBBcmlhbCc7CiAgICAgICAgICAgIGN0eC5maWxsVGV4dChgSFA6ICR7cGxheWVyLmhlYWx0aH1gLCAxMCwgMzApOwogICAgICAgIH0KCiAgICAgICAgZnVuY3Rpb24gY3JlYXRlRW5lbXkoKSB7CiAgICAgICAgICAgIHJldHVybiB7CiAgICAgICAgICAgICAgICB4OiBNYXRoLnJhbmRvbSgpICogY2FudmFzLndpZHRoLAogICAgICAgICAgICAgICAgeTogTWF0aC5yYW5kb20oKSAqIGNhbnZhcy5oZWlnaHQsCiAgICAgICAgICAgICAgICByYWRpdXM6IDE1LAogICAgICAgICAgICAgICAgc3BlZWQ6IDIsCiAgICAgICAgICAgICAgICBjb2xvcjogJyNlNzRjM2MnCiAgICAgICAgICAgIH07CiAgICAgICAgfQoKICAgICAgICAvLyDguKPguLDguJrguJrguITguKfguJrguITguLjguKEKICAgICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdrZXlkb3duJywgKGUpID0mZ3Q7IHsKICAgICAgICAgICAgaWYgKGtleXMuaGFzT3duUHJvcGVydHkoZS5rZXkpKSBrZXlzW2Uua2V5XSA9IHRydWU7CiAgICAgICAgICAgIAogICAgICAgICAgICAvLyDguKLguLTguIfguIHguKPguLDguKrguLjguJkgKFNwYWNlYmFyKQogICAgICAgICAgICBpZiAoZS5jb2RlID09PSAnU3BhY2UnKSB7CiAgICAgICAgICAgICAgICBidWxsZXRzLnB1c2goewogICAgICAgICAgICAgICAgICAgIHg6IHBsYXllci54LAogICAgICAgICAgICAgICAgICAgIHk6IHBsYXllci55LAogICAgICAgICAgICAgICAgICAgIHNwZWVkOiAxMCwKICAgICAgICAgICAgICAgICAgICByYWRpdXM6IDUsCiAgICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZjFjNDBmJywKICAgICAgICAgICAgICAgICAgICBhbmdsZTogTWF0aC5hdGFuMihlLmNsaWVudFkgLSBwbGF5ZXIueSwgZS5jbGllbnRYIC0gcGxheWVyLngpCiAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgfQogICAgICAgIH0pOwoKICAgICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdrZXl1cCcsIChlKSA9Jmd0OyB7CiAgICAgICAgICAgIGlmIChrZXlzLmhhc093blByb3BlcnR5KGUua2V5KSkga2V5c1tlLmtleV0gPSBmYWxzZTsKICAgICAgICB9KTsKCiAgICAgICAgLy8g4LmA4Lij4Li04LmI4Lih4LmA4LiB4LihCiAgICAgICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKGdhbWVMb29wKTsKICAgICZsdDsvc2NyaXB0Jmd0OwombHQ7L2JvZHkmZ3Q7CiZsdDsvaHRtbCZndDs=
<!DOCTYPE html>
<html>
<head>
<title>Simple MOBA Game</title>
<style>
canvas {
border: 1px solid black;
background: #2c3e50;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// ตัวละครหลัก
const player = {
x: 400,
y: 300,
radius: 20,
speed: 5,
color: '#3498db',
health: 100
};
// ศัตรู
const enemies = [];
const enemySettings = {
spawnRate: 1000, // milliseconds
lastSpawn: 0
};
// กระสุน
const bullets = [];
// การควบคุม
const keys = {
ArrowUp: false,
ArrowDown: false,
ArrowLeft: false,
ArrowRight: false
};
// ระบบเกม
function gameLoop(timestamp) {
update(timestamp);
draw();
requestAnimationFrame(gameLoop);
}
function update(timestamp) {
// การเคลื่อนที่
if (keys.ArrowUp) player.y -= player.speed;
if (keys.ArrowDown) player.y += player.speed;
if (keys.ArrowLeft) player.x -= player.speed;
if (keys.ArrowRight) player.x += player.speed;
// สร้างศัตรู
if (timestamp - enemySettings.lastSpawn > enemySettings.spawnRate) {
enemies.push(createEnemy());
enemySettings.lastSpawn = timestamp;
}
// การเคลื่อนที่ศัตรู
enemies.forEach(enemy => {
const dx = player.x - enemy.x;
const dy = player.y - enemy.y;
const distance = Math.sqrt(dx*dx + dy*dy);
enemy.x += (dx / distance) * enemy.speed;
enemy.y += (dy / distance) * enemy.speed;
});
// ตรวจสอบการชน
enemies.forEach((enemy, index) => {
const dx = player.x - enemy.x;
const dy = player.y - enemy.y;
const distance = Math.sqrt(dx*dx + dy*dy);
if (distance < player.radius + enemy.radius) {
player.health -= 1;
enemies.splice(index, 1);
}
});
}
function draw() {
// ล้างหน้าจอ
ctx.clearRect(0, 0, canvas.width, canvas.height);
// วาดผู้เล่น
ctx.beginPath();
ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
ctx.fillStyle = player.color;
ctx.fill();
// วาดศัตรู
enemies.forEach(enemy => {
ctx.beginPath();
ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
ctx.fillStyle = enemy.color;
ctx.fill();
});
// วาดเลือด
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText(`HP: ${player.health}`, 10, 30);
}
function createEnemy() {
return {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: 15,
speed: 2,
color: '#e74c3c'
};
}
// ระบบควบคุม
document.addEventListener('keydown', (e) => {
if (keys.hasOwnProperty(e.key)) keys[e.key] = true;
// ยิงกระสุน (Spacebar)
if (e.code === 'Space') {
bullets.push({
x: player.x,
y: player.y,
speed: 10,
radius: 5,
color: '#f1c40f',
angle: Math.atan2(e.clientY - player.y, e.clientX - player.x)
});
}
});
document.addEventListener('keyup', (e) => {
if (keys.hasOwnProperty(e.key)) keys[e.key] = false;
});
// เริ่มเกม
requestAnimationFrame(gameLoop);
</script>
</body>
</html>