`data/artifacts/04692f72ef1d/qwen25-7b.html`

71 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tetris</title>
    <style>
        body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
        #game { width: 320px; height: 640px; background: #000; border: 1px solid #fff; overflow: hidden; position: relative; }
        .row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: -20px; }
        .cell { width: 20px; height: 20px; background: #ccc; border: 1px solid #fff; float: left; }
        .piece { position: absolute; z-index: 2; top: 0; left: 0; }
    </style>
</head>
<body>
<div id="game"></div>
<script>
const game = document.getElementById('game')
const cells = Array.from({length:32},(_,i)=>(i%16<8?'#fff':'#000').slice(-1))
let grid = Array.from({length:20},()=>cells.slice())
let piece, pieceX, pieceY, score = 0
let nextPieceIndex = Math.floor(Math.random() * 7)
const pieces = [{x:[1,3,4,6],[0,1,2,3]},{x:[1,3,5,7],[0,1,2,3]},{x:[0,1,3,5],[1,2,4,5]},{x:[0,1,2,3],[1,2,3,6]},{x:[0,1,3,4],[1,2,4,5]},{x:[0,1,2,5],[1,3,4,5]},{x:[0,1,2,3],[1,2,3,5]}]
const pieceSpawns = [6,7,8,9,10,11,12]
let t = 0
let intervalId

function render() {
    grid.forEach((row,i) => 
        row.map(cell => game.innerHTML += `<div class="cell ${cell}"></div>`).splice(16)
    ).splice(4)
    
    if(piece) pieceSpawns[piece.index] ? (piece = pieces[pieceSpawns[piece.index++]]) : clearInterval(intervalId)
    else {
        piece = {x: [0,2,3,5], y: 0, index: nextPieceIndex}
        nextPieceIndex = Math.floor(Math.random() * 7)
        if(!pieces.some(p => p.x.every(x => (pieceX + x) < 16 && grid[pieceY + 1][pieceX + x] == '#fff'))) return clearInterval(intervalId)
    }
    
    const {x, y} = piece
    game.innerHTML += `<div class="piece" style="left:${(pieceX * 20)}px;top:${(pieceY * 20)}px">${x.map(x => `<div class="cell"></div>`).join('')}</div>`

    if(pieceY == -1) {
        for(let i = 4; i < 20; i++) 
            grid[i] = cells.slice()
        
        const cleared = [...grid].reverse().some(row => row.every(cell => cell == '#fff'))
        if(cleared) score += 10 * (cleared.length + 1)
    }
}

function key(e) {
    switch(e.keyCode) {
        case 37: pieceX = Math.max(0, pieceX - 1); break
        case 39: pieceX = Math.min(pieceX + 1, 15 - x.length); break
        case 40: 
            if(grid[pieceY + 1].every((cell, i) => cell == '#fff' || (x[i] && cells.includes(cell)))) {
                pieceY++
                render()
            }
            break
        case 38: 
            const {x, y} = piece
            x.map(x => grid[pieceY][pieceX + x] != '#fff').every(free => free) ? (y++, render()) : null
    }
}

document.addEventListener('keydown', key)
setInterval(render, t = 500 - Math.floor(score / 3))
</script>
</body>
</html>