Make a 3D game with a cube and camera controls's game

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

No:52661

183

←

Prev Next

→

Make a 3D game with a cube and camera controls
Developer User22097｜Date and time 24/3/24 1:15:58
Build time 13.221 sec｜Game capacity 1.813KB｜

Script

This code creates a simple 2D game where you control a cube by using the arrow keys on your keyboard. The cube moves in the direction of the key pressed and is confined within the boundaries of the canvas. You can further enhance the game by adding more features like obstacles, score tracking, etc.

←

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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Cube Game</title>
<style>
    canvas {
        display: block;
        margin: 0 auto;
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

const cube = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        size: 50,
        color: 'blue'
    };

function drawCube() {
        ctx.fillStyle = cube.color;
        ctx.fillRect(cube.x - cube.size / 2, cube.y - cube.size / 2, cube.size, cube.size);
    }

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

function updateGameArea() {
        clearCanvas();
        drawCube();
    }

window.addEventListener('keydown', moveCube);
    setInterval(updateGameArea, 20);
</script>
</body>
</html>
```
This code creates a simple 2D game where you control a cube by using the arrow keys on your keyboard. The cube moves in the direction of the key pressed and is confined within the boundaries of the canvas. You can further enhance the game by adding more features like obstacles, score tracking, etc.