A game where you move around in to collect cubes to add 1 more point to the scoreboard's game

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

No:22531

←

Prev Next

→

A game where you move around in to collect cubes t..ALL
Developer User10392｜Date and time 23/10/23 2:17:38
Build time 65.548 sec｜Game capacity 4.275KB｜

Script

Sure! Here's a simple game where you can move around and collect cubes to increase your score:

Score: 0

To play the game, save the above code into a ".html" file and open it in a web browser, preferably on a smartphone. The game board is represented by a square with a blue circle representing the player. Red cubes will appear randomly inside the square, and you can move the player using the arrow keys to collect the cubes and increase your score. The score is displayed at the top of the game board. Note: This is a basic implementation, and you can customize it further according to your preferences, such as adding levels, time limits, or other enhancements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Here's a simple game where you can move around and collect cubes to increase your score:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Cube Collector Game</title>
    <style>
        #game-board {
            position: relative;
            width: 250px;
            height: 250px;
            border: 1px solid black;
        }

.cube {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 5px;
        }

#player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: blue;
            border-radius: 50%;
        }

#score {
            text-align: center;
            font-size: 24px;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<div id="game-board">
    <div id="player" class="cube"></div>
    <div id="score">Score: 0</div>
</div>

// Game variables
    var score = 0;
    var playerSpeed = 10;
    var cubes = [];

// Initialize game state
    function init() {
        // Create cubes
        for (var i = 0; i < 10; i++) {
            createCube();
        }

// Event listeners
        document.addEventListener('keydown', movePlayer);
        setInterval(checkCollision, 100);
    }

// Create a cube at a random position
    function createCube() {
        var cube = document.createElement('div');
        cube.className = 'cube';
        cube.style.left = Math.floor(Math.random() * 200) + 'px';
        cube.style.top = Math.floor(Math.random() * 200) + 'px';
        document.getElementById('game-board').appendChild(cube);
        cubes.push(cube);
    }

// Move the player based on key press
    function movePlayer(event) {
        var player = document.getElementById('player');
        var playerPos = player.getBoundingClientRect();
        var gameBoard = document.getElementById('game-board');
        var gameBoardPos = gameBoard.getBoundingClientRect();

// Check boundaries before moving
        if (event.key === 'ArrowUp' && playerPos.top > gameBoardPos.top) {
            player.style.top = (playerPos.top - playerSpeed) + 'px';
        } else if (event.key === 'ArrowDown' && playerPos.bottom < gameBoardPos.bottom) {
            player.style.top = (playerPos.top + playerSpeed) + 'px';
        } else if (event.key === 'ArrowLeft' && playerPos.left > gameBoardPos.left) {
            player.style.left = (playerPos.left - playerSpeed) + 'px';
        } else if (event.key === 'ArrowRight' && playerPos.right < gameBoardPos.right) {
            player.style.left = (playerPos.left + playerSpeed) + 'px';
        }
    }

// Check for collision between player and cubes
    function checkCollision() {
        var player = document.getElementById('player');
        var playerPos = player.getBoundingClientRect();

// Loop through cubes to check collision
        for (var i = 0; i < cubes.length; i++) {
            var cubePos = cubes[i].getBoundingClientRect();

// Check collision
            if (playerPos.left < cubePos.right &&
                playerPos.right > cubePos.left &&
                playerPos.top < cubePos.bottom &&
                playerPos.bottom > cubePos.top) {
                cubes[i].remove();
                cubes.splice(i, 1);
                score++;
                updateScore();
                createCube();
            }
        }
    }

// Update the score display
    function updateScore() {
        document.getElementById('score').innerText = 'Score: ' + score;
    }

// Start the game
    init();
</script>
</body>
</html>
```

Note: This is a basic implementation, and you can customize it further according to your preferences, such as adding levels, time limits, or other enhancements.