Cube bouncing in a box, random position, not outside the box's game

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

No:37853

←

Prev Next

→

Cube bouncing in a box, random position, not outsi..ALL
Developer User17064｜Date and time 24/1/21 18:22:33
Build time 11.185 sec｜Game capacity 3.294KB｜

Script

Sure! Here's a simple game implementation in a single HTML file that meets all the given requirements. The game involves a cube bouncing inside a box with a random starting position, ensuring it stays within the boundaries of the box.

To play the game, save the above code in a file with an HTML extension (e.g. `game.html`). Then you can open the file in a web browser, preferably on a smartphone, and the cube bouncing game will start automatically. The cube will bounce within the box, and its starting position will be randomized each time the game is played.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Cube Bouncing Game</title>
    <style>
        #gameCanvas {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }
        #cube {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="gameCanvas">
        <div id="cube"></div>
    </div>

// Get the game canvas dimensions
            var canvasWidth = 250;  // Adjust as per your needs
            var canvasHeight = 250; // Adjust as per your needs

// Generate random starting position
            var randomX = Math.floor(Math.random() * (canvasWidth - cube.offsetWidth));
            var randomY = Math.floor(Math.random() * (canvasHeight - cube.offsetHeight));

// Set the initial position of the cube
            cube.style.left = randomX + 'px';
            cube.style.top = randomY + 'px';

// Calculate the maximum distance the cube can move in both directions
            var maxX = canvasWidth - cube.offsetWidth;
            var maxY = canvasHeight - cube.offsetHeight;

// Define the direction and speed of the cube
            var directionX = 1;
            var directionY = 1;
            var speed = 2; // Adjust as per your needs

// Move the cube
            function moveCube() {
                var currentX = parseInt(cube.style.left);
                var currentY = parseInt(cube.style.top);

// Update the cube's position based on the direction and speed
                var newX = currentX + (speed * directionX);
                var newY = currentY + (speed * directionY);

// Check if the cube hits the boundaries and change direction if it does
                if (newX <= 0 || newX >= maxX) {
                    directionX *= -1;
                }
                if (newY <= 0 || newY >= maxY) {
                    directionY *= -1;
                }

// Update the cube's position
                cube.style.left = newX + 'px';
                cube.style.top = newY + 'px';

// Request the next animation frame
                window.requestAnimationFrame(moveCube);
            }

// Start the game loop
            moveCube();
        }

// Start the game once the page is loaded
        window.addEventListener('load', startGame);
    </script>
</body>
</html>
```