<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris Game</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
font-family: Arial, sans-serif;
transition: background 0.5s;
}
#game-container {
text-align: center;
}
#header {
display: flex;
justify-content: space-between;
width: 300px;
margin-bottom: 10px;
}
#score, #timer {
color: #fff;
text-shadow: 1px 1px 2px #000;
background: rgba(0, 0, 0, 0.3);
padding: 5px 10px;
border-radius: 5px;
}
#score span, #timer span {
display: block;
}
#score span:first-child, #timer span:first-child {
font-size: 16px;
color: #ddd;
}
#score span:last-child, #timer span:last-child {
font-size: 24px;
}
#game-canvas {
background: linear-gradient(135deg, #333, #555);
border: 2px solid #fff;
border-radius: 10px;
transition: border 0.3s, box-shadow 0.3s;
}
#start-screen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#controls {
margin-top: 15px;
}
.touch-button {
padding: 15px;
margin: 5px;
background: linear-gradient(135deg, #fff, #ddd);
border: none;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.1s, box-shadow 0.1s;
width: 60px;
height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.touch-button:active {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#rotate-button {
width: 200px;
border-radius: 25px;
background: linear-gradient(135deg, #ffeb3b, #ffd700);
font-weight: bold;
}
.button {
padding: 10px 20px;
margin: 5px;
background: linear-gradient(135deg, #4ecdc4, #45b7d1);
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div id="game-container">
<div id="header">
<div id="score">
<span>คะแนน</span>
<span>0</span>
</div>
<div id="timer">
<span>โหมดพิเศษ</span>
<span>0 วินาที</span>
</div>
</div>
<canvas id="game-canvas" width="300" height="600"></canvas>
<div id="controls">
<div>
<button class="touch-button" id="left">ซ้าย</button>
<button class="touch-button" id="down">ลง</button>
<button class="touch-button" id="right">ขวา</button>
</div>
<div>
<button id="rotate-button" class="touch-button">หมุน</button>
</div>
</div>
</div>
<div id="start-screen">
<h2>เริ่มเกม</h2>
<p>คำแนะนำการเล่น:<br>
- ใช้ปุ่มลูกศรซ้าย/ขวา/ลง หรือปุ่มสัมผัสเพื่อเลื่อน<br>
- กด Spacebar หรือปุ่มหมุนเพื่อหมุนบล็อก<br>
- เรียงแถวให้ครบเพื่อลบและได้คะแนน</p>
<button id="start-button" class="button">เริ่ม</button>
</div>
<script>
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const gridSize = 30;
const cols = canvas.width / gridSize;
const rows = canvas.height / gridSize;
let board = Array(rows).fill().map(() => Array(cols).fill(0));
let score = 0;
let specialMode = false;
let specialTime = 0;
let gameOver = false;
let lastSpecialThreshold = 0; // ตัวแปรเพื่อติดตามเกณฑ์โหมดพิเศษล่าสุด
const shapes = [
[[1, 1, 1, 1]], // I
[[1, 1], [1, 1]], // O
[[1, 1, 1], [0, 1, 0]], // T
[[1, 1, 1], [1, 0, 0]], // L
[[1, 1, 1], [0, 0, 1]], // J
[[1, 1, 0], [0, 1, 1]], // S
[[0, 1, 1], [1, 1, 0]] // Z
];
const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96c93d', '#f7d794', '#ff9f43', '#d63031'];
let currentShape, currentX, currentY, currentColor;
function newShape() {
const idx = Math.floor(Math.random() * shapes.length);
currentShape = shapes[idx];
currentColor = colors[idx];
currentX = Math.floor(cols / 2) - Math.floor(currentShape[0].length / 2);
currentY = 0;
if (!isValidMove(currentShape, currentX, currentY)) {
gameOver = true;
alert('เกมโอเวอร์!');
}
}
function isValidMove(shape, x, y) {
for (let i = 0; i < shape.length; i++) {
for (let j = 0; j < shape[i].length; j++) {
if (shape[i][j]) {
const newX = x + j;
const newY = y + i;
if (newX < 0 || newX >= cols || newY >= rows || (newY >= 0 && board[newY][newX])) {
return false;
}
}
}
}
return true;
}
function rotateShape() {
const rotated = currentShape[0].map((_, idx) => currentShape.map(row => row[idx]).reverse());
if (isValidMove(rotated, currentX, currentY)) {
currentShape = rotated;
}
}
function mergeShape() {
for (let i = 0; i < currentShape.length; i++) {
for (let j = 0; j < currentShape[i].length; j++) {
if (currentShape[i][j]) {
board[currentY + i][currentX + j] = currentColor;
}
}
}
}
function clearLines() {
let linesCleared = 0;
for (let i = rows - 1; i >= 0; i--) {
if (board[i].every(cell => cell)) {
board.splice(i, 1);
board.unshift(Array(cols).fill(0));
linesCleared++;
i++;
}
}
if (linesCleared > 0) {
const points = [0, 100, 300, 700, 1000][linesCleared];
const newScore = score + (specialMode ? points * 2 : points);
document.getElementById('score').innerHTML = `<span>คะแนน</span><span>${newScore}</span>`;
// ตรวจสอบการเริ่มหรือต่อเวลาโหมดพิเศษ
const currentThreshold = Math.floor(newScore / 1000) * 1000;
if (currentThreshold > lastSpecialThreshold) {
specialMode = true;
specialTime += 15; // เพิ่ม 15 วินาทีทุกครั้งที่ข้ามเกณฑ์ใหม่
lastSpecialThreshold = currentThreshold;
canvas.style.border = '4px solid #ffeb3b';
canvas.style.boxShadow = '0 0 20px #ffeb3b';
document.body.style.background = 'linear-gradient(135deg, #ffeb3b, #ff6b6b, #4ecdc4)';
}
score = newScore; // อัปเดตคะแนนหลังจากคำนวณ
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
if (board[i][j]) {
ctx.fillStyle = board[i][j];
ctx.fillRect(j * gridSize, i * gridSize, gridSize - 1, gridSize - 1);
}
}
}
for (let i = 0; i < currentShape.length; i++) {
for (let j = 0; j < currentShape[i].length; j++) {
if (currentShape[i][j]) {
ctx.fillStyle = currentColor;
ctx.fillRect((currentX + j) * gridSize, (currentY + i) * gridSize, gridSize - 1, gridSize - 1);
}
}
}
}
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
function update(time = 0) {
if (gameOver) return;
const deltaTime = time - lastTime;
lastTime = time;
dropCounter += deltaTime;
if (dropCounter > dropInterval) {
if (isValidMove(currentShape, currentX, currentY + 1)) {
currentY++;
} else {
mergeShape();
clearLines();
newShape();
}
dropCounter = 0;
}
if (specialMode) {
specialTime -= deltaTime / 1000;
document.getElementById('timer').innerHTML = `<span>โหมดพิเศษ</span><span>${specialTime.toFixed(1)} วินาที</span>`;
if (specialTime <= 0) {
specialMode = false;
canvas.style.border = '2px solid #fff';
canvas.style.boxShadow = 'none';
document.body.style.background = 'linear-gradient(135deg, #ff6b6b, #4ecdc4)';
}
} else {
document.getElementById('timer').innerHTML = `<span>โหมดพิเศษ</span><span>0 วินาที</span>`;
}
draw();
requestAnimationFrame(update);
}
document.addEventListener('keydown', (e) => {
if (gameOver) return;
if (e.key === 'ArrowLeft' && isValidMove(currentShape, currentX - 1, currentY)) currentX--;
if (e.key === 'ArrowRight' && isValidMove(currentShape, currentX + 1, currentY)) currentX++;
if (e.key === 'ArrowDown' && isValidMove(currentShape, currentX, currentY + 1)) currentY++;
if (e.key === ' ') rotateShape();
});
const buttons = {
left: document.getElementById('left'),
right: document.getElementById('right'),
down: document.getElementById('down'),
rotate: document.getElementById('rotate-button')
};
let moveIntervals = {};
let rotateTimeout = null;
function startMove(direction) {
if (gameOver) return;
if (direction === 'left' && isValidMove(currentShape, currentX - 1, currentY)) currentX--;
if (direction === 'right' && isValidMove(currentShape, currentX + 1, currentY)) currentX++;
if (direction === 'down' && isValidMove(currentShape, currentX, currentY + 1)) currentY++;
if (direction === 'left' || direction === 'right' || direction === 'down') {
moveIntervals[direction] = setInterval(() => {
if (direction === 'left' && isValidMove(currentShape, currentX - 1, currentY)) currentX--;
if (direction === 'right' && isValidMove(currentShape, currentX + 1, currentY)) currentX++;
if (direction === 'down' && isValidMove(currentShape, currentX, currentY + 1)) currentY++;
}, 100);
}
}
function stopMove(direction) {
if (direction !== 'rotate') clearInterval(moveIntervals[direction]);
}
function handleRotate() {
if (gameOver || rotateTimeout) return;
rotateShape();
rotateTimeout = setTimeout(() => rotateTimeout = null, 200);
}
buttons.left.addEventListener('mousedown', () => startMove('left'));
buttons.right.addEventListener('mousedown', () => startMove('right'));
buttons.down.addEventListener('mousedown', () => startMove('down'));
buttons.rotate.addEventListener('mousedown', handleRotate);
buttons.left.addEventListener('mouseup', () => stopMove('left'));
buttons.right.addEventListener('mouseup', () => stopMove('right'));
buttons.down.addEventListener('mouseup', () => stopMove('down'));
buttons.left.addEventListener('touchstart', (e) => { e.preventDefault(); startMove('left'); });
buttons.right.addEventListener('touchstart', (e) => { e.preventDefault(); startMove('right'); });
buttons.down.addEventListener('touchstart', (e) => { e.preventDefault(); startMove('down'); });
buttons.rotate.addEventListener('touchstart', (e) => { e.preventDefault(); handleRotate(); });
buttons.left.addEventListener('touchend', () => stopMove('left'));
buttons.right.addEventListener('touchend', () => stopMove('right'));
buttons.down.addEventListener('touchend', () => stopMove('down'));
document.getElementById('start-button').addEventListener('click', () => {
document.getElementById('start-screen').style.display = 'none';
newShape();
update();
});
</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>