A 3D rabbit in a 3D world. Control the rabbit to pickup karats behind trees in the 3D world's game

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

No:26036

←

Prev Next

→

A 3D rabbit in a 3D world. Control the rabbit to p..ALL
Developer User12800｜Date and time 23/11/26 7:30:32
Build time 110.957 sec｜Game capacity 4.292KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>

<head>
    <title>3D Rabbit Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

// Initialize the game canvas
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

// Game variables
        const WORLD_WIDTH = 800;
        const WORLD_HEIGHT = 600;
        const RABBIT_SIZE = 50;
        const KARAT_SIZE = 40;

let score = 0;
        let rabbitX = WORLD_WIDTH / 2;
        let rabbitY = WORLD_HEIGHT / 2;

// Generate random karats positioned behind trees
        const karats = [
            { x: 100, y: 200, collected: false },
            { x: 500, y: 400, collected: false },
            { x: 300, y: 100, collected: false },
            { x: 600, y: 300, collected: false }
        ];

// Event listener for arrow key controls
        document.addEventListener('keydown', handleKeyDown);

// Clear the canvas and draw the game objects
        function draw() {
            ctx.clearRect(0, 0, WORLD_WIDTH, WORLD_HEIGHT);

// Draw trees
            ctx.fillStyle = 'brown';
            ctx.fillRect(50, 150, 30, 200);
            ctx.fillRect(450, 350, 30, 200);
            ctx.fillRect(250, 50, 30, 200);
            ctx.fillRect(550, 250, 30, 200);

// Draw karats
            ctx.fillStyle = 'gold';
            for (let i = 0; i < karats.length; i++) {
                const karat = karats[i];
                if (!karat.collected) {
                    ctx.fillRect(karat.x - KARAT_SIZE / 2, karat.y - KARAT_SIZE / 2, KARAT_SIZE, KARAT_SIZE);
                }
            }

// Draw rabbit
            ctx.fillStyle = 'gray';
            ctx.fillRect(rabbitX - RABBIT_SIZE / 2, rabbitY - RABBIT_SIZE / 2, RABBIT_SIZE, RABBIT_SIZE);

// Draw score
            ctx.font = '20px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText(`Score: ${score}`, 10, 30);
        }

// Update the rabbit position based on user input
        function update() {
            if (arrowKeys.left && rabbitX > 50) {
                rabbitX -= 5;
            }
            if (arrowKeys.right && rabbitX < WORLD_WIDTH - 50) {
                rabbitX += 5;
            }
            if (arrowKeys.up && rabbitY > 50) {
                rabbitY -= 5;
            }
            if (arrowKeys.down && rabbitY < WORLD_HEIGHT - 50) {
                rabbitY += 5;
            }

// Check for collision with karats
            for (let i = 0; i < karats.length; i++) {
                const karat = karats[i];
                if (!karat.collected && isColliding(rabbitX, rabbitY, RABBIT_SIZE, karat.x, karat.y, KARAT_SIZE)) {
                    karat.collected = true;
                    score += 10;
                }
            }
        }

// Handle arrow key press events
        const arrowKeys = {
            left: false,
            right: false,
            up: false,
            down: false
        };

// Check if two rectangles are colliding
        function isColliding(rect1X, rect1Y, rect1Size, rect2X, rect2Y, rect2Size) {
            return (
                rect1X < rect2X + rect2Size &&
                rect1X + rect1Size > rect2X &&
                rect1Y < rect2Y + rect2Size &&
                rect1Y + rect1Size > rect2Y
            );
        }

// Game loop
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

// Start the game loop
        gameLoop();

</script>
</body>

</html>