A Tetris with enemies's game

Click here for free DL of the app version that can save data.

No:10725

150

←

Prev Next

→

A Tetris with enemies
Developer User3408｜Date and time 23/8/2 9:39:50
Build time 62.283 sec｜Game capacity 9.496KB｜

Script

Puntaje: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Tetris con Enemigos</title>
    <style>
        canvas {
            border: 1px solid #000;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="240" height="400"></canvas>

// Definición de las Pictogramas
        var player = {
            x: tetrisWidth / 2 - 2,
            y: tetrisHeight - 2,
            shape: [
                [1, 1, 1, 1]
            ],
            color: "blue"
        };

var enemies = [
            {
                x: 0,
                y: 0,
                shape: [
                    [1, 1],
                    [1, 1]
                ],
                color: "red"
            },
            {
                x: tetrisWidth - 2,
                y: 0,
                shape: [
                    [1, 1],
                    [1, 1]
                ],
                color: "red"
            }
        ];

// Función de Dibujo del Juego
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBlock(player.x, player.y, player.shape, player.color);
            enemies.forEach(function (enemy) {
                drawBlock(enemy.x, enemy.y, enemy.shape, enemy.color);
            });
        }

// Función de Dibujo de un Bloque
        function drawBlock(x, y, shape, color) {
            shape.forEach(function (row, rowIndex) {
                row.forEach(function (col, colIndex) {
                    if (shape[rowIndex][colIndex]) {
                        var blockX = x + colIndex;
                        var blockY = y + rowIndex;

ctx.fillStyle = color;
                        ctx.fillRect(blockX * blockSize, blockY * blockSize, blockSize, blockSize);
                        ctx.strokeStyle = "black";
                        ctx.strokeRect(blockX * blockSize, blockY * blockSize, blockSize, blockSize);
                    }
                });
            });
        }

// Función para Mover el Jugador
        function movePlayer(direction) {
            var newX = player.x + direction;

if (!collisionsCheck(player.shape, newX, player.y)) {
                player.x = newX;
            }
        }

// Función para Rotar el Jugador
        function rotatePlayer() {
            var rotatedShape = transpose(player.shape);
            player.shape = reverseRows(rotatedShape);

if (collisionsCheck(player.shape, player.x, player.y)) {
                player.shape = rotateBack(player.shape);
            }
        }

// Función para Transponer una Forma
        function transpose(matrix) {
            return matrix[0].map(function (_, c) { return matrix.map(function (r) { return r[c]; }); });
        }

// Función para Invertir las Filas de una Forma
        function reverseRows(matrix) {
            return matrix.map(function (row) { return row.reverse(); });
        }

// Función para Volver a la Forma Original luego de la Rotación
        function rotateBack(matrix) {
            return matrix.reverse();
        }

// Función para Verificar Colisiones
        function collisionsCheck(shape, x, y) {
            for (var rowIndex = 0; rowIndex < shape.length; rowIndex++) {
                for (var colIndex = 0; colIndex < shape[rowIndex].length; colIndex++) {
                    if (!shape[rowIndex][colIndex]) {
                        continue;
                    }

var occupiedX = x + colIndex;
                    var occupiedY = y + rowIndex;

if (occupiedX < 0 || occupiedX >= tetrisWidth || occupiedY >= tetrisHeight || checkCollision(occupiedX, occupiedY)) {
                        return true;
                    }
                }
            }

return false;
        }

// Función para Verificar Colisión con Enemigos
        function checkCollision(x, y) {
            return enemies.some(function (enemy) {
                for (var rowIndex = 0; rowIndex < enemy.shape.length; rowIndex++) {
                    for (var colIndex = 0; colIndex < enemy.shape[rowIndex].length; colIndex++) {
                        if (!enemy.shape[rowIndex][colIndex]) {
                            continue;
                        }

var enemyX = enemy.x + colIndex;
                        var enemyY = enemy.y + rowIndex;

if (x === enemyX && y === enemyY) {
                            gameOver = true;
                            return true;
                        }
                    }
                }

return false;
            });
        }

// Función para Mover los Enemigos
        function moveEnemies() {
            enemies.forEach(function (enemy) {
                enemy.y++;

if (collisionsCheck(enemy.shape, enemy.x, enemy.y)) {
                    gameOver = true;
                }
            });
        }

// Función para Eliminar Filas Completas
        function removeFullRows() {
            for (var row = tetrisHeight - 1; row >= 0; row--) {
                if (checkRowFull(row)) {
                    score += 10;
                    updateScore();

for (var i = row; i > 0; i--) {
                        for (var j = 0; j < tetrisWidth; j++) {
                            for (var enemyIndex = 0; enemyIndex < enemies.length; enemyIndex++) {
                                if (enemies[enemyIndex].y === i && enemies[enemyIndex].x === j) {
                                    enemies[enemyIndex].y++;
                                }
                            }
                        }

for (var enemyIndex = 0; enemyIndex < enemies.length; enemyIndex++) {
                            if (enemies[enemyIndex].shape.every(function (row) { return row.includes(0); })) {
                                enemies.splice(enemyIndex, 1);
                            }
                        }
                    }
                }
            }
        }

// Función para Verificar si una Fila está Completa
        function checkRowFull(row) {
            for (var j = 0; j < tetrisWidth; j++) {
                if (enemies.some(function (enemy) { return enemy.y === row && enemy.x === j; }) || player.y === row && player.x === j) {
                    continue;
                }

return false;
            }

return true;
        }

// Función para Actualizar el Puntaje
        function updateScore() {
            document.getElementById("score").innerHTML = "Puntaje: " + score;
        }

// Funciones de Control del Juego
        function onStartGame() {
            if (gameOver) {
                document.location.reload();
            }

interval = setInterval(updateGame, 200);
            document.getElementById("startBtn").style.display = "none";
        }

// Función de Actualización del Juego (Loop Principal)
        function updateGame() {
            if (!gameOver) {
                removeFullRows();

if (!collisionsCheck(player.shape, player.x, player.y + 1)) {
                    player.y++;
                } else {
                    player.shape.forEach(function (row, rowIndex) {
                        row.forEach(function (col, colIndex) {
                            if (row[colIndex]) {
                                var occupiedX = player.x + colIndex;
                                var occupiedY = player.y + rowIndex;

enemies.push({ x: occupiedX, y: occupiedY, color: player.color, shape: [[1]] });
                            }
                        });
                    });

player.y = tetrisHeight - 2;

if (collisionsCheck(player.shape, player.x, player.y)) {
                        gameOver = true;
                    }
                }

moveEnemies();
                draw();
            } else {
                clearInterval(interval);
                var message = "Juego Terminado. Puntaje Final: " + score;
                alert(message);
            }
        }

// Event Listeners
        document.addEventListener("keydown", onKeyPress);
    </script>

<button id="startBtn" onclick="onStartGame()">Comenzar Juego</button>
    <h4 id="score">Puntaje: 0</h4>
</body>
</html>