Make a 3d puzzle game's game

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

No:24988

←

Prev Next

→

Make a 3d puzzle game
Developer User12061｜Date and time 23/11/15 15:13:50
Build time 75.206 sec｜Game capacity 3.728KB｜

Script

Sure! Here's an example of a simple 3D puzzle game implemented as a single HTML file using JavaScript:

In this game, you'll see a 3D cube represented using square pictograms. You can touch and drag the cube horizontally or vertically within the canvas area. The goal is to move the cube back to its original position (x: 160, y: 160) to solve the puzzle. Once the cube is in the correct position, an alert message will congratulate you on solving the puzzle. Please note that this is a simplified implementation for demonstration purposes. A full-fledged 3D puzzle game would require more complex rendering and interaction logic.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's an example of a simple 3D puzzle game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>3D Puzzle Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Get the canvas element
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

// Cube properties
        var cubeSize = 80;
        var cubeX = 160;
        var cubeY = 160;
        var cubeZ = 160;

// Puzzle variables
        var solved = false;
        var dragStartX, dragStartY;

// Event listeners for touch events
        canvas.addEventListener('touchstart', onTouchStart, false);
        canvas.addEventListener('touchmove', onTouchMove, false);
        canvas.addEventListener('touchend', onTouchEnd, false);

// Function to draw the cube
        function drawCube() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Front face
            ctx.fillStyle = 'red';
            ctx.fillRect(cubeX, cubeY, cubeSize, cubeSize);

// Right face
            ctx.fillStyle = 'green';
            ctx.beginPath();
            ctx.moveTo(cubeX + cubeSize, cubeY);
            ctx.lineTo(cubeX + cubeSize, cubeY + cubeSize);
            ctx.lineTo(cubeX + cubeSize + cubeZ, cubeY + cubeZ + cubeSize);
            ctx.lineTo(cubeX + cubeSize + cubeZ, cubeY + cubeZ);
            ctx.closePath();
            ctx.fill();

// Top face
            ctx.fillStyle = 'blue';
            ctx.beginPath();
            ctx.moveTo(cubeX, cubeY);
            ctx.lineTo(cubeX + cubeSize, cubeY);
            ctx.lineTo(cubeX + cubeSize + cubeZ, cubeY + cubeZ);
            ctx.lineTo(cubeX + cubeZ, cubeY + cubeZ);
            ctx.closePath();
            ctx.fill();
        }

// Event handler for touch start event
        function onTouchStart(event) {
            var touch = event.touches[0];
            dragStartX = touch.clientX;
            dragStartY = touch.clientY;
        }

// Event handler for touch move event
        function onTouchMove(event) {
            event.preventDefault();
            var touch = event.touches[0];
            var dragDistX = touch.clientX - dragStartX;
            var dragDistY = touch.clientY - dragStartY;

if (Math.abs(dragDistX) > Math.abs(dragDistY)) {
                var moveX = dragDistX > 0 ? 1 : -1;
                cubeX += moveX * 10;
            } else {
                var moveY = dragDistY > 0 ? 1 : -1;
                cubeY += moveY * 10;
            }

drawCube(); // Redraw the cube after moving
        }

// Event handler for touch end event
        function onTouchEnd(event) {
            // Check if puzzle is solved
            if (cubeX === 160 && cubeY === 160) {
                solved = true;
                alert("Congratulations! You solved the puzzle!");
            }
        }

// Initial draw of the cube
        drawCube();
    </script>
</body>
</html>
```

Please note that this is a simplified implementation for demonstration purposes. A full-fledged 3D puzzle game would require more complex rendering and interaction logic.