Stick champ játék

Itt található a kis játékunk kódja, ahol a bajnokunk egy bot segítségével ugrik át a köveken (részletes magyarázat lentebb):

<html>

<body>

let canvas = document.getElementById("myCanvas");

let context = canvas.getContext("2d");

context.font = 'bold 30px sans-serif';

context.lineWidth = 4;

let image = new Image();

image.src = "sprite.png";

const maxStones = 6, size = 40;

let angle = -Math.PI / 2;

let x, y, frame, currentStone, mode, run, offset, stickLength, stones;

function reset() {

currentStone = 0;

x = 100;

y = 360;

frame = 0;

stones = [];

stickLength = 0;

offset = 0;

run = 0;

for (let i = 0; i < maxStones; i++) {

stones[i] = {

x: i * 300 + Math.floor(Math.random() * 80),

width: 50 + Math.floor(Math.random() * 50)

};

}

stones[0].x = 80;

mode = 'wait';

}

function animate() {

context.clearRect(0, 0, canvas.width, canvas.height);

context.fillText('Distance remaining: ' + (maxStones - currentStone - 1), 250, 100);

stones.forEach((stone)=>{

context.fillRect(stone.x - offset, 398, stone.width, 600);

}

);

context.drawImage(image, Math.floor(frame) * size, 0, size, size, x + size / 2, y, size, size);

switch (mode) {

case 'pointerdown':

stickLength++;

break;

case 'stickFall':

angle = angle + Math.PI / 64;

if (angle >= 0)

mode = 'run';

break;

case 'run':

offset++;

run++;

frame = frame + .5;

if (frame == 20)

frame = 0;

if (stickLength == run) {

mode = 'wait';

angle = -Math.PI / 2;

stickLength = 0;

run = 0;

let gameOver = true;

stones.forEach((stone,index)=>{

if (offset + x + size > stone.x && offset + x < stone.x + stone.width - size) {

gameOver = false;

currentStone = Math.max(currentStone, index);

if (currentStone == maxStones - 1) {

mode = 'gameOver';

frame = 21;

}

);

if (gameOver) {

mode = 'gameOver';

frame = 20;

}

break;

case 'gameOver':

if (currentStone < maxStones - 1) {

y++;

context.fillText('Game over. Click to restart', 20, 60);

} else

context.fillText('You win! Click to restart', 20, 60);

}

let x2 = x + (stickLength - run) * Math.cos(angle);

let y2 = y + (stickLength - run) * Math.sin(angle);

context.beginPath();

context.moveTo(x + size - run, y + size);

context.lineTo(x2 + size, y2 + size);

context.stroke();

window.requestAnimationFrame(animate);

}

window.onpointerdown = function() {

switch (mode) {

case 'wait':

mode = 'pointerdown';

break;

case 'gameOver':

mode = 'wait';

reset();

}

};

window.onpointerup = function() {

if (mode == 'pointerdown')

mode = 'stickFall';

};

reset();

animate();

</script>

</body>

</html>

Az [1-8] sorok beállítják a HTML5 Vásznat (Canvas) és a 2D kontextust
[9-10] láthatatlan kép, amely a sprite lapot tartalmazza (20 képkocka a futáshoz, 1 esés, 1 ünneplés):

[11-13] Játékváltozók és állandók deklarálása:
[11] a kövek maximális száma (=a megteendő távolság), a sprite mérete (40x40 pixel)
[12] a bot kezdeti szöge - egyenesen felfelé áll
[13] x - a bajnok x koordinátája
y - a bot tetejének y koordinátája
frame - aktuális animációs képkocka
currentStone - hány követ értünk el
mode - játékmód (wait/pointerdown/stickFall/gameOver)
run - az aktuális futás hossza
offset - a képernyő vízszintes görgetési eltolása
stickLength - a bot aktuális hossza
stones - kő objektumok tömbje

[15-32] minden változó visszaállítása a kezdeti értékre
[24-29] a kövek pozícióinak és szélességének véletlenszerűsítése

[34-96] fő játékciklus:
[35] a képkocka törlése
[36] a hátralévő távolság megjelenítése a képernyőn
[37-40] a kövek kirajzolása (még akkor is, ha nem férnek el a képernyőn - az egyszerűség kedvéért)
[42] a sprite aktuális animációs képkockájának kirajzolása
Ha részletekre van szükséged arról, hogyan működik a drawImage, kattints ide
[44-46] ha a mutatót (egér/érintés) lenyomva tartják, a bot hossza nő
[47-51] ha a bot dől, a szög növelése.
[49-50] ha teljesen leesett, a játékmód "run"-ra (futás) vált
[52-80] ha a 'run' (futás) módban vagyunk:
[53-54] az eltolás és a futás hosszának növelése
[55] a sprite képkocka minden 2. animációs ciklusban vált
[56-57] ha elértük az animációs sorozat végét a sprite lapon, visszaugrás az elejére
[58-62] ha a futás hossza eléri a bot végét, a bot hosszának, szögének, futásának visszaállítása és váltás 'wait' (várakozás) módra
[63-74] ellenőrzés, hogy kőre érkeztünk-e:
[63] feltételezzük, hogy üres térre érkeztünk
[64-65] a bajnok koordinátáinak összehasonlítása minden kővel
[66] ha a bajnok kőre érkezett, a [63]-as pesszimista feltételezés korrigálása
[67] a currentStone (aktuális kő) kiszámítása
[68-71] ha elértük az utolsó követ, nyertél!
[75-78] ha a bajnok üres térre érkezett, váltás gameOver módra és az esés póz megjelenítése
[81-87] a 'gameOver' módban:
[82-84] ha vesztettél, leesel
[85-86] ha nyertél, nyertél.
[88-89] a bot végpontjának koordinátáinak kiszámítása
[90-93] a bot kirajzolása
[94] a következő animációs képkocka indítása

[97-107] ha a képernyőre kattintanak/hozzáérnek:
[98-101] ha várakoztunk, átváltunk 'pointerdown' (lenyomás) módra
[102-105] ha 'gameOver' módban voltunk, a játék újraindul
[108-111] ha felengedik a mutatót és 'pointerdown' módban voltunk, átváltunk 'stickFall' módra
[112] a játék inicializálása
[113] az animáció indítása

Jó szórakozást a játékhoz!

Következő JavaScript oktatóanyag:

Ünnepeljünk tűzijátékkal - egyszerű JavaScript oktatóanyag