{"id":3635,"date":"2024-10-15T17:29:06","date_gmt":"2024-10-15T15:29:06","guid":{"rendered":"https:\/\/fahrtauglich.ch\/?page_id=3635"},"modified":"2025-02-06T16:59:49","modified_gmt":"2025-02-06T15:59:49","slug":"tetris","status":"publish","type":"page","link":"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/tetris\/","title":{"rendered":"Tetris"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3635\" class=\"elementor elementor-3635\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63d0d8a e-flex e-con-boxed e-con e-parent\" data-id=\"63d0d8a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ad53491 elementor-widget elementor-widget-heading\" data-id=\"ad53491\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Tetris<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf16159 elementor-widget elementor-widget-html\" data-id=\"cf16159\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Tetris Spiel<\/title>\r\n    <style>\r\n        body {\r\n            margin: 0;\r\n            padding: 0;\r\n            font-family: Arial, sans-serif;\r\n            font-weight: bold;\r\n        }\r\n        .tetris-app {\r\n            max-width: 100%;\r\n            margin: 0 auto;\r\n            text-align: center;\r\n            padding: 10px;\r\n        }\r\n        #game-container {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            margin: 20px auto;\r\n        }\r\n        \/* Hier bleiben wir bei der Zeilenrichtung \u2013 Spielbrett und Vorschaublock nebeneinander *\/\r\n        #game-and-preview {\r\n            display: flex;\r\n            flex-direction: row;\r\n            align-items: flex-start;\r\n        }\r\n        #tetris-board {\r\n            width: 300px;\r\n            height: 600px;\r\n            background: #fff;\r\n            border: 2px solid #333;\r\n            margin-bottom: 20px;\r\n        }\r\n        \/* Vorschaublock standardm\u00e4\u00dfig ausgeblendet *\/\r\n        #preview-container {\r\n            display: none;\r\n            margin-left: 20px;\r\n        }\r\n        \/* Wird sichtbar, wenn die Klasse \"visible\" gesetzt wird *\/\r\n        #preview-container.visible {\r\n            display: block;\r\n        }\r\n        #preview-canvas {\r\n            width: 100px;\r\n            height: 100px;\r\n            background: #fff;\r\n            border: 2px solid #333;\r\n        }\r\n        \/* Mobile Steuerungstasten \u2013 unterhalb des Spielbereichs *\/\r\n        #mobile-controls {\r\n            margin: 20px 0;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n        #mobile-controls .control-row {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 10px;\r\n            width: 100%;\r\n            margin-bottom: 10px;\r\n        }\r\n        #mobile-controls .mobile-btn {\r\n            padding: 15px;\r\n            font-size: 18px;\r\n            flex: 1;\r\n            max-width: 150px;\r\n            border: none;\r\n            border-radius: 4px;\r\n            background-color: #FFBE00;\r\n            color: #000;\r\n            cursor: pointer;\r\n            transition: background-color 0.3s ease;\r\n        }\r\n        #mobile-controls .mobile-btn:hover {\r\n            background-color: #e6a700;\r\n        }\r\n        \/* Bestehende Steuerungselemente *\/\r\n        #controls {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            margin-top: 20px;\r\n        }\r\n        .btn, select, input[type=range], label {\r\n            margin: 10px;\r\n            width: 80%;\r\n            max-width: 300px;\r\n        }\r\n        button {\r\n            padding: 10px;\r\n            font-size: 16px;\r\n            cursor: pointer;\r\n            background-color: #FFBE00;\r\n            color: #000;\r\n            border: none;\r\n            border-radius: 4px;\r\n            transition: background-color 0.3s ease;\r\n            font-weight: bold;\r\n        }\r\n        button:hover {\r\n            background-color: #e6a700;\r\n        }\r\n        button:disabled {\r\n            background-color: #cfd8dc;\r\n            cursor: not-allowed;\r\n        }\r\n        #level-slider-container {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 100%;\r\n        }\r\n        #level-slider-container label {\r\n            margin-right: 10px;\r\n        }\r\n        \/* Container f\u00fcr Spielbereich (Spielbrett und Vorschau) \u2013 zus\u00e4tzlicher horizontaler Rand *\/\r\n        #game-area {\r\n            position: relative;\r\n            display: flex;\r\n            margin: 0 20px;\r\n        }\r\n        \/* Mobile Anpassungen *\/\r\n        @media (max-width: 768px) {\r\n            #tetris-board {\r\n                width: 200px;\r\n                height: 400px;\r\n            }\r\n            #preview-canvas {\r\n                width: 80px;\r\n                height: 80px;\r\n            }\r\n            #mobile-controls .mobile-btn {\r\n                padding: 15px;\r\n                font-size: 18px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"tetris-app\">\r\n        <div id=\"game-container\">\r\n            <div id=\"game-and-preview\">\r\n                <canvas width=\"300\" height=\"600\" id=\"tetris-board\"><\/canvas>\r\n                <div id=\"preview-container\">\r\n                    <canvas width=\"100\" height=\"100\" id=\"preview-canvas\"><\/canvas>\r\n                <\/div>\r\n            <\/div>\r\n            <!-- Mobile Steuerungstasten -->\r\n            <div id=\"mobile-controls\">\r\n                <div class=\"control-row\">\r\n                    <button id=\"move-left\" class=\"mobile-btn\">Links<\/button>\r\n                    <button id=\"rotate\" class=\"mobile-btn\">Drehen<\/button>\r\n                    <button id=\"move-right\" class=\"mobile-btn\">Rechts<\/button>\r\n                <\/div>\r\n                <div class=\"control-row\">\r\n                    <button id=\"hard-drop\" class=\"mobile-btn\">Fallen<\/button>\r\n                <\/div>\r\n            <\/div>\r\n            <div id=\"controls\">\r\n                <div id=\"points-lines\">\r\n                    <p>Punkte: <span id=\"points\">0<\/span><\/p>\r\n                    <p>Linien: <span id=\"lines\">0<\/span><\/p>\r\n                    <p>Level: <span id=\"level\">1<\/span><\/p>\r\n                <\/div>\r\n                <div id=\"level-slider-container\">\r\n                    <label for=\"level-slider\">Startlevel:<\/label>\r\n                    <input type=\"range\" id=\"level-slider\" min=\"1\" max=\"10\" value=\"1\">\r\n                <\/div>\r\n                <button id=\"start-pause-button\" class=\"btn\">Start<\/button>\r\n                <button id=\"new-game-button\" class=\"btn\">Neues Spiel<\/button>\r\n                <button id=\"toggle-sound\" class=\"btn\">Musik an\/ab<\/button>\r\n                <select id=\"music-select\" class=\"btn\">\r\n                    <option value=\"Classic\">Classic<\/option>\r\n                    <option value=\"Jazz\">Jazz<\/option>\r\n                    <option value=\"Rock\">Rock<\/option>\r\n                <\/select>\r\n                <label><input type=\"checkbox\" id=\"preview-checkbox\"> Vorschau<\/label>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            \/\/ Existierende Elemente und Variablen\r\n            const toggleSoundBtn = document.getElementById('toggle-sound');\r\n            const musicSelect = document.getElementById('music-select');\r\n            const levelSlider = document.getElementById('level-slider');\r\n            const startPauseBtn = document.getElementById('start-pause-button');\r\n            const newGameBtn = document.getElementById('new-game-button');\r\n            const previewCheckbox = document.getElementById('preview-checkbox');\r\n            const canvas = document.getElementById('tetris-board');\r\n            const context = canvas.getContext('2d');\r\n            const previewCanvas = document.getElementById('preview-canvas');\r\n            const previewContext = previewCanvas.getContext('2d');\r\n            const previewContainer = document.getElementById('preview-container');\r\n            const pointsElement = document.getElementById('points');\r\n            const linesElement = document.getElementById('lines');\r\n            const levelElement = document.getElementById('level');\r\n            const audio = new Audio();\r\n\r\n            \/\/ URLs zu Musikdateien\r\n            const musicFiles = {\r\n                Classic: 'https:\/\/fahrtauglich.ch\/wp-content\/uploads\/2024\/10\/Classic-Tetris.mp3',\r\n                Jazz: 'https:\/\/fahrtauglich.ch\/wp-content\/uploads\/2024\/10\/Jazz-Tetris.mp3',\r\n                Rock: 'https:\/\/fahrtauglich.ch\/wp-content\/uploads\/2024\/10\/Rock-Tetris.mp3'\r\n            };\r\n\r\n            const GameState = {\r\n                STOPPED: 'stopped',\r\n                RUNNING: 'running',\r\n                PAUSED: 'paused'\r\n            };\r\n            let gameState = GameState.STOPPED;\r\n            let isSoundOn = true;\r\n            let rAF = null;\r\n            let gameOver = false;\r\n            const grid = 30;\r\n            const tetrominoSequence = [];\r\n\r\n            \/\/ Playfield konfigurieren\r\n            const playfield = [];\r\n            for (let row = -2; row < 20; row++) {\r\n                playfield[row] = [];\r\n                for (let col = 0; col < 10; col++) {\r\n                    playfield[row][col] = 0;\r\n                }\r\n            }\r\n\r\n            \/\/ Tetromino Konfigurationen\r\n            const tetrominos = {\r\n                'I': [\r\n                    [0, 0, 0, 0],\r\n                    [1, 1, 1, 1],\r\n                    [0, 0, 0, 0],\r\n                    [0, 0, 0, 0]\r\n                ],\r\n                'J': [\r\n                    [1, 0, 0],\r\n                    [1, 1, 1],\r\n                    [0, 0, 0],\r\n                ],\r\n                'L': [\r\n                    [0, 0, 1],\r\n                    [1, 1, 1],\r\n                    [0, 0, 0],\r\n                ],\r\n                'O': [\r\n                    [1, 1],\r\n                    [1, 1],\r\n                ],\r\n                'S': [\r\n                    [0, 1, 1],\r\n                    [1, 1, 0],\r\n                    [0, 0, 0],\r\n                ],\r\n                'Z': [\r\n                    [1, 1, 0],\r\n                    [0, 1, 1],\r\n                    [0, 0, 0],\r\n                ],\r\n                'T': [\r\n                    [0, 1, 0],\r\n                    [1, 1, 1],\r\n                    [0, 0, 0],\r\n                ]\r\n            };\r\n\r\n            const colors = {\r\n                'I': 'cyan',\r\n                'O': 'yellow',\r\n                'T': 'purple',\r\n                'S': 'green',\r\n                'Z': 'red',\r\n                'J': 'blue',\r\n                'L': 'orange'\r\n            };\r\n\r\n            let count = 0;\r\n            let tetromino = null;\r\n            let nextTetromino = null;\r\n            let points = 0;\r\n            let lines = 0;\r\n            let level = parseInt(levelSlider.value, 10);\r\n            let dropInterval = 1000 - (level - 1) * 100;\r\n            let lastTime = 0;\r\n\r\n            \/\/ Musik laden (Standard: Classic)\r\n            audio.src = musicFiles.Classic;\r\n            audio.loop = true;\r\n            audio.volume = 0.5;\r\n            if (isSoundOn) {\r\n                audio.play().catch(error => {\r\n                    console.warn('Autoplay prevented:', error);\r\n                });\r\n            }\r\n\r\n            toggleSoundBtn.addEventListener('click', () => {\r\n                isSoundOn = !isSoundOn;\r\n                if (isSoundOn && gameState === GameState.RUNNING) {\r\n                    audio.play().catch(error => {\r\n                        console.warn('Autoplay prevented:', error);\r\n                    });\r\n                } else {\r\n                    audio.pause();\r\n                }\r\n            });\r\n\r\n            musicSelect.addEventListener('change', (e) => {\r\n                audio.src = musicFiles[e.target.value];\r\n                if (isSoundOn && gameState === GameState.RUNNING) {\r\n                    audio.play().catch(error => {\r\n                        console.warn('Autoplay prevented:', error);\r\n                    });\r\n                }\r\n            });\r\n\r\n            previewCheckbox.addEventListener('change', (e) => {\r\n                if (e.target.checked) {\r\n                    previewContainer.classList.add('visible');\r\n                    drawPreview();\r\n                } else {\r\n                    previewContainer.classList.remove('visible');\r\n                }\r\n            });\r\n\r\n            startPauseBtn.addEventListener('click', () => {\r\n                if (gameState === GameState.STOPPED) {\r\n                    resetGame();\r\n                    startGame();\r\n                    gameState = GameState.RUNNING;\r\n                    startPauseBtn.textContent = 'Pause';\r\n                } else if (gameState === GameState.RUNNING) {\r\n                    gameState = GameState.PAUSED;\r\n                    cancelAnimationFrame(rAF);\r\n                    startPauseBtn.textContent = 'Weiter';\r\n                    audio.pause();\r\n                } else if (gameState === GameState.PAUSED) {\r\n                    gameState = GameState.RUNNING;\r\n                    startPauseBtn.textContent = 'Pause';\r\n                    lastTime = performance.now();\r\n                    if (isSoundOn) {\r\n                        audio.play().catch(error => {\r\n                            console.warn('Autoplay prevented:', error);\r\n                        });\r\n                    }\r\n                    rAF = requestAnimationFrame(loop);\r\n                }\r\n            });\r\n\r\n            newGameBtn.addEventListener('click', () => {\r\n                resetGame();\r\n                startGame();\r\n                gameState = GameState.RUNNING;\r\n                startPauseBtn.textContent = 'Pause';\r\n            });\r\n\r\n            function startGame() {\r\n                gameOver = false;\r\n                lastTime = 0;\r\n                if (isSoundOn && gameState !== GameState.PAUSED) {\r\n                    audio.play().catch(error => {\r\n                        console.warn('Autoplay prevented:', error);\r\n                    });\r\n                }\r\n                rAF = requestAnimationFrame(loop);\r\n            }\r\n\r\n            function resetGame() {\r\n                points = 0;\r\n                lines = 0;\r\n                level = parseInt(levelSlider.value, 10);\r\n                dropInterval = 1000 - (level - 1) * 100;\r\n                pointsElement.textContent = points;\r\n                linesElement.textContent = lines;\r\n                levelElement.textContent = level;\r\n                playfield.forEach(row => row.fill(0));\r\n                tetrominoSequence.length = 0;\r\n                tetromino = getNextTetromino();\r\n                nextTetromino = getNextTetromino();\r\n                lastTime = 0;\r\n                gameOver = false;\r\n                if (isSoundOn) {\r\n                    audio.currentTime = 0;\r\n                    audio.play().catch(error => {\r\n                        console.warn('Autoplay prevented:', error);\r\n                    });\r\n                }\r\n                if (previewCheckbox.checked) {\r\n                    drawPreview();\r\n                }\r\n            }\r\n\r\n            function generateSequence() {\r\n                const sequence = ['I', 'J', 'L', 'O', 'S', 'T', 'Z'];\r\n                while (sequence.length) {\r\n                    const rand = Math.floor(Math.random() * sequence.length);\r\n                    const name = sequence.splice(rand, 1)[0];\r\n                    tetrominoSequence.push(name);\r\n                }\r\n            }\r\n\r\n            function getNextTetromino() {\r\n                if (tetrominoSequence.length === 0) {\r\n                    generateSequence();\r\n                }\r\n                const name = tetrominoSequence.pop();\r\n                const matrix = tetrominos[name];\r\n                const col = Math.floor(playfield[0].length \/ 2 - Math.ceil(matrix[0].length \/ 2));\r\n                const row = name === 'I' ? -1 : -2;\r\n                return { name, matrix, row, col };\r\n            }\r\n\r\n            function rotate(matrix) {\r\n                const N = matrix.length;\r\n                const result = [];\r\n                for (let i = 0; i < N; i++) {\r\n                    result[i] = [];\r\n                    for (let j = 0; j < N; j++) {\r\n                        result[i][j] = matrix[N - j - 1][i];\r\n                    }\r\n                }\r\n                return result;\r\n            }\r\n\r\n            function loop(time = 0) {\r\n                if (gameOver || gameState !== GameState.RUNNING) return;\r\n                const deltaTime = time - lastTime;\r\n                lastTime = time;\r\n                rAF = requestAnimationFrame(loop);\r\n                context.clearRect(0, 0, canvas.width, canvas.height);\r\n                context.strokeStyle = '#e0e0e0';\r\n                for (let x = 0; x <= canvas.width; x += grid) {\r\n                    context.beginPath();\r\n                    context.moveTo(x, 0);\r\n                    context.lineTo(x, canvas.height);\r\n                    context.stroke();\r\n                }\r\n                for (let y = 0; y <= canvas.height; y += grid) {\r\n                    context.beginPath();\r\n                    context.moveTo(0, y);\r\n                    context.lineTo(canvas.width, y);\r\n                    context.stroke();\r\n                }\r\n                count += deltaTime;\r\n                if (count > dropInterval) {\r\n                    count = 0;\r\n                    if (!moveTetromino(1, 0)) {\r\n                        placeTetromino();\r\n                    }\r\n                }\r\n                for (let row = 0; row < 20; row++) {\r\n                    for (let col = 0; col < 10; col++) {\r\n                        if (playfield[row][col]) {\r\n                            const name = playfield[row][col];\r\n                            context.fillStyle = colors[name];\r\n                            context.fillRect(col * grid, row * grid, grid - 1, grid - 1);\r\n                        }\r\n                    }\r\n                }\r\n                if (tetromino) {\r\n                    context.fillStyle = colors[tetromino.name];\r\n                    for (let row = 0; row < tetromino.matrix.length; row++) {\r\n                        for (let col = 0; col < tetromino.matrix[row].length; col++) {\r\n                            if (tetromino.matrix[row][col]) {\r\n                                context.fillRect((tetromino.col + col) * grid, (tetromino.row + row) * grid, grid - 1, grid - 1);\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            function moveTetromino(deltaRow, deltaCol) {\r\n                const newRow = tetromino.row + deltaRow;\r\n                const newCol = tetromino.col + deltaCol;\r\n                if (isValidMove(tetromino.matrix, newRow, newCol)) {\r\n                    tetromino.row = newRow;\r\n                    tetromino.col = newCol;\r\n                    return true;\r\n                }\r\n                return false;\r\n            }\r\n\r\n            function isValidMove(matrix, cellRow, cellCol) {\r\n                for (let row = 0; row < matrix.length; row++) {\r\n                    for (let col = 0; col < matrix[row].length; col++) {\r\n                        if (matrix[row][col]) {\r\n                            let x = cellCol + col;\r\n                            let y = cellRow + row;\r\n                            if (x < 0 || x >= playfield[0].length || y >= playfield.length || playfield[y][x]) {\r\n                                return false;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n                return true;\r\n            }\r\n\r\n            function placeTetromino() {\r\n                for (let row = 0; row < tetromino.matrix.length; row++) {\r\n                    for (let col = 0; col < tetromino.matrix[row].length; col++) {\r\n                        if (tetromino.matrix[row][col]) {\r\n                            if (tetromino.row + row < 0) {\r\n                                return showGameOver();\r\n                            }\r\n                            playfield[tetromino.row + row][tetromino.col + col] = tetromino.name;\r\n                        }\r\n                    }\r\n                }\r\n                checkLines();\r\n                tetromino = nextTetromino;\r\n                nextTetromino = getNextTetromino();\r\n                if (previewCheckbox.checked) {\r\n                    drawPreview();\r\n                }\r\n            }\r\n\r\n            function checkLines() {\r\n                let linesCleared = 0;\r\n                for (let row = playfield.length - 1; row >= 0; row--) {\r\n                    let isLineFull = true;\r\n                    for (let col = 0; col < playfield[row].length; col++) {\r\n                        if (!playfield[row][col]) {\r\n                            isLineFull = false;\r\n                            break;\r\n                        }\r\n                    }\r\n                    if (isLineFull) {\r\n                        linesCleared++;\r\n                        for (let r = row; r > 0; r--) {\r\n                            for (let c = 0; c < playfield[r].length; c++) {\r\n                                playfield[r][c] = playfield[r - 1][c];\r\n                            }\r\n                        }\r\n                        for (let c = 0; c < playfield[0].length; c++) {\r\n                            playfield[0][c] = 0;\r\n                        }\r\n                        row++;\r\n                    }\r\n                }\r\n                if (linesCleared > 0) {\r\n                    lines += linesCleared;\r\n                    points += calculatePoints(linesCleared);\r\n                    linesElement.textContent = lines;\r\n                    pointsElement.textContent = points;\r\n                    if (lines >= level * 10) {\r\n                        level++;\r\n                        levelElement.textContent = level;\r\n                        dropInterval = Math.max(100, dropInterval - 100);\r\n                    }\r\n                }\r\n            }\r\n\r\n            function calculatePoints(linesCleared) {\r\n                const linePoints = [0, 40, 100, 300, 1200];\r\n                return linePoints[linesCleared] * level;\r\n            }\r\n\r\n            function showGameOver() {\r\n                cancelAnimationFrame(rAF);\r\n                gameState = GameState.STOPPED;\r\n                audio.pause();\r\n                context.fillStyle = 'black';\r\n                context.globalAlpha = 0.75;\r\n                context.fillRect(0, canvas.height \/ 2 - 30, canvas.width, 60);\r\n                context.globalAlpha = 1;\r\n                context.fillStyle = 'white';\r\n                context.font = '36px monospace';\r\n                context.textAlign = 'center';\r\n                context.textBaseline = 'middle';\r\n                context.fillText('GAME OVER!', canvas.width \/ 2, canvas.height \/ 2);\r\n                startPauseBtn.textContent = 'Start';\r\n            }\r\n\r\n            function drawPreview() {\r\n                previewContext.clearRect(0, 0, previewCanvas.width, previewCanvas.height);\r\n                const matrix = nextTetromino.matrix;\r\n                const name = nextTetromino.name;\r\n                const blockSize = 20;\r\n                const offsetX = (previewCanvas.width - matrix[0].length * blockSize) \/ 2;\r\n                const offsetY = (previewCanvas.height - matrix.length * blockSize) \/ 2;\r\n                previewContext.fillStyle = colors[name];\r\n                for (let row = 0; row < matrix.length; row++) {\r\n                    for (let col = 0; col < matrix[row].length; col++) {\r\n                        if (matrix[row][col]) {\r\n                            previewContext.fillRect(offsetX + col * blockSize, offsetY + row * blockSize, blockSize - 1, blockSize - 1);\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            document.addEventListener('keydown', function(e) {\r\n                if (gameOver || gameState !== GameState.RUNNING) return;\r\n                const key = e.keyCode;\r\n                if ([37, 38, 39, 40, 32].includes(key)) {\r\n                    e.preventDefault();\r\n                }\r\n                if (key === 37) {\r\n                    moveTetromino(0, -1);\r\n                } else if (key === 39) {\r\n                    moveTetromino(0, 1);\r\n                } else if (key === 38) {\r\n                    const rotatedMatrix = rotate(tetromino.matrix);\r\n                    if (isValidMove(rotatedMatrix, tetromino.row, tetromino.col)) {\r\n                        tetromino.matrix = rotatedMatrix;\r\n                    }\r\n                } else if (key === 40) {\r\n                    moveTetromino(1, 0);\r\n                } else if (key === 32) {\r\n                    while (moveTetromino(1, 0)) {}\r\n                    placeTetromino();\r\n                }\r\n            });\r\n\r\n            \/* Mobile Steuerungstasten *\/\r\n            document.getElementById(\"move-left\").addEventListener(\"click\", () => {\r\n                if (gameOver || gameState !== GameState.RUNNING) return;\r\n                moveTetromino(0, -1);\r\n            });\r\n            document.getElementById(\"move-right\").addEventListener(\"click\", () => {\r\n                if (gameOver || gameState !== GameState.RUNNING) return;\r\n                moveTetromino(0, 1);\r\n            });\r\n            document.getElementById(\"rotate\").addEventListener(\"click\", () => {\r\n                if (gameOver || gameState !== GameState.RUNNING) return;\r\n                const rotatedMatrix = rotate(tetromino.matrix);\r\n                if (isValidMove(rotatedMatrix, tetromino.row, tetromino.col)) {\r\n                    tetromino.matrix = rotatedMatrix;\r\n                }\r\n            });\r\n            document.getElementById(\"hard-drop\").addEventListener(\"click\", () => {\r\n                if (gameOver || gameState !== GameState.RUNNING) return;\r\n                while (moveTetromino(1, 0)) {}\r\n                placeTetromino();\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-15d8543 e-flex e-con-boxed e-con e-parent\" data-id=\"15d8543\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-853f238 elementor-widget elementor-widget-heading\" data-id=\"853f238\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Steuerung<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b25a831 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"b25a831\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Die Steuerung des Tetris-Spiels erfolgt \u00fcber die Tastatur:<\/p><ul><li><strong>Pfeiltaste links (\u2190):<\/strong> Bewegt den fallenden Block nach links.<\/li><li><strong>Pfeiltaste rechts (\u2192):<\/strong> Bewegt den fallenden Block nach rechts.<\/li><li><strong>Pfeiltaste oben (\u2191):<\/strong> Dreht den fallenden Block um 90 Grad im Uhrzeigersinn.<\/li><li><strong>Pfeiltaste unten (\u2193):<\/strong> Beschleunigt den Fall des Blocks (Soft Drop).<\/li><li><strong>Leertaste (Space):<\/strong> L\u00e4sst den Block sofort bis zum unteren Rand fallen (Hard Drop).<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1109a8b e-flex e-con-boxed e-con e-parent\" data-id=\"1109a8b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1deb21a elementor-widget elementor-widget-heading\" data-id=\"1deb21a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Ziele<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09ae19c elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"09ae19c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Das Ziel des Spiels ist es, fallende Bl\u00f6cke (Tetrominos) so anzuordnen, dass sie vollst\u00e4ndige horizontale Linien ohne L\u00fccken bilden. Sobald eine Linie vollst\u00e4ndig gef\u00fcllt ist, verschwindet sie, und der Spieler erh\u00e4lt Punkte. Je mehr Linien gleichzeitig gel\u00f6scht werden, desto h\u00f6her ist die erzielte Punktzahl:<\/p><ul><li><strong>1 Linie:<\/strong> 40 Punkte<\/li><li><strong>2 Linien:<\/strong> 100 Punkte<\/li><li><strong>3 Linien:<\/strong> 300 Punkte<\/li><li><strong>4 Linien (Tetris):<\/strong> 1200 Punkte<\/li><\/ul><p>Mit jeder gel\u00f6schten Linie n\u00e4hert sich der Spieler dem n\u00e4chsten Level. Bei Erreichen einer bestimmten Anzahl von Linien steigt das Level an, was die Fallgeschwindigkeit der Bl\u00f6cke erh\u00f6ht und die Herausforderung steigert.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-267253c e-flex e-con-boxed e-con e-parent\" data-id=\"267253c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-91e9221 elementor-widget elementor-widget-heading\" data-id=\"91e9221\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Nutzen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6823ebb elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"6823ebb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Tetris f\u00f6rdert verschiedene kognitive F\u00e4higkeiten und bietet zahlreiche Vorteile:<\/p><ul><li><strong>R\u00e4umliches Denken:<\/strong> Das Erkennen von Mustern und das strategische Platzieren der Bl\u00f6cke verbessern das visuell-r\u00e4umliche Vorstellungsverm\u00f6gen.<\/li><li><strong>Probleml\u00f6sungsf\u00e4higkeiten:<\/strong> Spieler m\u00fcssen schnell Entscheidungen treffen und optimale L\u00f6sungen f\u00fcr die Platzierung finden.<\/li><li><strong>Aufmerksamkeit und Konzentration:<\/strong> Das Spiel erfordert kontinuierliche Aufmerksamkeit, um auf die schnell fallenden Bl\u00f6cke zu reagieren.<\/li><li><strong>Reaktionsf\u00e4higkeit:<\/strong> Mit zunehmender Geschwindigkeit werden schnelle Reflexe und eine gute Hand-Auge-Koordination trainiert.<\/li><li><strong>Stressabbau:<\/strong> Das Eintauchen in das Spiel kann zur Entspannung beitragen und Stress reduzieren.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-278c59e e-flex e-con-boxed e-con e-parent\" data-id=\"278c59e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-034e3f3 elementor-widget elementor-widget-heading\" data-id=\"034e3f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Geschichte<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d201ede elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"d201ede\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Tetris wurde 1984 vom russischen Softwareentwickler Alexei Paschitnow am Moskauer Dorodnitsyn Computerzentrum entwickelt. Inspiriert von einem traditionellen Puzzlespiel namens Pentomino, schuf Paschitnow ein Spiel, bei dem Bl\u00f6cke unterschiedlicher Formen in einer vertikalen Spielfl\u00e4che gestapelt werden m\u00fcssen.<\/p><p>Der Name &#8222;Tetris&#8220; ist eine Kombination aus dem griechischen Wort &#8222;Tetra&#8220; (bedeutet vier, da alle Spielsteine aus vier Segmenten bestehen) und &#8222;Tennis&#8220;, Paschitnows Lieblingssportart. Das Spiel erlangte schnell Popularit\u00e4t in der Sowjetunion und verbreitete sich anschlie\u00dfend weltweit.<\/p><p>Mit der Ver\u00f6ffentlichung auf dem Nintendo Game Boy im Jahr 1989 erreichte Tetris internationalen Ruhm und wurde zu einem der meistverkauften und einflussreichsten Videospiele aller Zeiten. Bis heute begeistert Tetris Millionen von Spielern und ist ein fester Bestandteil der Videospielgeschichte.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Erleben Sie Tetris: Das beliebte Spiel zur F\u00f6rderung von Konzentration und r\u00e4umlichem Denken.<\/p>","protected":false},"author":1,"featured_media":0,"parent":1467,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","iawp_total_views":8823,"footnotes":""},"class_list":["post-3635","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tetris: Spielen Sie den Spieleklassiker gratis<\/title>\n<meta name=\"description\" content=\"Tetris kostenlos online: Das Klassikerspiel trainiert Konzentration und r\u00e4umliches Denken - f\u00fcr Mobile und Desktop.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/tetris\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tetris: Spielen Sie den Spieleklassiker gratis\" \/>\n<meta property=\"og:description\" content=\"Tetris kostenlos online: Das Klassikerspiel trainiert Konzentration und r\u00e4umliches Denken - f\u00fcr Mobile und Desktop.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/tetris\/\" \/>\n<meta property=\"og:site_name\" content=\"Fahrtauglich\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-06T15:59:49+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/tetris\\\/\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/tetris\\\/\",\"name\":\"Tetris: Spielen Sie den Spieleklassiker gratis\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#website\"},\"datePublished\":\"2024-10-15T15:29:06+00:00\",\"dateModified\":\"2025-02-06T15:59:49+00:00\",\"description\":\"Tetris kostenlos online: Das Klassikerspiel trainiert Konzentration und r\u00e4umliches Denken - f\u00fcr Mobile und Desktop.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/tetris\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/tetris\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/tetris\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/fahrtauglich.ch\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Praxisportal\",\"item\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tetris\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#website\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/\",\"name\":\"Fahrtauglich\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fahrtauglich.ch\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#organization\",\"name\":\"Fahrtauglich\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/cropped-Logo-2.jpg\",\"contentUrl\":\"https:\\\/\\\/fahrtauglich.ch\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/cropped-Logo-2.jpg\",\"width\":307,\"height\":188,\"caption\":\"Fahrtauglich\"},\"image\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tetris: Spielen Sie den Spieleklassiker gratis","description":"Tetris kostenlos online: Das Klassikerspiel trainiert Konzentration und r\u00e4umliches Denken - f\u00fcr Mobile und Desktop.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/tetris\/","og_locale":"fr_FR","og_type":"article","og_title":"Tetris: Spielen Sie den Spieleklassiker gratis","og_description":"Tetris kostenlos online: Das Klassikerspiel trainiert Konzentration und r\u00e4umliches Denken - f\u00fcr Mobile und Desktop.","og_url":"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/tetris\/","og_site_name":"Fahrtauglich","article_modified_time":"2025-02-06T15:59:49+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fahrtauglich.ch\/praxisportal\/tetris\/","url":"https:\/\/fahrtauglich.ch\/praxisportal\/tetris\/","name":"Tetris: Spielen Sie den Spieleklassiker gratis","isPartOf":{"@id":"https:\/\/fahrtauglich.ch\/#website"},"datePublished":"2024-10-15T15:29:06+00:00","dateModified":"2025-02-06T15:59:49+00:00","description":"Tetris kostenlos online: Das Klassikerspiel trainiert Konzentration und r\u00e4umliches Denken - f\u00fcr Mobile und Desktop.","breadcrumb":{"@id":"https:\/\/fahrtauglich.ch\/praxisportal\/tetris\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fahrtauglich.ch\/praxisportal\/tetris\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fahrtauglich.ch\/praxisportal\/tetris\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/fahrtauglich.ch\/"},{"@type":"ListItem","position":2,"name":"Praxisportal","item":"https:\/\/fahrtauglich.ch\/praxisportal\/"},{"@type":"ListItem","position":3,"name":"Tetris"}]},{"@type":"WebSite","@id":"https:\/\/fahrtauglich.ch\/#website","url":"https:\/\/fahrtauglich.ch\/","name":"Fahrtauglich","description":"","publisher":{"@id":"https:\/\/fahrtauglich.ch\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fahrtauglich.ch\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/fahrtauglich.ch\/#organization","name":"Fahrtauglich","url":"https:\/\/fahrtauglich.ch\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/fahrtauglich.ch\/#\/schema\/logo\/image\/","url":"https:\/\/fahrtauglich.ch\/wp-content\/uploads\/2024\/08\/cropped-Logo-2.jpg","contentUrl":"https:\/\/fahrtauglich.ch\/wp-content\/uploads\/2024\/08\/cropped-Logo-2.jpg","width":307,"height":188,"caption":"Fahrtauglich"},"image":{"@id":"https:\/\/fahrtauglich.ch\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"fahrtauglich.ch","author_link":"https:\/\/fahrtauglich.ch\/fr\/blog\/author\/mintcream-quetzal-259960-hostingersite-com\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Erleben Sie Tetris: Das beliebte Spiel zur F\u00f6rderung von Konzentration und r\u00e4umlichem Denken.","_links":{"self":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/3635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/comments?post=3635"}],"version-history":[{"count":86,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/3635\/revisions"}],"predecessor-version":[{"id":5790,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/3635\/revisions\/5790"}],"up":[{"embeddable":true,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/1467"}],"wp:attachment":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/media?parent=3635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}