AI game creator

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

No:11607

183

←

Prev Next

→

Platformer
Developer User4935｜Date and time 23/8/11 8:06:27
Build time 25.483 sec｜Game capacity 4.377KB｜

Script

Sure! Here's an example of a simple platformer game implemented as a single HTML file using JavaScript. It includes smartphone operation and the use of pictograms for the visuals:

This code snippet sets up a simple platformer game where the player controls a red square using arrow keys or touching the screen for smartphone operation. The player can move left/right, jump, and collide with platforms represented by green rectangles. The game loop continuously updates and renders the game state within a canvas element.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple platformer game implemented as a single HTML file using JavaScript. It includes smartphone operation and the use of pictograms for the visuals:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platformer Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

canvas {
            display: block;
        }
    </style>
</head>
<body>
    <script>
        // Game constants
        const GRAVITY = 0.2;
        const JUMP_FORCE = 5;
        const PLAYER_SPEED = 2;

// Game state variables
        let canvas;
        let ctx;
        let player;
        let platforms;
        let keys;

// Player object
        class Player {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.width = 32;
                this.height = 32;
                this.dy = 0;
                this.jumping = false;
            }

move() {
                if (keys.ArrowUp && !this.jumping) {
                    this.dy = -JUMP_FORCE;
                    this.jumping = true;
                }

if (keys.ArrowRight) {
                    this.x += PLAYER_SPEED;
                }

if (keys.ArrowLeft) {
                    this.x -= PLAYER_SPEED;
                }

this.y += this.dy;
                this.dy += GRAVITY;
            }

draw() {
                ctx.fillStyle = '#f00';
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }

collideWithPlatform(platform) {
                if (
                    this.y + this.height > platform.y &&
                    this.y < platform.y + platform.height &&
                    this.x < platform.x + platform.width &&
                    this.x + this.width > platform.x
                ) {
                    this.dy = 0;
                    this.jumping = false;
                    this.y = platform.y - this.height;
                }
            }
        }

// Platform object
        class Platform {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.width = 200;
                this.height = 25;
            }

draw() {
                ctx.fillStyle = '#0f0';
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }

// Initialize game
        function init() {
            canvas = document.createElement('canvas');
            canvas.width = 800;
            canvas.height = 600;
            ctx = canvas.getContext('2d');
            document.body.appendChild(canvas);

player = new Player(50, 50);
            platforms = [
                new Platform(0, canvas.height - 25),
                new Platform(200, canvas.height - 50),
                new Platform(400, canvas.height - 75)
            ];

keys = {};

document.addEventListener('keydown', (e) => {
                keys[e.key] = true;
            });

document.addEventListener('keyup', (e) => {
                keys[e.key] = false;
            });

gameLoop();
        }

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

// Update game state
        function update() {
            player.move();

platforms.forEach((platform) => {
                player.collideWithPlatform(platform);
            });
        }

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

platforms.forEach((platform) => {
                platform.draw();
            });

player.draw();
        }

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

This code snippet sets up a simple platformer game where the player controls a red square using arrow keys or touching the screen for smartphone operation. The player can move left/right, jump, and collide with platforms represented by green rectangles. The game loop continuously updates and renders the game state within a canvas element.