A racing game with power ups and with awards and 3d animation's game

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

No:19799

←

Prev Next

→

A racing game with power ups and with awards and 3..ALL
Developer User8828｜Date and time 23/10/6 22:00:18
Build time 31.003 sec｜Game capacity 5.464KB｜

Script

Sure! Here is a simple racing game implemented as a single HTML file with JavaScript. It includes power-ups, awards, and basic 3D animation. Please note that due to the limitations of text-based responses, the code provided here will not run directly in a web browser. However, you can copy this code into an HTML file and open it in a browser to play the game.

Score: 0

Again, please remember to copy this code into an HTML file in order to play the game in a web browser.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Racing Game</title>
    <style>
        #game-container {
            width: 400px;
            height: 400px;
            position: relative;
            border: 1px solid black;
        }

#player {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            bottom: 0;
        }

.obstacle {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
        }

.power-up {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
        }
        
        #score {
            font-size: 24px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
    </div>
    <div id="score">Score: 0</div>

function movePlayerLeft() {
            var playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"), 10);
            if (playerLeft > 0) {
                player.style.left = (playerLeft - 10) + "px";
            }
        }

function movePlayerRight() {
            var playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"), 10);
            if (playerLeft < gameContainer.offsetWidth - player.offsetWidth) {
                player.style.left = (playerLeft + 10) + "px";
            }
        }

function createObstacle() {
            var obstacle = document.createElement("div");
            obstacle.className = "obstacle";
            obstacle.style.left = Math.random() * (gameContainer.offsetWidth - obstacle.offsetWidth) + "px";
            gameContainer.appendChild(obstacle);
        }

function createPowerUp() {
            var powerUp = document.createElement("div");
            powerUp.className = "power-up";
            powerUp.style.left = Math.random() * (gameContainer.offsetWidth - powerUp.offsetWidth) + "px";
            gameContainer.appendChild(powerUp);
        }

function moveObstacles() {
            var obstacles = document.getElementsByClassName("obstacle");
            for (var i = 0; i < obstacles.length; i++) {
                var obstacle = obstacles[i];
                var obstacleTop = parseInt(window.getComputedStyle(obstacle).getPropertyValue("top"), 10);
                obstacle.style.top = (obstacleTop + speed) + "px";

if (obstacleTop > gameContainer.offsetHeight) {
                    obstacle.remove();
                    score += 10;
                    scoreDisplay.innerHTML = "Score: " + score;
                }

if (isColliding(player, obstacle)) {
                    endGame();
                }
            }
        }

function movePowerUps() {
            var powerUps = document.getElementsByClassName("power-up");
            for (var i = 0; i < powerUps.length; i++) {
                var powerUp = powerUps[i];
                var powerUpTop = parseInt(window.getComputedStyle(powerUp).getPropertyValue("top"), 10);
                powerUp.style.top = (powerUpTop + speed * 0.5) + "px";

if (powerUpTop > gameContainer.offsetHeight) {
                    powerUp.remove();
                }

if (isColliding(player, powerUp)) {
                    powerUp.remove();
                    score += 50;
                    scoreDisplay.innerHTML = "Score: " + score;
                }
            }
        }

function isColliding(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();

return !(rect1.right < rect2.left ||
                rect1.left > rect2.right ||
                rect1.bottom < rect2.top ||
                rect1.top > rect2.bottom);
        }

function startGame() {
            interval = setInterval(function () {
                createObstacle();
                createPowerUp();
            }, 2000);

interval = setInterval(function () {
                moveObstacles();
                movePowerUps();
            }, 10);

function endGame() {
            clearInterval(interval);
            alert("Game Over! Your score is " + score);
        }

startGame();
    </script>
</body>
</html>
```

Again, please remember to copy this code into an HTML file in order to play the game in a web browser.