You are a cube jumping over spikes, and making your way through portals to change yourself's game

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

No:50874

146

←

Prev Next

→

You are a cube jumping over spikes, and making you..ALL
Developer User21399｜Date and time 24/3/10 1:59:29
Build time 9.278 sec｜Game capacity 3.725KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cube Jump Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let cube = {
            x: 50,
            y: canvas.height - 100,
            size: 20,
            velocity: 0,
            gravity: 0.5,
            jumping: false
        };

let spikes = [];

let portals = [];

function drawCube() {
            ctx.fillStyle = '#FFFFFF';
            ctx.fillRect(cube.x, cube.y, cube.size, cube.size);
        }

function createSpikes() {
            const spikeGap = 200;
            const spikeWidth = 20;
            const spikeHeight = 50;
            const spikeX = canvas.width + 20;
            
            spikes.push({
                x: spikeX,
                y: canvas.height - spikeGap,
                width: spikeWidth,
                height: spikeHeight
            });
        }

function drawSpikes() {
            spikes.forEach(spike => {
                ctx.fillStyle = '#FF0000';
                ctx.fillRect(spike.x, spike.y, spike.width, spike.height);
            });
        }

function createPortals() {
            portals.push({
                x: canvas.width + Math.random() * 500,
                y: Math.random() * (canvas.height - 100)
            });
        }

function drawPortals() {
            portals.forEach(portal => {
                ctx.fillStyle = '#00FF00';
                ctx.fillRect(portal.x, portal.y, 20, 20);
            });
        }

function moveCube() {
            cube.velocity += cube.gravity;
            cube.y += cube.velocity;

if (cube.y >= canvas.height - cube.size) {
                cube.y = canvas.height - cube.size;
                cube.velocity = 0;
                cube.jumping = false;
            }
        }

function checkCollision() {
            spikes.forEach(spike => {
                if (cube.x < spike.x + spike.width &&
                    cube.x + cube.size > spike.x &&
                    cube.y < spike.y + spike.height &&
                    cube.y + cube.size > spike.y) {
                    alert('Game Over!');
                    spikes = [];
                }
            });

portals.forEach(portal => {
                if (cube.x < portal.x + 20 &&
                    cube.x + cube.size > portal.x &&
                    cube.y < portal.y + 20 &&
                    cube.y + cube.size > portal.y) {
                    cube.size = cube.size === 20 ? 40 : 20;
                    portals.shift();
                }
            });
        }

function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

createSpikes();
            drawSpikes();

createPortals();
            drawPortals();

drawCube();
            moveCube();
            checkCollision();

requestAnimationFrame(gameLoop);
        }

window.addEventListener('keydown', function(e) {
            if (e.code === 'Space' && !cube.jumping) {
                cube.velocity = -10;
                cube.jumping = true;
            }
        });

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