Hugging Face's logo

Spaces:
openfree
/
Tetris-Game
Running

App Files Community
1
Tetris-Game / index-backup.html
openfree's picture
openfree
Rename index.html to index-backup.html
51d54ba verified
raw
history blame contribute delete
11.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris Game by MOUSE(VIDraft-mouse1.hf.space)</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1a1a1a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: Arial, sans-serif;
padding: 20px;
}
.title {
color: #00f0f0;
font-size: 2.5rem;
margin-bottom: 2rem;
text-align: center;
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}
.game-container {
display: flex;
gap: 20px;
}
#game-board {
border: 2px solid #333;
background: #000;
}
.side-panel {
display: flex;
flex-direction: column;
gap: 20px;
color: white;
}
.next-piece {
width: 150px;
height: 150px;
border: 2px solid #333;
background: #000;
}
.score-board {
padding: 10px;
background: #333;
border-radius: 5px;
}
.controls {
background: #333;
padding: 10px;
border-radius: 5px;
}
.controls p {
margin: 5px 0;
font-size: 14px;
}
.title strong {
color: #f0a000;
}
</style>
</head>
<body>
<h1 class="title">Tetris Game <strong>by MOUSE(VIDraft-mouse1.hf.space)</strong></h1>
<div class="game-container">
<canvas id="game-board" width="300" height="600"></canvas>
<div class="side-panel">
<div class="next-piece">
<canvas id="next-piece-canvas" width="150" height="150"></canvas>
</div>
<div class="score-board">
<h3>Score: <span id="score">0</span></h3>
<h3>Lines: <span id="lines">0</span></h3>
<h3>Level: <span id="level">1</span></h3>
</div>
<div class="controls">
<h3>Controls:</h3>
<p>← β†’ : Move Left/Right</p>
<p>↓ : Soft Drop</p>
<p>Space : Hard Drop</p>
<p>↑ : Rotate</p>
</div>
</div>
</div>
<!-- μ΄ν•˜ script 뢀뢄은 λ™μΌν•˜λ―€λ‘œ μƒλž΅ν•˜μ§€ μ•Šκ³  κ·ΈλŒ€λ‘œ 포함 -->
<script>
const canvas = document.getElementById('game-board');
const ctx = canvas.getContext('2d');
const nextPieceCanvas = document.getElementById('next-piece-canvas');
const nextPieceCtx = nextPieceCanvas.getContext('2d');
const BLOCK_SIZE = 30;
const BOARD_WIDTH = 10;
const BOARD_HEIGHT = 20;
let board = Array(BOARD_HEIGHT).fill().map(() => Array(BOARD_WIDTH).fill(0));
let score = 0;
let lines = 0;
let level = 1;
let gameLoop;
let currentPiece;
let nextPiece;
const SHAPES = [
[[1, 1, 1, 1]], // I
[[1, 1], [1, 1]], // O
[[0, 1, 1], [1, 1, 0]], // S
[[1, 1, 0], [0, 1, 1]], // Z
[[1, 0, 0], [1, 1, 1]], // L
[[0, 0, 1], [1, 1, 1]], // J
[[0, 1, 0], [1, 1, 1]] // T
];
const COLORS = [
'#00f0f0', // cyan
'#f0f000', // yellow
'#00f000', // green
'#f00000', // red
'#f0a000', // orange
'#0000f0', // blue
'#a000f0' // purple
];
class Piece {
constructor(shape = null) {
this.shape = shape || SHAPES[Math.floor(Math.random() * SHAPES.length)];
this.color = COLORS[SHAPES.findIndex(s => s === this.shape)];
this.x = Math.floor((BOARD_WIDTH - this.shape[0].length) / 2);
this.y = 0;
}
}
function drawBlock(ctx, x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE - 1, BLOCK_SIZE - 1);
}
function drawBoard() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw board
for(let y = 0; y < BOARD_HEIGHT; y++) {
for(let x = 0; x < BOARD_WIDTH; x++) {
if(board[y][x]) {
drawBlock(ctx, x, y, board[y][x]);
}
}
}
// Draw current piece
if(currentPiece) {
for(let y = 0; y < currentPiece.shape.length; y++) {
for(let x = 0; x < currentPiece.shape[y].length; x++) {
if(currentPiece.shape[y][x]) {
drawBlock(ctx, currentPiece.x + x, currentPiece.y + y, currentPiece.color);
}
}
}
}
}
function drawNextPiece() {
nextPieceCtx.clearRect(0, 0, nextPieceCanvas.width, nextPieceCanvas.height);
const offsetX = (nextPieceCanvas.width - nextPiece.shape[0].length * BLOCK_SIZE) / 2;
const offsetY = (nextPieceCanvas.height - nextPiece.shape.length * BLOCK_SIZE) / 2;
for(let y = 0; y < nextPiece.shape.length; y++) {
for(let x = 0; x < nextPiece.shape[y].length; x++) {
if(nextPiece.shape[y][x]) {
nextPieceCtx.fillStyle = nextPiece.color;
nextPieceCtx.fillRect(
offsetX + x * BLOCK_SIZE,
offsetY + y * BLOCK_SIZE,
BLOCK_SIZE - 1,
BLOCK_SIZE - 1
);
}
}
}
}
function isValidMove(piece, offsetX, offsetY, newShape = null) {
const shape = newShape || piece.shape;
for(let y = 0; y < shape.length; y++) {
for(let x = 0; x < shape[y].length; x++) {
if(shape[y][x]) {
const newX = piece.x + x + offsetX;
const newY = piece.y + y + offsetY;
if(newX < 0 || newX >= BOARD_WIDTH || newY >= BOARD_HEIGHT) {
return false;
}
if(newY >= 0 && board[newY][newX]) {
return false;
}
}
}
}
return true;
}
function rotatePiece() {
const newShape = currentPiece.shape[0].map((_, i) =>
currentPiece.shape.map(row => row[i]).reverse()
);
if(isValidMove(currentPiece, 0, 0, newShape)) {
currentPiece.shape = newShape;
}
}
function mergePiece() {
for(let y = 0; y < currentPiece.shape.length; y++) {
for(let x = 0; x < currentPiece.shape[y].length; x++) {
if(currentPiece.shape[y][x]) {
board[currentPiece.y + y][currentPiece.x + x] = currentPiece.color;
}
}
}
}
function checkLines() {
let linesCleared = 0;
for(let y = BOARD_HEIGHT - 1; y >= 0; y--) {
if(board[y].every(cell => cell !== 0)) {
board.splice(y, 1);
board.unshift(Array(BOARD_WIDTH).fill(0));
linesCleared++;
y++;
}
}
if(linesCleared > 0) {
lines += linesCleared;
score += linesCleared * 100 * level;
level = Math.floor(lines / 10) + 1;
document.getElementById('score').textContent = score;
document.getElementById('lines').textContent = lines;
document.getElementById('level').textContent = level;
}
}
function gameOver() {
clearInterval(gameLoop);
alert(`Game Over! Score: ${score}`);
resetGame();
}
function resetGame() {
board = Array(BOARD_HEIGHT).fill().map(() => Array(BOARD_WIDTH).fill(0));
score = 0;
lines = 0;
level = 1;
document.getElementById('score').textContent = score;
document.getElementById('lines').textContent = lines;
document.getElementById('level').textContent = level;
startGame();
}
function update() {
if(isValidMove(currentPiece, 0, 1)) {
currentPiece.y++;
} else {
mergePiece();
checkLines();
currentPiece = nextPiece;
nextPiece = new Piece();
drawNextPiece();
if(!isValidMove(currentPiece, 0, 0)) {
gameOver();
}
}
drawBoard();
}
function startGame() {
currentPiece = new Piece();
nextPiece = new Piece();
drawNextPiece();
if(gameLoop) clearInterval(gameLoop);
gameLoop = setInterval(() => {
update();
}, 1000 / level);
}
document.addEventListener('keydown', (e) => {
switch(e.keyCode) {
case 37: // Left
if(isValidMove(currentPiece, -1, 0)) {
currentPiece.x--;
drawBoard();
}
break;
case 39: // Right
if(isValidMove(currentPiece, 1, 0)) {
currentPiece.x++;
drawBoard();
}
break;
case 40: // Down
if(isValidMove(currentPiece, 0, 1)) {
currentPiece.y++;
drawBoard();
}
break;
case 38: // Up (Rotate)
rotatePiece();
drawBoard();
break;
case 32: // Space (Hard Drop)
while(isValidMove(currentPiece, 0, 1)) {
currentPiece.y++;
}
update();
break;
}
});
startGame();
</script>
</body>
</html>