J'ai essayé Sonic 2D

183 0 Jeux TacoGamer Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

3 July 2025

Bouton J'aime

2 October 2026

Sonic le Hérisson 1

28 December 2025

Sonic 2

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();

Commentaires 0

…