<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>เกมงูสไตล์โนเกีย (UI & Speed Adjusted Version)</title>
<style>
body {
margin: 0;
background: linear-gradient(135deg, #1e3c72, #2a5298);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
/* Container หลักที่จัดวางทุกอย่าง */
#game-container {
display: flex;
flex-direction: column; /* เรียงองค์ประกอบภายในแนวตั้ง */
align-items: center; /* จัดองค์ประกอบให้อยู่ตรงกลางแนวนอน */
position: relative; /* กำหนด position ให้ container หลัก */
}
/* ส่วนแสดงผลคะแนนและสถานะ Slow Mode ด้านบน - แก้ไข CSS จัดวางตรงกลาง */
#ui-overlay {
display: flex;
flex-direction: column; /* เปลี่ยนเป็นเรียงแนวตั้ง */
align-items: center; /* จัดองค์ประกอบให้อยู่ตรงกลางแนวนอน */
width: 500px; /* เท่า Canvas */
margin-bottom: 10px; /* เว้นระยะห่างจาก Canvas */
text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
}
#score-container {
color: #fff;
font-size: 20px;
/* text-align: left; ลบการจัดชิดซ้าย */
}
#slow-mode-status {
color: yellow;
font-size: 20px;
/* text-align: right; ลบการจัดชิดขวา */
}
#game-controls {
color: #fff;
font-size: 14px;
text-align: center;
margin-top: 10px; /* เว้นระยะห่างจากปุ่ม */
}
canvas {
background-color: #111;
box-shadow: 0 0 20px rgba(0,255,0,0.7);
border: 2px solid #fff;
z-index: 1;
}
/* Start Screen Styles */
#start-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
z-index: 20;
}
#start-screen h1 {
font-size: 60px; /* ปรับขนาดใหญ่ขึ้น */
margin-bottom: 20px;
text-shadow: 2px 2px 4px #000000; /* เพิ่มเงา */
}
#start-screen p {
font-size: 22px; /* ปรับขนาดใหญ่ขึ้น */
margin: 10px 0;
line-height: 1.6; /* เพิ่มความสูงบรรทัด */
max-width: 80%; /* จำกัดความกว้างข้อความ */
}
#start-screen p span {
font-weight: bold; /* ทำให้ข้อความบางส่วนหนาขึ้น */
color: #ffffa0; /* สีเหลืองอ่อน */
}
#start-screen .controls-示意 { /* container สำหรับจัด layout ปุ่มและลูกศร */
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
#start-screen .control-group { /* จัดกลุ่มปุ่ม/ลูกศร แต่ละแบบ */
margin: 0 20px;
}
#start-screen .control-title {
font-size: 24px;
margin-bottom: 10px;
color: #fff; /* สีขาว */
}
#start-screen button {
padding: 12px 24px; /* ปรับ padding ปุ่ม */
font-size: 24px; /* ปรับขนาด font ปุ่ม */
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 10px; /* ปรับขอบมน */
transition: background-color 0.3s, transform 0.2s; /* เพิ่ม transition */
box-shadow: 2px 2px 5px rgba(0,0,0,0.5); /* เพิ่มเงา */
}
#start-screen button:hover {
background-color: #45a049;
transform: scale(1.05); /* เอฟเฟกต์ขยายเล็กน้อยเมื่อ hover */
}
/* Touch Controls Styles - จัดวางแบบปุ่มทิศทางและ Slow Mode แยกบรรทัด */
#touch-controls {
display: flex;
flex-direction: column; /* เรียง container ปุ่มในแนวตั้ง */
align-items: center; /* จัดกลุ่มปุ่มให้อยู่ตรงกลาง */
width: 300px; /* ลดขนาด container ปุ่ม */
margin-top: 20px;
}
#direction-buttons {
display: flex; /* จัดปุ่มทิศทางให้อยู่ในบรรทัดเดียวกัน */
justify-content: space-around; /* กระจายปุ่มให้ห่างเท่าๆ กัน */
width: 100%; /* ให้เต็มความกว้าง container */
margin-bottom: 10px; /* เว้นระยะห่างจากปุ่ม Slow Mode */
}
.arrow-buttons {
width: 60px; /* กำหนดขนาดปุ่มลูกศร */
height: 50px;
border-radius: 8px; /* ปรับขอบมนปุ่มลูกศร */
background-color: rgba(255, 255, 255, 0.2);
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
cursor: pointer;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
transition: background-color 0.3s, transform 0.2s;
margin: 0 5px; /* เพิ่ม margin ข้างปุ่มลูกศร */
}
.arrow-buttons:hover, .arrow-buttons:active {
background-color: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
#slowButton.wide-button { /* ใช้ .wide-button class ร่วมกับ #slowButton */
width: 100%; /* ปุ่ม Slow Mode กว้างเต็ม container */
height: 40px; /* ลดความสูงปุ่ม Slow Mode */
border-radius: 20px; /* ปรับขอบมนปุ่ม Slow Mode */
background-color: rgba(255, 255, 0, 0.5);
color: black;
font-weight: bold;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
cursor: pointer;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
transition: background-color 0.3s, transform 0.2s;
margin-top: 10px; /* เว้นระยะห่างจากปุ่มทิศทาง */
}
#slowButton.wide-button:hover, #slowButton.wide-button:active {
background-color: rgba(255, 255, 0, 0.7);
transform: scale(1.02);
}
/* ซ่อนปุ่ม side-buttons เดิมที่ไม่ใช้แล้ว */
.side-buttons {
display: none !important;
}
/* Mobile Styles - CSS media query (ปรับขนาดปุ่มสำหรับมือถือ) */
@media (max-width: 576px) {
#touch-controls {
width: 90%; /* ขยาย container ปุ่มให้กว้างขึ้นบนมือถือ */
}
.arrow-buttons {
width: 50px; /* ลดขนาดปุ่มลูกศรลงอีกบนมือถือ */
height: 40px;
font-size: 20px; /* ลดขนาด font ปุ่มลูกศรบนมือถือ */
border-radius: 6px; /* ปรับขอบมนปุ่มลูกศรบนมือถือ */
}
#slowButton.wide-button { /* ใช้ .wide-button class ร่วมกับ #slowButton */
font-size: 16px; /* ลดขนาด font ปุ่ม Slow Mode บนมือถือ */
height: 35px; /* ลดความสูงปุ่ม Slow Mode บนมือถือ */
border-radius: 18px; /* ปรับขอบมนปุ่ม Slow Mode บนมือถือ */
}
}
/* ปุ่มลูกศรจำลองในหน้า start screen */
.arrow-button {
width: 50px;
height: 50px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
user-select: none;
}
</style>
</head>
<body>
<div id="game-container">
<div id="ui-overlay">
<div id="score-container">Score: <span id="score">0</span></div>
<div id="slow-mode-status"></div>
</div>
<canvas id="gameCanvas" width="500" height="500"></canvas>
<div id="touch-controls">
<div id="direction-buttons">
<div id="upButton" class="arrow-buttons">↑</div>
<div id="leftButton" class="arrow-buttons">←</div>
<div id="downButton" class="arrow-buttons">↓</div>
<div id="rightButton" class="arrow-buttons">→</div>
</div>
<div id="slowButton" class="wide-button">Slow Mode</div>
</div>
<div id="game-controls">
<p>ควบคุมด้วยปุ่มทัชสกรีนด้านล่าง</p>
</div>
</div>
<div id="start-screen">
<h1>เกมงูสไตล์โนเกีย</h1>
<p><span>เกมงูสุดคลาสสิก</span> พร้อมลูกเล่น Slow Mode สุดเจ๋ง!</p>
<div class="controls-示意">
<div class="control-group">
<div class="control-title">คีย์บอร์ด</div>
<div class="arrow-button">↑</div>
<div><div class="arrow-button">←</div><div class="arrow-button">↓</div><div class="arrow-button">→</div></div>
<p><span>ปุ่มลูกศร</span> ควบคุมทิศทาง</p>
<p><span>Spacebar</span> เปิด/ปิด Slow Mode</p>
</div>
<div class="control-group">
<div class="control-title">ทัชสกรีน</div>
<div id="leftButton-示意" class="side-buttons">←</div>
<div id="rightButton-示意" class="side-buttons">→</div>
<div id="slowButton-示意" id="slowButton" style="width: 120px; margin-top: 10px;">Slow Mode</div>
<p><span>ปุ่มซ้าย/ขวา</span> เลี้ยวซ้าย/ขวา</p>
<p><span>ปุ่ม Slow Mode</span> เปิด/ปิดท่าไม้ตาย</p>
</div>
</div>
<button id="startButton">เริ่มเกม</button>
</div>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const startScreen = document.getElementById("start-screen");
const startButton = document.getElementById("startButton");
// ปุ่มทัชสกรีน
const leftButton = document.getElementById("leftButton");
const rightButton = document.getElementById("rightButton");
const upButton = document.getElementById("upButton"); // ปุ่มขึ้น (เพิ่มใหม่)
const downButton = document.getElementById("downButton"); // ปุ่มลง (เพิ่มใหม่)
const slowButton = document.getElementById("slowButton");
// กำหนดขนาดช่อง, สถานะเกม, ความเร็ว
const cellSize = 25;
const cols = canvas.width / cellSize;
const rows = canvas.height / cellSize;
let gameState = "start";
let gameInterval;
let gameSpeedNormal = 200; // ปรับค่าความเร็วปกติ เป็น 200 ตามต้องการ
let gameSpeedSlow = 150; // ปรับค่าความเร็ว Slow Motion เป็น 150 ตามต้องการ
// กำหนดงู, ทิศทาง, อาหาร, ตัวนับ Slow Mode
let snake = [
{ x: 10, y: 10 },
{ x: 9, y: 10 },
{ x: 8, y: 10 },
{ x: 7, y: 10 },
{ x: 6, y: 10 }
];
// เปลี่ยน dx, dy เป็นทิศทางเริ่มต้น (ขวา)
let dx = 1;
let dy = 0;
let foodItems = [];
let maxFood = 10;
generateFood(3);
let slowModeMeter = 0;
let isSlowModeActive = false;
let slowModeTimer = 0;
// ฟังก์ชันวาดพื้นหลัง, สี่เหลี่ยมมุมโค้ง, หัวงู, งู, อาหาร (เหมือนเดิม)
function clearCanvas() {
ctx.fillStyle = "#111";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function drawRoundedRect(ctx, x, y, width, height, radius, isSlowMode) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.fill();
}
function drawSnakeHead(segment, isSlowMode) {
let x = segment.x * cellSize;
let y = segment.y * cellSize;
let centerX = x + cellSize / 2;
let centerY = y + cellSize / 2;
let gradient = ctx.createLinearGradient(x, y, x + cellSize, y + cellSize);
if (isSlowMode) {
gradient.addColorStop(0, "#FFD700");
gradient.addColorStop(1, "#DAA520");
} else {
gradient.addColorStop(0, "#00ff00");
gradient.addColorStop(1, "#008000");
}
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(centerX, centerY, cellSize / 2 - 2, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(centerX - 5, centerY - 3, 3, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.arc(centerX - 5, centerY - 3, 1.5, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(centerX + 5, centerY - 3, 3, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.arc(centerX + 5, centerY - 3, 1.5, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = "#000";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(centerX, centerY, 5, 0.2 * Math.PI, 0.8 * Math.PI);
ctx.stroke();
}
function drawSnake() {
for (let i = 0; i < snake.length; i++) {
let segment = snake[i];
let x = segment.x * cellSize;
let y = segment.y * cellSize;
if (i === 0) {
drawSnakeHead(segment, isSlowModeActive);
} else {
let gradient;
if (isSlowModeActive) {
gradient = ctx.createLinearGradient(x, y, x + cellSize, y + cellSize);
gradient.addColorStop(0, "#FFD700");
gradient.addColorStop(1, "#DAA520");
} else {
gradient = ctx.createLinearGradient(x, y, x + cellSize, y + cellSize);
gradient.addColorStop(0, "#00ff00");
gradient.addColorStop(1, "#008000");
}
ctx.fillStyle = gradient;
drawRoundedRect(ctx, x + 2, y + 2, cellSize - 4, cellSize - 4, 5, isSlowModeActive);
}
}
}
function drawFood() {
foodItems.forEach(food => {
let x = food.x * cellSize + cellSize / 2;
let y = food.y * cellSize + cellSize / 2;
let radius = cellSize / 2 - 2;
let gradient = ctx.createRadialGradient(x, y, radius * 0.1, x, y, radius);
gradient.addColorStop(0, "#ff0000");
gradient.addColorStop(1, "#800000");
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
});
}
// ฟังก์ชันวาดคะแนน (เหมือนเดิม)
function drawScore() {
document.getElementById('score').textContent = (snake.length - 5);
}
// ฟังก์ชันอัปเดตเกม (แก้ไข: ลดค่า slowModeTimer เป็นวินาที)
function update() {
if (gameState !== "playing") return;
if (isSlowModeActive) {
slowModeTimer -= 1; // แก้ไข: ลดค่า timer ลง 1 ทุกรอบ update (เมื่อ interval = 1000ms หรือ 1 วินาที)
if (slowModeTimer <= 0) {
toggleSlowMode();
}
}
let head = snake[0];
let newX = head.x + dx; // ใช้ dx, dy โดยตรง
let newY = head.y + dy;
let newHead = { x: newX, y: newY };
// แก้ไข: ระบบตายแบบชนกำแพงและชนตัวเอง (เหมือนเดิม)
if (newX < 0 || newX >= cols || newY < 0 || newY >= rows || checkCollision(newHead, snake)) {
return gameOver();
}
snake.unshift(newHead);
let foodEatenIndex = -1;
foodItems.forEach((food, index) => {
if (newX === food.x && newY === food.y) {
foodEatenIndex = index;
}
});
if (foodEatenIndex > -1) {
foodItems.splice(foodEatenIndex, 1);
slowModeMeter++;
generateFood(Math.floor(Math.random() * 3) + 1);
if (slowModeMeter >= 10 && !isSlowModeActive) {
updateSlowModeStatus();
}
} else {
snake.pop();
}
clearCanvas();
drawFood();
drawSnake();
drawScore();
updateSlowModeStatus();
}
// ฟังก์ชันตรวจสอบการชน (เหมือนเดิม)
function checkCollision(head, snakeArray) {
for (let i = 0; i < snakeArray.length; i++) {
if (head.x === snakeArray[i].x && head.y === snakeArray[i].y) {
return true;
}
}
return false;
}
// ฟังก์ชันสร้างอาหาร (เหมือนเดิม)
function generateFood(count) {
let foodGenerated = 0;
for (let i = 0; i < count; i++) {
if (foodItems.length >= maxFood) break;
let newFood = {
x: Math.floor(Math.random() * cols),
y: Math.floor(Math.random() * rows)
};
let isValidPosition = true;
for (let j = 0; j < snake.length; j++) {
if (newFood.x === snake[j].x && newFood.y === snake[j].y) {
isValidPosition = false;
break;
}
}
if (!isValidPosition) {
i--;
continue;
}
foodItems.push(newFood);
foodGenerated++;
}
}
// ฟังก์ชันเปลี่ยนทิศทาง (เหมือนเดิม)
function changeDirection(direction) {
if (gameState !== "playing") return;
let intendedDx = dx; // ทิศทางแกน X ที่ต้องการเปลี่ยน
let intendedDy = dy; // ทิศทางแกน Y ที่ต้องการเปลี่ยน
if (direction === "left") {
intendedDx = -1;
intendedDy = 0;
} else if (direction === "right") {
intendedDx = 1;
intendedDy = 0;
} else if (direction === "up") {
intendedDx = 0;
intendedDy = -1;
} else if (direction === "down") {
intendedDy = 1;
intendedDx = 0;
}
// ป้องกันการเลี้ยวกลับหลังหัน 180 องศา (ตายทันที) - แก้ไข: ใช้ AND แทน OR (เหมือนเดิม)
if (!(intendedDx === -dx && intendedDy === -dy)) { // ถ้าทิศทางใหม่ ไม่ใช่ทิศทางตรงข้ามกับทิศทางปัจจุบัน
dx = intendedDx; // เปลี่ยนทิศทาง
dy = intendedDy;
}
}
// ฟังก์ชัน Game Over (เหมือนเดิม)
function gameOver() {
clearInterval(gameInterval);
gameState = "gameover";
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#fff";
ctx.font = "40px Arial";
ctx.textAlign = "center";
ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
ctx.font = "20px Arial";
ctx.fillText("รีเฟรชเพื่อเล่นใหม่", canvas.width / 2, canvas.height / 2 + 40);
}
// ฟังก์ชันเปิด/ปิด Slow Mode (แก้ไข: ตั้งค่า timer ใหม่ทุกครั้ง และปรับ interval)
function toggleSlowMode() {
if (gameState !== "playing") return;
if (slowModeMeter >= 10 && !isSlowModeActive) {
isSlowModeActive = true;
slowModeMeter = 0;
slowModeTimer = 7; // แก้ไข: ตั้งค่า slowModeTimer ใหม่ทุกครั้งที่เปิด
clearInterval(gameInterval);
gameInterval = setInterval(update, 1000); // แก้ไข: ปรับ interval ให้เป็น 1000ms (1 วินาที)
updateSlowModeStatus();
} else if (isSlowModeActive) {
isSlowModeActive = false;
slowModeTimer = 0;
clearInterval(gameInterval);
gameInterval = setInterval(update, gameSpeedNormal);
updateSlowModeStatus();
}
}
// ฟังก์ชันอัปเดตสถานะ Slow Mode (แก้ไข: แสดงผล timer เป็นวินาทีจำนวนเต็ม)
function updateSlowModeStatus() {
let statusText = "";
if (isSlowModeActive) {
statusText = `Slow Mode: ON (${Math.ceil(slowModeTimer)}s)`; // แก้ไข: ใช้ Math.ceil เพื่อแสดงวินาทีจำนวนเต็ม
} else if (slowModeMeter >= 10) {
statusText = "Slow Mode Ready!";
} else if (slowModeMeter > 0) {
statusText = `เม็ดแดง: ${slowModeMeter}/10`;
} else {
statusText = `เม็ดแดง: ${slowModeMeter}/10`;
}
document.getElementById('slow-mode-status').textContent = statusText;
}
// Event listeners (เหมือนเดิม)
startButton.addEventListener('click', function() {
gameState = "playing";
startScreen.style.display = "none";
gameInterval = setInterval(update, gameSpeedNormal); // เริ่มเกมด้วยความเร็วปกติ (อาจต้องปรับ gameSpeedNormal)
updateSlowModeStatus();
});
// Event listeners ปุ่มทัชสกรีน (เหมือนเดิม)
leftButton.addEventListener('touchstart', function(event) { // ปุ่มซ้าย
event.preventDefault();
changeDirection("left");
});
leftButton.addEventListener('mousedown', function(event) {
changeDirection("left");
});
rightButton.addEventListener('touchstart', function(event) { // ปุ่มขวา
event.preventDefault();
changeDirection("right");
});
rightButton.addEventListener('mousedown', function(event) {
changeDirection("right");
});
upButton.addEventListener('touchstart', function(event) { // ปุ่มขึ้น (เพิ่มใหม่)
event.preventDefault();
changeDirection("up");
});
upButton.addEventListener('mousedown', function(event) {
changeDirection("up");
});
downButton.addEventListener('touchstart', function(event) { // ปุ่มลง (เพิ่มใหม่)
event.preventDefault();
changeDirection("down");
});
downButton.addEventListener('mousedown', function(event) {
changeDirection("down");
});
slowButton.addEventListener('touchstart', function(event) { // ปุ่ม Slow Mode
event.preventDefault();
toggleSlowMode();
});
slowButton.addEventListener('mousedown', function(event) {
toggleSlowMode();
});
document.addEventListener("keydown", function(event) { // Event listener ปุ่ม keyboard (เหมือนเดิม)
if (gameState === "playing") {
if (event.key === "ArrowUp") {
changeDirection("up");
} else if (event.key === "ArrowDown") {
changeDirection("down");
} else if (event.key === "ArrowLeft") {
changeDirection("left");
} else if (event.key === "ArrowRight") {
changeDirection("right");
} else if (event.code === 'Space') {
toggleSlowMode();
}
}
});
// เริ่มต้นแสดงผล (เหมือนเดิม)
canvas.style.display = "block";
drawStartScreen();
</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>