WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FNF Style Sleepwell</title> <style> body { margin: 0; padding: 0; background-color: #111; display: flex; justify-content: center; align-items: center; height: 100vh; color: white; font-family: sans-serif; overflow: hidden; } canvas { background-color: #000; box-shadow: 0 0 15px rgba(0,0,0,0.8); } </style> </head> <body> <canvas id="gameCanvas" width="1280" height="720"></canvas> <script src="game.js"></script> </body> </html>
const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const GAME_SPEED = 5; // Pixels per frame const keys = ['ArrowLeft', 'ArrowDown', 'ArrowUp', 'ArrowRight']; // Array to hold the scrolling notes let notes = []; let score = 0; // Main Loop function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Update and draw notes handleNotes(); requestAnimationFrame(update); } // Start the loop update(); class Note { constructor(directionIndex) { this.dir = directionIndex; // 0: Left, 1: Down, 2: Up, 3: Right this.x = 200 + (this.dir * 100); // Layout spacing this.y = -50; // Start above canvas this.radius = 40; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = ['red', 'purple', 'green', 'blue'][this.dir]; ctx.fill(); ctx.closePath(); } move() { this.y += GAME_SPEED; } } function handleNotes() { for (let i = notes.length - 1; i >= 0; i--) { notes[i].move(); notes[i].draw(); // Remove notes that go off screen if (notes[i].y > canvas.height) { notes.splice(i, 1); } } } const HIT_Y = 600; // The target receptors area const HIT_TOLERANCE = 50; // Pixels of leeway window.addEventListener('keydown', (e) => { const index = keys.indexOf(e.key); if (index !== -1) { // Check if any note is in the hit zone for the pressed key for (let i = 0; i < notes.length; i++) { const note = notes[i]; if (note.dir === index) { const distance = Math.abs(note.y - HIT_Y); if (distance < HIT_TOLERANCE) { score += 100; // Hit! notes.splice(i, 1); // Remove note break; } } } } });
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FNF Style Sleepwell</title> <style> body { margin: 0; padding: 0; background-color: #111; display: flex; justify-content: center; align-items: center; height: 100vh; color: white; font-family: sans-serif; overflow: hidden; } canvas { background-color: #000; box-shadow: 0 0 15px rgba(0,0,0,0.8); } </style> </head> <body> <canvas id="gameCanvas" width="1280" height="720"></canvas> <script src="game.js"></script> </body> </html>
const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const GAME_SPEED = 5; // Pixels per frame const keys = ['ArrowLeft', 'ArrowDown', 'ArrowUp', 'ArrowRight']; // Array to hold the scrolling notes let notes = []; let score = 0; // Main Loop function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Update and draw notes handleNotes(); requestAnimationFrame(update); } // Start the loop update(); class Note { constructor(directionIndex) { this.dir = directionIndex; // 0: Left, 1: Down, 2: Up, 3: Right this.x = 200 + (this.dir * 100); // Layout spacing this.y = -50; // Start above canvas this.radius = 40; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = ['red', 'purple', 'green', 'blue'][this.dir]; ctx.fill(); ctx.closePath(); } move() { this.y += GAME_SPEED; } } function handleNotes() { for (let i = notes.length - 1; i >= 0; i--) { notes[i].move(); notes[i].draw(); // Remove notes that go off screen if (notes[i].y > canvas.height) { notes.splice(i, 1); } } } const HIT_Y = 600; // The target receptors area const HIT_TOLERANCE = 50; // Pixels of leeway window.addEventListener('keydown', (e) => { const index = keys.indexOf(e.key); if (index !== -1) { // Check if any note is in the hit zone for the pressed key for (let i = 0; i < notes.length; i++) { const note = notes[i]; if (note.dir === index) { const distance = Math.abs(note.y - HIT_Y); if (distance < HIT_TOLERANCE) { score += 100; // Hit! notes.splice(i, 1); // Remove note break; } } } } });
Preview
Validating your code, please wait...