2d action game. You are a blue cube . Your goal is to eat all the black cubes. The more black cubes you eat the bigger and faster you get. The max size is 100. After you eat all the cubes you win. To eat the black cubes jest go next to them. Controls. There are red cubes that if you touch them you lose.'s game

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

No:11260

←

Prev Next

→

2d action game. You are a blue cube . Your goal is..ALL
Developer No｜Date and time 23/8/9 5:48:42
Build time 34.993 sec｜Game capacity 5.39KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>2D Action Game</title>
    <style>
        #game-container {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        
        .cube {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 5px;
        }

#player {
            background-color: blue;
        }

.black-cube {
            background-color: black;
        }

.red-cube {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player" class="cube"></div>
        <div class="black-cube cube"></div>
        <div class="black-cube cube"></div>
        <div class="red-cube cube"></div>
        <div class="black-cube cube"></div>
    </div>

var playerSize = 20; // initial size of the player
            var playerSpeed = 1; // initial speed of the player
            var maxPlayerSize = 100;
            
            var gameContainer = document.getElementById("game-container");
            var containerWidth = gameContainer.offsetWidth;
            var containerHeight = gameContainer.offsetHeight;

var playerX = containerWidth / 2 - playerSize / 2;
            var playerY = containerHeight / 2 - playerSize / 2;
            player.style.left = playerX + "px";
            player.style.top = playerY + "px";

function checkCollision() {
                blackCubes.forEach(function(blackCube, index) {
                    if (isCollision(player, blackCube)) {
                        blackCube.classList.add("hidden");
                        blackCubes.splice(index, 1);
                        playerSize += 5; // increase player size
                        playerSpeed += 0.2; // increase player speed

if (playerSize > maxPlayerSize) {
                            alert("Congratulations! You have eaten all the cubes and won the game!");
                            resetGame();
                        }
                    }
                });

redCubes.forEach(function(redCube) {
                    if (isCollision(player, redCube)) {
                        alert("Game Over! You hit a red cube.");
                        resetGame();
                    }
                });
            }

function isCollision(elem1, elem2) {
                var rect1 = elem1.getBoundingClientRect();
                var rect2 = elem2.getBoundingClientRect();

var overlapX =
                    Math.max(0, Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left));
                var overlapY =
                    Math.max(0, Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top));

if (overlapX * overlapY > 0) {
                    return true; // collision detected
                }
                
                return false;
            }

function movePlayer(event) {
                var keyCode = event.keyCode || event.which;
                switch (keyCode) {
                    case 38: // up arrow key
                        playerY -= playerSpeed;
                        break;
                    case 40: // down arrow key
                        playerY += playerSpeed;
                        break;
                    case 37: // left arrow key
                        playerX -= playerSpeed;
                        break;
                    case 39: // right arrow key
                        playerX += playerSpeed;
                        break;
                }

// keep the player inside the game container
                if (playerX < 0) {
                    playerX = 0;
                }
                if (playerX + playerSize > containerWidth) {
                    playerX = containerWidth - playerSize;
                }
                if (playerY < 0) {
                    playerY = 0;
                }
                if (playerY + playerSize > containerHeight) {
                    playerY = containerHeight - playerSize;
                }

player.style.left = playerX + "px";
                player.style.top = playerY + "px";

checkCollision();
            }

function resetGame() {
                // Reset player size and speed
                playerSize = 20;
                playerSpeed = 1;

// Show all black cubes
                blackCubes.forEach(function(blackCube) {
                    blackCube.classList.remove("hidden");
                });

// Reset player position
                playerX = containerWidth / 2 - playerSize / 2;
                playerY = containerHeight / 2 - playerSize / 2;
                player.style.left = playerX + "px";
                player.style.top = playerY + "px";
            }

document.addEventListener("keydown", movePlayer);
        });
    </script>
</body>
</html>