Sonic 2D lo intenté

182 0 Juegos TacoGamer Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

30 January 2026

Ejemplo de código CSS 3D para reloj inteligente

27 September 2025

Compra monedas TikTok: recarga y envía regalos

17 December 2025

Clon del juego Geometry Dash HTML CSS JavaScript

HTML

CSS

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// Game Constants
const GRAVITY = 0.6;
const GROUND_Y = 320;

// Input Handling
const keys = { right: false, left: false, up: false };

window.addEventListener("keydown", (e) => {
    if (e.code === "ArrowRight" || e.code === "KeyD") keys.right = true;
    if (e.code === "ArrowLeft" || e.code === "KeyA") keys.left = true;
    if (e.code === "ArrowUp" || e.code === "Space") keys.up = true;
});

window.addEventListener("keyup", (e) => {
    if (e.code === "ArrowRight" || e.code === "KeyD") keys.right = false;
    if (e.code === "ArrowLeft" || e.code === "KeyA") keys.left = false;
    if (e.code === "ArrowUp" || e.code === "Space") keys.up = false;
});

// Player Object (Sonic)
const sonic = {
    x: 100,
    y: 200,
    width: 40,
    height: 50,
    vx: 0,
    vy: 0,
    speed: 6,
    acceleration: 0.2,
    friction: 0.85,
    jumpForce: 12,
    isGrounded: false,
    color: "#0055ff", // Sonic Blue
    
    update() {
        // Horizontal Movement Physics (Inertia/Acceleration)
        if (keys.right) {
            this.vx = Math.min(this.speed, this.vx + this.acceleration);
        } else if (keys.left) {
            this.vx = Math.max(-this.speed, this.vx - this.acceleration);
        } else {
            this.vx *= this.friction; // Slide to a stop when no inputs
            if (Math.abs(this.vx) < 0.05) this.vx = 0;
        }

// Jump Physics
        if (keys.up && this.isGrounded) {
            this.vy = -this.jumpForce;
            this.isGrounded = false;
        }

// Apply Gravity
        this.vy += GRAVITY;

// Position Updates
        this.x += this.vx;
        this.y += this.vy;

// Collision Check: Floor
        if (this.y + this.height >= GROUND_Y) {
            this.y = GROUND_Y - this.height;
            this.vy = 0;
            this.isGrounded = true;
        }

// Screen Borders Bound
        if (this.x < 0) this.x = 0;
        if (this.x + this.width > canvas.width) this.x = canvas.width - this.width;
    },

draw() {
        ctx.fillStyle = this.color;
        // Adjust shape into a ball if jumping/rolling
        if (!this.isGrounded) {
            ctx.beginPath();
            ctx.arc(this.x + this.width/2, this.y + this.height/2, this.width/2, 0, Math.PI * 2);
            ctx.fill();
        } else {
            // Standard bounding box placeholder
            ctx.fillRect(this.x, this.y, this.width, this.height);
            // Draw a little "quill" indicator on back
            ctx.fillRect(this.vx >= 0 ? this.x - 5 : this.x + this.width, this.y + 10, 5, 15);
        }
    }
};

// Simple Environment Object
const environment = {
    draw() {
        // Green Hill Zone Ground Look-alike
        ctx.fillStyle = "#3a9d23"; // Grass
        ctx.fillRect(0, GROUND_Y, canvas.width, 20);
        ctx.fillStyle = "#734d26"; // Dirt
        ctx.fillRect(0, GROUND_Y + 20, canvas.width, canvas.height - GROUND_Y - 20);
    }
};

// Main Game Loop
function gameLoop() {
    // 1. Clear previous screen
    ctx.clearRect(0, 0, canvas.width, canvas.height);

// 2. Compute physics changes
    sonic.update();

// 3. Render visuals
    environment.draw();
    sonic.draw();

// 4. Repeat on next frame refresh
    requestAnimationFrame(gameLoop);
}

// Fire up the engine
gameLoop();

Comentarios 0

…