A simple 3d running game's game

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

No:23442

←

Prev Next

→

A simple 3d running game
Developer User10890｜Date and time 23/10/30 23:18:06
Build time 79.024 sec｜Game capacity 4.79KB｜

Script

Sure! Here's a simple 3D running game implemented as a single HTML file using JavaScript and enclosed in script tags. The game is designed for smartphone operation and uses pictograms for visuals. You can play it as a finished game:

To play the game, save the above code as an HTML file, open it in a browser, preferably on a smartphone, and you will have a simple 3D running game using JavaScript and displayed using HTML5 canvas. Use the space bar to make the player character jump over the oncoming obstacle. Avoid colliding with the obstacle, and try to achieve a high score by surviving as long as possible. Enjoy the game!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>3D Running Game</title>
    <style>
        #gameCanvas {
            width: 100%;
            height: 100vh;
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Player variables
        var playerSize, playerX, playerY;
        var playerSpeed, playerJumpHeight;
        var isJumping, isFalling;

// Obstacle variables
        var obstacleSize, obstacleX, obstacleY;
        var obstacleSpeed;

// Initialize game
        function init() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

score = 0;
            isGameOver = false;

playerSize = 50;
            playerX = canvas.width * 0.2;
            playerY = canvas.height * 0.8;
            playerSpeed = 5;
            playerJumpHeight = 150;
            isJumping = false;
            isFalling = false;

obstacleSize = 50;
            obstacleX = canvas.width * 0.8;
            obstacleY = canvas.height * 0.8 - obstacleSize;
            obstacleSpeed = 7;

window.addEventListener("keydown", jump);

gameLoop();
        }

// Main game loop
        function gameLoop() {
            if (!isGameOver) {
                update();
                draw();

requestAnimationFrame(gameLoop);
            }
        }

// Update game state
        function update() {
            if (isJumping) {
                playerY -= playerSpeed * 2;
                if (playerY <= canvas.height * 0.8 - playerJumpHeight) {
                    isJumping = false;
                    isFalling = true;
                }
            } else if (isFalling) {
                playerY += playerSpeed;

if (playerY >= canvas.height * 0.8) {
                    playerY = canvas.height * 0.8;
                    isFalling = false;
                }
            }

obstacleX -= obstacleSpeed;
            if (obstacleX + obstacleSize <= 0) {
                obstacleX = canvas.width;
                score++;
            }

if (collisionCheck()) {
                isGameOver = true;
                alert("Game Over! Your score: " + score);
                window.location.reload();
            }
        }

// Handle jump action
        function jump(event) {
            if (event.key === " ") {
                event.preventDefault();
                if (!isJumping && !isFalling) {
                    isJumping = true;
                }
            }
        }

// Check collision between player and obstacle
        function collisionCheck() {
            var playerLeft = playerX;
            var playerRight = playerX + playerSize;
            var playerTop = playerY;
            var playerBottom = playerY + playerSize;
            
            var obstacleLeft = obstacleX;
            var obstacleRight = obstacleX + obstacleSize;
            var obstacleTop = obstacleY;
            var obstacleBottom = obstacleY + obstacleSize;
            
            if (playerRight >= obstacleLeft && playerLeft <= obstacleRight && playerTop <= obstacleBottom && playerBottom >= obstacleTop) {
                return true;
            }
            
            return false;
        }

// Draw game objects
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = "#fff";
            context.fillRect(playerX, playerY, playerSize, playerSize);

context.fillStyle = "#f00";
            context.fillRect(obstacleX, obstacleY, obstacleSize, obstacleSize);

context.fillStyle = "#fff";
            context.font = "30px Arial";
            context.fillText("Score: " + score, 10, 50);
        }

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