3D Cube Game with spikes that k○ll the player's game

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

No:22517

←

Prev Next

→

3D Cube Game with spikes that k○ll the player
Developer User10392｜Date and time 23/10/23 1:00:16
Build time 50.404 sec｜Game capacity 3.068KB｜

Script

Sure! Here's an example of a simple 3D Cube Game implemented as a single HTML file using JavaScript. The game consists of a cube moving forward in a 3D environment with randomly appearing spikes. The player must avoid the spikes to survive.

To play the game, save the code above as an HTML file and open it in a web browser, preferably on a smartphone for optimal experience. The game consists of a blue cube moving upwards and downwards using the arrow keys to avoid red spikes that appear randomly. If the cube collides with a spike, the game is over, and an alert message will be shown.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>3D Cube Game</title>
    <style>
        #gameCanvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas"></canvas>

// Game Variables
    let ctx;
    let cubeX;
    let cubeY;
    let spikeX;
    let spikeY;
    let gameOver;

// Initialize game
    function init() {
        const canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");
        canvas.width = CANVAS_WIDTH;
        canvas.height = CANVAS_HEIGHT;

cubeX = CANVAS_WIDTH / 2 - CUBE_SIZE / 2;
        cubeY = CANVAS_HEIGHT / 2 - CUBE_SIZE / 2;
        
        spikeX = CANVAS_WIDTH;
        spikeY = Math.random() * (CANVAS_HEIGHT - SPIKE_SIZE);
        
        gameOver = false;

document.addEventListener("keydown", handleKeyPress);
        draw();
    }

// Draw game objects
    function draw() {
        if (gameOver) {
            return;
        }
        
        ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

// Draw cube
        ctx.fillStyle = "blue";
        ctx.fillRect(cubeX, cubeY, CUBE_SIZE, CUBE_SIZE);

// Draw spike
        ctx.fillStyle = "red";
        ctx.fillRect(spikeX, spikeY, SPIKE_SIZE, SPIKE_SIZE);

// Check collision
        if (cubeX + CUBE_SIZE > spikeX && cubeX < spikeX + SPIKE_SIZE &&
            cubeY + CUBE_SIZE > spikeY && cubeY < spikeY + SPIKE_SIZE) {
            gameOver = true;
            alert("Game Over!");
            clearInterval(gameInterval);
        }

// Update spike position
        spikeX -= SPIKE_SPEED;

// Spawn new spikes
        if (spikeX + SPIKE_SIZE < 0) {
            spikeX = CANVAS_WIDTH;
            spikeY = Math.random() * (CANVAS_HEIGHT - SPIKE_SIZE);
        }
    }

// Handle key presses
    function handleKeyPress(event) {
        const key = event.keyCode;
        if (key === 38 && cubeY > 0) { // Up arrow
            cubeY -= 10;
        } else if (key === 40 && cubeY + CUBE_SIZE < CANVAS_HEIGHT) { // Down arrow
            cubeY += 10;
        }
    }

// Start game
    init();
    const gameInterval = setInterval(draw, 16); // Approx. 60 FPS
</script>
</body>
</html>
```