Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE html> <html> <head> <title>Ninja Go</title> </head> <body> <script> var CANVAS_WIDTH = 800; var NANONAUT_WIDTH = 120; var nanonautX = CANVAS_WIDTH - NANONAUT_WIDTH; // KONSTANTY var CANVAS_WIDTH = 800; var CANVAS_HEIGHT = 600; var NANONAUT_WIDTH = 181; var NANONAUT_HEIGHT = 229; var ZEME_Y = 540; var NANONAUT_Y_ZRYCHLENÍ = 1; var MEZERNIK_KOD = 32; var NANONAUT_SKOK_RYCHLOST = 20; var NANONAUT_X_RYCHLOST = 5; var POZADI_WIDTH = 1000; var NANONAUT_POCET_SNIMKU_V_RADE = 5; var NANONAUT_POCET_SNIMKU_ANIMACE = 7; var NANONAUT_ANIMACE_RYCHLOST = 3; // NASTAVENÍ var canvas = document.createElement('canvas'); var c = canvas.getContext('2d'); canvas.width = CANVAS_WIDTH canvas.height = CANVAS_HEIGHT; document.body.appendChild(canvas); var nanonautImage = new Image (); nanonautImage.src = 'nanonaut.png'; var nanonautX = 50; var nanonautY = 40; window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp); window.addEventListener('load', start); function start() { window.requestAnimationFrame(mainLoop); } var nanonautYRychlost = 0; var mezernikStisknuty = false; var nanonautX = CANVAS_WIDTH / 2; var nanonautY = ZEME_Y - NANONAUT_HEIGHT; var nanonautSnimekNr = 0; var hraSnimkyPocitadlo = 0; // HLAVNÍ SMYČKA function mainLoop() { update(); draw(); window.requestAnimationFrame(mainLoop); } // REAKCE HRACE function onKeyDown(event) { if (event.keyCode === MEZERNIK_KOD) { mezernikStisknuty = true; } } function onKeyUp (event) { if (event.keyCode === MEZERNIK_KOD) { mezernikStisknuty = false; } } // AKTUALIZACE function update() { hraSnimkyPocitadlo = hraSnimkyPocitadlo + 1; nanonautX = nanonautX + NANONAUT_X_RYCHLOST; if (mezernikStisknuty && !nanonautVeVzduchu) { nanonautYRychlost = -NANONAUT_SKOK_RYCHLOST; nanonautVeVzduchu = true; } // AKTUALIZACE ANIMACE if ((hraSnimkyPocitadlo % NANONAUT_ANIMACE_RYCHLOST) === 0) { nanonautSnimekNr = nanonautSnimekNr + 1; if (nanonautSnimekNr >= NANONAUT_POCET_SNIMKU_ANIMACE) { nanonautSnimekNr = 0; } } // AKTUALIZACE KAMERY kameraX = nanonautX - 150; } // AKTUALIZACE NANONAUTA nanonautYRychlost = nanonautYRychlost + NANONAUT_Y_ZRYCHLENI; nanonautY = nanonautY + nanonautYRychlost; if (nanonautY > (ZEME_Y - NANONAUT_HEIGHT)) { nanonautY = ZEME_Y - NANONAUT_HEIGHT; nanonautYRychlost = 0; nanonautVeVzduchu = false; var NANONAUT_Y_ZRYCHLENI = 1; } // ZOBRAZENÍ function draw() { // Zobrazení oblohy c.fillStyle = 'LightSkyBlue'; c.fillRect(0, 0, CANVAS_WIDTH, ZEME_Y - 40); // Zobrazení pozadí c.drawImage(pozadiImage, pozadiX, -210); c.drawImage(pozadImage, pozadiX + POZADI_WIDTH, -210); var pozadiImage = new Image (); pozadiImage.src = 'background.png'; var pozadi = - (kameraX % POZADI_WIDTH); // Zobrazení země c.fillStyle = 'ForestGreen'; c.fillRect(0, ZEME_Y - 40, CANVAS_WIDTH, CANVAS_HEIGHT - ZEME_Y + 40); // Zobrazení Nanonauta. var nanonautSpriteSheetRada = Math.floor(nanonautSnimekNr / NANONAUT_POCET_SNIMKU_V_RADE); var nanonautSpriteSheetSloupec = nanonautSnimekNr % NANONAUT_POCET_SNIMKU_V_RADE; var nanonautSpriteSheetX = nanonautSpriteSheetSloupec * NANONAUT_WIDTH; var nanonautSpriteSheetY = nanonautSpriteSheetRada * NANONAUT_HEIGHT; c.drawImage(nanonautImage, nanonautSpriteSheetX, nanonautSpriteSheetY, NANONAUT_WIDTH, NANONAUT_HEIGHT, nanonautX - kameraX, nanonautY - kameraY, NANONAUT_WIDTH, NANONAUT_HEIGHT); } </script> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>