3D graphics displays a Rotating cube And add a key on top's game

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

No:37067

←

Prev Next

→

3D graphics displays a Rotating cube And add a key..ALL
Developer Game Studio｜Date and time 24/1/20 3:09:51
Build time 13.502 sec｜Game capacity 3.979KB｜

Script

Sure! Here is an example of a single HTML file that implements a simple game using a rotating cube and a key pictogram. The game can be played on a smartphone.

When you run this HTML file in a browser, it will display a canvas element with a rotating blue cube at the center of the screen. The cube will rotate clockwise when you touch/hold the screen (on mobile) or click/hold the mouse button (on desktop). There is also a yellow key (`🔑`) at the top-right corner of the screen. If the cube touches the key, it will be collected, and the key will disappear from the screen.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here is an example of a single HTML file that implements a simple game using a rotating cube and a key pictogram. The game can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Rotating Cube Game</title>
    <style>
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Cube object
            const cube = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                size: 50,
                rotation: 0,
                rotationSpeed: 2,
                keyCollected: false
            };

// Key object
            const key = {
                x: canvas.width - 70,
                y: 30,
                size: 40
            };

// Event listeners for touch and mouse input
            canvas.addEventListener("touchstart", handleTouchStart, false);
            canvas.addEventListener("touchend", handleTouchEnd, false);
            canvas.addEventListener("mousedown", handleMouseDown, false);
            canvas.addEventListener("mouseup", handleMouseUp, false);

// Rotate the cube clockwise when touch/mouse is held down
            function handleTouchStart() {
                cube.rotationSpeed = 2;
            }

// Stop rotating the cube when touch/mouse is released
            function handleTouchEnd() {
                cube.rotationSpeed = 0;
            }

// Rotate the cube clockwise when mouse button is held down
            function handleMouseDown() {
                cube.rotationSpeed = 2;
            }

// Stop rotating the cube when mouse button is released
            function handleMouseUp() {
                cube.rotationSpeed = 0;
            }

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

// Update game logic
            function update() {
                cube.rotation += (cube.rotationSpeed * Math.PI) / 180;

// Check if the cube collects the key
                if (
                    cube.x < key.x + key.size &&
                    cube.x + cube.size > key.x &&
                    cube.y < key.y + key.size &&
                    cube.y + cube.size > key.y
                ) {
                    cube.keyCollected = true;
                }
            }

// Render game elements
            function render() {
                context.clearRect(0, 0, canvas.width, canvas.height);

// Render rotating cube
                context.save();
                context.translate(cube.x, cube.y);
                context.rotate(cube.rotation);
                context.fillStyle = "blue";
                context.fillRect(-cube.size / 2, -cube.size / 2, cube.size, cube.size);
                context.restore();

// Render key
                if (!cube.keyCollected) {
                    context.font = "40px Arial";
                    context.fillStyle = "yellow";
                    context.fillText("🔑", key.x, key.y);
                }
            }

// Start the game loop
            gameLoop();
        };
    </script>
</body>
</html>
```