| Server IP : 104.21.80.248 / Your IP : 172.71.28.156 Web Server : Apache/2.4.25 (Win32) OpenSSL/1.0.2j PHP/5.6.30 System : Windows NT WIN-ECQAAA40806 6.2 build 9200 (Windows Server 2012 Standard Edition) i586 User : SYSTEM ( 0) PHP Version : 5.6.30 Disable Function : NONE MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /Inetpub/www/game/ |
Upload File : |
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>เกมยิงลูกโป่ง</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #87CEEB;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: 'Arial', sans-serif;
}
/* --- Start Screen & Game Over Screen Styles --- */
#start-screen, #game-over-screen {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7); /* พื้นหลังทึบแสง */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
z-index: 200; /* ให้อยู่บนสุด */
text-align: center;
}
#start-screen h1, #game-over-screen h1 {
font-size: 8vmin;
margin-bottom: 5vmin;
text-shadow: 3px 3px 5px rgba(0,0,0,0.5);
}
#game-over-message {
font-size: 6vmin;
margin-bottom: 3vmin;
}
.setting-group {
margin-bottom: 3vmin;
display: flex;
align-items: center;
font-size: 3vmin;
}
.setting-group label {
margin-right: 2vmin;
white-space: nowrap; /* ป้องกันไม่ให้ข้อความขึ้นบรรทัดใหม่ */
}
.setting-group select,
.setting-group input[type="number"] {
padding: 1.5vmin 2.5vmin;
border-radius: 8px;
border: none;
font-size: 3vmin;
width: 25vmin; /* กำหนดความกว้างให้เหมาะสม */
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
background-repeat: no-repeat;
background-position: right 0.5em center;
background-size: 4vmin;
padding-right: 6vmin;
}
.setting-group input[type="number"] {
background-image: none; /* ไม่มีลูกศร dropdown */
text-align: left;
}
#start-game-btn, #restart-game-btn {
padding: 3vmin 6vmin;
font-size: 4vmin;
background-color: #4CAF50; /* เขียว */
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 5vmin;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
#start-game-btn:hover, #restart-game-btn:hover {
background-color: #45a049;
}
/* --- Game Area Styles --- */
#game-area {
position: relative;
width: 100vw;
height: 100vh;
background-image: linear-gradient(to bottom, #87CEEB, #add8e6);
overflow: hidden;
cursor: crosshair;
display: none; /* ซ่อนไว้ก่อน */
}
.balloon {
position: absolute;
background-color: red;
border-radius: 50%;
width: 10vmin;
height: 12vmin;
bottom: -15vmin;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5vmin;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@keyframes floatUp {
from { bottom: -15vmin; opacity: 0.8; }
to { bottom: 110%; opacity: 0; }
}
#score-board {
position: absolute;
top: 2vmin;
left: 2vmin;
font-size: 4vmin;
font-family: 'Arial', sans-serif;
color: white;
text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
z-index: 100;
display: none; /* ซ่อนไว้ก่อน */
}
</style>
</head>
<body>
<div id="start-screen">
<h1>เกมยิงลูกโป่ง</h1>
<div class="setting-group">
<label for="speed-select-start">ความเร็วลูกโป่ง:</label>
<select id="speed-select-start">
<option value="10">ช้ามาก (Very Slow)</option>
<option value="5">ช้า (Slow)</option>
<option value="3" selected>ปานกลาง (Medium)</option>
<option value="1.5">เร็ว (Fast)</option>
</select>
</div>
<div class="setting-group">
<label for="balloon-count-input">จำนวนลูกโป่ง:</label>
<input type="number" id="balloon-count-input" value="10" min="1" max="100">
</div>
<div class="setting-group">
<label for="spawn-interval-input">ช่วงเวลาเกิด (วินาที):</label>
<input type="number" id="spawn-interval-input" value="1" min="0.1" step="0.1">
</div>
<button id="start-game-btn">เริ่มเกม</button>
</div>
<div id="game-over-screen">
<h1 id="game-over-message">สร้างลูกโป่งครบแล้ว!</h1>
<button id="restart-game-btn">เริ่มเล่นใหม่</button>
</div>
<div id="game-area">
<div id="score-board">คะแนน: <span id="score">0</span></div>
</div>
<script>
const startScreen = document.getElementById('start-screen');
const speedSelectStart = document.getElementById('speed-select-start');
const balloonCountInput = document.getElementById('balloon-count-input');
const spawnIntervalInput = document.getElementById('spawn-interval-input');
const startGameBtn = document.getElementById('start-game-btn');
const gameOverScreen = document.getElementById('game-over-screen');
const gameOverMessage = document.getElementById('game-over-message');
const restartGameBtn = document.getElementById('restart-game-btn');
const gameArea = document.getElementById('game-area');
const scoreBoard = document.getElementById('score-board');
const scoreDisplay = document.getElementById('score');
let score = 0;
const balloonColors = ['red', 'blue', 'green', 'purple', 'orange', 'pink'];
let currentSpeed = 0;
let totalBalloonsToCreate = 0;
let spawnInterval = 0;
let balloonsCreated = 0;
let gameInterval;
let checkGameEndInterval; // เพิ่มตัวแปรสำหรับ Interval ในการตรวจสอบการจบเกม
// --- Event Listeners ---
startGameBtn.addEventListener('click', () => {
currentSpeed = parseFloat(speedSelectStart.value);
totalBalloonsToCreate = parseInt(balloonCountInput.value);
spawnInterval = parseFloat(spawnIntervalInput.value);
// ตรวจสอบความถูกต้องของค่า
if (isNaN(totalBalloonsToCreate) || totalBalloonsToCreate < 1) {
totalBalloonsToCreate = 10;
balloonCountInput.value = 10;
}
if (isNaN(spawnInterval) || spawnInterval < 0.1) {
spawnInterval = 1;
spawnIntervalInput.value = 1;
}
// ซ่อน Start Screen และ Game Over Screen, แสดง Game Area
startScreen.style.display = 'none';
gameOverScreen.style.display = 'none';
gameArea.style.display = 'block';
scoreBoard.style.display = 'block';
// รีเซ็ตคะแนนและจำนวนลูกโป่งที่สร้าง
score = 0;
scoreDisplay.textContent = score;
balloonsCreated = 0;
startGame();
});
restartGameBtn.addEventListener('click', () => {
// เมื่อกด "เริ่มเล่นใหม่" ให้กลับไปหน้าจอตั้งค่า
gameOverScreen.style.display = 'none';
gameArea.style.display = 'none';
scoreBoard.style.display = 'none';
startScreen.style.display = 'flex'; // แสดงหน้าจอตั้งค่า
});
// --- Game Logic Functions ---
function createBalloon() {
if (balloonsCreated >= totalBalloonsToCreate) {
// ถ้าสร้างครบตามจำนวนแล้ว ให้หยุดสร้างลูกโป่ง แต่ยังไม่จบเกม
clearInterval(gameInterval);
console.log("สร้างลูกโป่งครบตามจำนวนแล้ว รอให้ลูกโป่งที่เหลือลอยหายไป");
return; // ไม่สร้างลูกโป่งเพิ่ม
}
const balloon = document.createElement('div');
balloon.classList.add('balloon');
const randomColor = balloonColors[Math.floor(Math.random() * balloonColors.length)];
balloon.style.backgroundColor = randomColor;
const randomX = Math.random() * (gameArea.offsetWidth - balloon.offsetWidth);
balloon.style.left = `${randomX}px`;
balloon.style.animation = `floatUp ${currentSpeed}s linear forwards`;
balloon.textContent = "POP!";
gameArea.appendChild(balloon);
balloonsCreated++;
balloon.addEventListener('pointerdown', (event) => {
event.preventDefault();
score++;
scoreDisplay.textContent = score;
balloon.remove();
checkGameEnd(); // ตรวจสอบการจบเกมเมื่อลูกโป่งถูกคลิกแตก
});
// ลบลูกโป่งเมื่อลอยพ้นจอไปแล้ว (และไม่ได้ถูกคลิก)
balloon.addEventListener('animationend', () => {
if (balloon.parentNode) {
balloon.remove();
checkGameEnd(); // ตรวจสอบการจบเกมเมื่อลูกโป่งลอยพ้นจอ
}
});
}
function startGame() {
// ล้างลูกโป่งเก่าๆ ออกไปก่อนเริ่มเกมใหม่ (ถ้ามี)
document.querySelectorAll('.balloon').forEach(b => b.remove());
// เคลียร์ Interval เดิมออกไปก่อน (ถ้ามี)
clearInterval(gameInterval);
clearInterval(checkGameEndInterval);
// เริ่มสร้างลูกโป่งตามช่วงเวลาที่กำหนด
gameInterval = setInterval(createBalloon, spawnInterval * 1000);
// เริ่มตรวจสอบการจบเกมทุกๆ 500 มิลลิวินาที
checkGameEndInterval = setInterval(checkGameEnd, 500);
}
function checkGameEnd() {
// เงื่อนไขการจบเกม:
// 1. สร้างลูกโป่งครบตามจำนวนที่ตั้งไว้แล้ว
// 2. ไม่มีลูกโป่งเหลืออยู่บนหน้าจอแล้ว
const balloonsOnScreen = document.querySelectorAll('.balloon').length;
if (balloonsCreated >= totalBalloonsToCreate && balloonsOnScreen === 0) {
clearInterval(gameInterval); // ให้แน่ใจว่าหยุดสร้าง
clearInterval(checkGameEndInterval); // หยุดการตรวจสอบการจบเกม
showGameOverScreen();
}
}
function showGameOverScreen() {
gameArea.style.display = 'none';
scoreBoard.style.display = 'none';
gameOverScreen.style.display = 'flex';
gameOverMessage.textContent = `คะแนนของคุณ: ${score} คะแนน!`;
}
// เมื่อโหลดหน้ามาครั้งแรก ให้แสดง Start Screen
document.addEventListener('DOMContentLoaded', () => {
startScreen.style.display = 'flex';
gameOverScreen.style.display = 'none';
gameArea.style.display = 'none';
scoreBoard.style.display = 'none';
});
</script>
</body>
</html>