Pixel Game Engine IDE

main.js Ready

// Welcome to Pixel Game Engine IDE!
// Create your pixel-perfect retro games here

class MyGame {
    constructor() {
        this.player = {
            x: 128,
            y: 120,
            width: 16,
            height: 16,
            color: '#00ff00',
            speed: 100
        };
        this.enemies = [];
        this.time = 0;
    }
    
    init() {
        console.log('Game initialized!');
        
        // Create some enemies
        for (let i = 0; i < 3; i++) {
            this.enemies.push({
                x: Math.random() * 200 + 50,
                y: Math.random() * 150 + 50,
                width: 12,
                height: 12,
                color: '#ff0000',
                vx: (Math.random() - 0.5) * 100,
                vy: (Math.random() - 0.5) * 100
            });
        }
    }
    
    update(deltaTime) {
        this.time += deltaTime;
        
        // Player movement
        if (input.isDown('left')) this.player.x -= this.player.speed * deltaTime / 1000;
        if (input.isDown('right')) this.player.x += this.player.speed * deltaTime / 1000;
        if (input.isDown('up')) this.player.y -= this.player.speed * deltaTime / 1000;
        if (input.isDown('down')) this.player.y += this.player.speed * deltaTime / 1000;
        
        // Keep player in bounds
        this.player.x = Math.max(0, Math.min(256 - this.player.width, this.player.x));
        this.player.y = Math.max(0, Math.min(240 - this.player.height, this.player.y));
        
        // Update enemies
        this.enemies.forEach(enemy => {
            enemy.x += enemy.vx * deltaTime / 1000;
            enemy.y += enemy.vy * deltaTime / 1000;
            
            // Bounce off walls
            if (enemy.x <= 0 || enemy.x >= 256 - enemy.width) enemy.vx = -enemy.vx;
            if (enemy.y <= 0 || enemy.y >= 240 - enemy.height) enemy.vy = -enemy.vy;
            
            enemy.x = Math.max(0, Math.min(256 - enemy.width, enemy.x));
            enemy.y = Math.max(0, Math.min(240 - enemy.height, enemy.y));
        });
        
        // Change player color on space
        if (input.isPressed('action')) {
            this.player.color = `hsl(${Math.random() * 360}, 70%, 50%)`;
        }
    }
    
    render() {
        // Clear screen
        gfx.clear('#000033');
        
        // Draw grid
        gfx.setColor('#333366');
        for (let x = 0; x < 256; x += 32) {
            gfx.line(x, 0, x, 240);
        }
        for (let y = 0; y < 240; y += 32) {
            gfx.line(0, y, 256, y);
        }
        
        // Draw enemies
        this.enemies.forEach(enemy => {
            gfx.setColor(enemy.color);
            gfx.rect(enemy.x, enemy.y, enemy.width, enemy.height);
        });
        
        // Draw player
        gfx.setColor(this.player.color);
        gfx.rect(this.player.x, this.player.y, this.player.width, this.player.height);
        
        // Draw UI
        gfx.setColor('#ffffff');
        gfx.text(`Time: ${(this.time / 1000).toFixed(1)}s`, 10, 20);
        gfx.text(`Player: (${Math.floor(this.player.x)}, ${Math.floor(this.player.y)})`, 10, 35);
        gfx.text('Arrow keys to move, Space to change color', 10, 220);
    }
}

// Initialize game
const game = new MyGame();
game.init();

Live Preview FPS: 60

Pixel Game Engine IDE ready

Press Run to start your game

API

Sprites

Assets

Graphics (gfx)

gfx.clear(color)

Clear screen with color

gfx.setColor(color)

Set drawing color

gfx.rect(x, y, w, h)

Draw filled rectangle

gfx.line(x1, y1, x2, y2)

Draw line

gfx.circle(x, y, radius)

Draw filled circle

gfx.text(text, x, y)

Draw text

gfx.sprite(id, x, y)

Draw sprite

Input

input.isDown(key)

Check if key is held down

input.isPressed(key)

Check if key was just pressed

input.mouse.x, input.mouse.y

Mouse position

Keys

'left', 'right', 'up', 'down'
'action', 'jump', 'fire'
'a', 'b', 'c', 'd', ..., 'z'
'0', '1', '2', ..., '9'
'space', 'enter', 'escape'

Graphics (gfx)

Input

Keys

Palette

Sprites

Sounds