AI game creator

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

No:43708

121

←

Prev Next

→

Minecraft
Developer User10392｜Date and time 24/2/16 11:20:29
Build time 12.254 sec｜Game capacity 3.983KB｜

Script

In this example, I have created a simple game inspired by Minecraft using HTML5 canvas and JavaScript. The game displays a player character represented by a pictogram on a canvas. The player can be moved horizontally and vertically by swiping on the screen using touch controls. There are also blocks represented by pictograms displayed on the canvas. The player must avoid colliding with these blocks. If a collision occurs, a "Game Over" message is displayed. The game loop is implemented using the `draw` function which is repeatedly called using `requestAnimationFrame` to update the canvas and handle collision detection. Note: You would need to have the actual pictogram images (e.g., `emozi_all/pictogram.png` and `emozi_all/block.png`) in the same directory as the HTML file for them to display correctly.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Minecraft Game</title>
</head>
<body>
    <canvas id="game" width="400" height="400"></canvas>

// Define pictograms for the game
        const playerImg = new Image();
        playerImg.src = "player.png";
        const blockImg = new Image();
        blockImg.src = "block.png";

const player = {
            x: 200,
            y: 200,
            width: 50,
            height: 50
        };

const blocks = [
            { x: 0, y: 350, width: 100, height: 50 },
            { x: 300, y: 350, width: 100, height: 50 },
            { x: 150, y: 250, width: 100, height: 50 },
        ];

// Event listeners for touch controls
        canvas.addEventListener('touchstart', handleTouchStart);
        canvas.addEventListener('touchmove', handleTouchMove);

let xDown = null;
        let yDown = null;

function handleTouchStart(event) {
            const firstTouch = event.touches[0];
            xDown = firstTouch.clientX;
            yDown = firstTouch.clientY;
        }

function handleTouchMove(event) {
            if (!xDown || !yDown) {
                return;
            }

const xUp = event.touches[0].clientX;
            const yUp = event.touches[0].clientY;

const xDiff = xDown - xUp;
            const yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
                if (xDiff > 0) {
                    // Move left
                    player.x -= 10;
                } else {
                    // Move right
                    player.x += 10;
                }
            } else {
                if (yDiff > 0) {
                    // Move up
                    player.y -= 10;
                } else {
                    // Move down
                    player.y += 10;
                }
            }

xDown = null;
            yDown = null;

event.preventDefault(); // Prevent scrolling if using touch controls
        }

function draw() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw blocks
            for (let i = 0; i < blocks.length; i++) {
                ctx.drawImage(blockImg, blocks[i].x, blocks[i].y, blocks[i].width, blocks[i].height);
            }

// Draw player
            ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);

// Check for collision with blocks
            for (let i = 0; i < blocks.length; i++) {
                const block = blocks[i];
                if (
                    player.x < block.x + block.width &&
                    player.x + player.width > block.x &&
                    player.y < block.y + block.height &&
                    player.y + player.height > block.y
                ) {
                    alert("Game Over");
                }
            }

requestAnimationFrame(draw);
        }

// Start the game
        draw();
    </script>
</body>
</html>
```

In this example, I have created a simple game inspired by Minecraft using HTML5 canvas and JavaScript.

The game displays a player character represented by a pictogram on a canvas. The player can be moved horizontally and vertically by swiping on the screen using touch controls.

There are also blocks represented by pictograms displayed on the canvas. The player must avoid colliding with these blocks. If a collision occurs, a "Game Over" message is displayed.

The game loop is implemented using the `draw` function which is repeatedly called using `requestAnimationFrame` to update the canvas and handle collision detection.

Note: You would need to have the actual pictogram images (e.g., `player.png` and `block.png`) in the same directory as the HTML file for them to display correctly.