If you're seeing this message, it means we're having trouble loading external resources on our website.

Եթե գտնվում ես վեբ զտիչի հետևում, խնդրում ենք համոզվել, որ *.kastatic.org և *.kasandbox.org տիրույթները հանված են արգելափակումից։

Հիմնական նյութ

Անտառը

Այս խաղը դասական 2D «կողմնային շարժում կատարող» է, ինչը նշանակում է, որ մենք կողքից նայում ենք, և խաղի հերոսը տեղաշարժվում է առաջ կամ հետ: Հերոսը միշտ պետք է էկրանի կենտրոնում լինի, այդ պատճառով մենք հերոսի հետևում շարժում ենք հետնապատկերը՝ այնպիսի տպավորություն ստեղծելով, կարծես հերոսն է շարժվում: Սա մի հնարք է, որը միշտ աշխատում է:
Սկսիր՝ պատկերելով այն մասերը, որոնք շարժում ցույց չեն տալիս՝ կապույտ երկինքը և շագանակագույն գետինը:
draw = function() {
    background(227, 254, 255);
    fill(130, 79, 43);
    rect(0, height*0,90, width, height*0{,}10);
    // ...
}
Հիմա կողմնային շարժում կատարող տեսք ստանալու համար image գրադարանից ավելացրու խոտ՝ օգտագործելով խոտի նկարը: Այս շարժվող միջավայրը ստեղժելու ձևերից մեկը մեր կտավը 3000 պիքսել լայնությամբ պատկերելն է, դա մեր մակարդակի լայնությունն է, և այդ 3000 պիքսելը զբաղեցնելու համար պետք է պատկերել խոտի բավարար միավորներ՝ ամեն անգամ դրանք տեղաշարժելով: Ամեն դեպքում դա այնքան էլ արդյունավետ չէ, իսկ ծրագրավորման խաղերում մենք մեծ տեղ ենք տալիս արդյունավետությանը: Փոխարենը խոտի նկարը կդարձնենք "tile" և "snake": Միայն կպատկերենք այնքան, որքան հարկավոր է 400 պիքսել էկրանն անցնելու համար, և երբ այն ավարտվի էկրանի ձախ կողմից, անմիջապես կհայտնվի էկրանի աջ կողմում, և անընդհատ նույնը կրկնելով կշարունակենք:
Դրա համար սկզբում կստեղծենք խոտի միավորների նախնական դիրքի զանգվածը:
var grassXs = [];
for (var i = 0; i < 25; i++) {
    grassXs.push(i*20);
}
Հետո մեր պատկերման ցիկլում կպատկերենք յուրաքանչյուրին.
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0,85, 20, 20);
}
Սա անշարժ տեսարանի համար լավ է, բայց մեզ պետք է, որ այն շարժվի: Կարող ենք յուրաքանչյուր խոտի դիրքից ամեն անգամ մեկը հանել՝ այն տեղաշարժելով 1 պիքսել ձախ:
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0,85, 20, 20);
    grassXs[i] -= 1;
}
Հիմա խոտը շարժվում է, սակայն, ի վերջո, կանհետանա, քանի որ x-ի արժեքներն ավելի ու ավելի բացասական են դառնում: Հիշիր, մենք ուզում ենք սալիկները "snake" անել, ուզում ենք դրանք բերել կտավի աջ կողմ, երբ դրանք անհետանում են ձախ հատվածից: Դրա համար ստուգիր, որ էկրանից ամբողջովին դուրս ես եկել (հիշիր, նկարները պատկերվում են ձախ կողմի վերևից) և x-ի արժեքը նշանակիր կտավի լայնությունը.
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0,85, 20, 20);
    grassXs[i] -= 1;
    if (grassXs[i] <= -20) {
        grassXs[i] = width;
    }
}
Այս ամենն ընդհանրացնելով՝ ունենք մի կուղբ, որը ցատկոտելու ընթացքում կարծես շարժվում է: Հրաշալի՜ է:
Լավ, հիմա ունենք side-scrolling/կողմնային շարժում կատարող միջավայրում ցատկոտող մի կուղբ: Սակայն կուղբն այնտեղ ոչինչ չի կարող անել: Պետք է ավելացնենք փայտիկներ, որպեսզի կուղբը ցատկի և հավաքի:
Արի մի քիչ մտածենք մեր փայտիկների մասին, քանի որ պետք է որոշենք, թե ինչպես դրանք ծրագրավորել:
  • Յուրաքանչյուր փայտիկ ունի x և y դիրքեր: Հավանաբար ցանկանում ենք x դիրքերը որոշակի քանակով բաշխված լինեն (հավանաբար հաստատուն կամ պատահական ինչ-որ միջակայքում) և ցանկանում ենք y դիրքերը պատահականեցված լինեն ինչ-որ միջակայքում, այսպիսով օգտատերը կարող է կառավարել կուղբի ցատկերը և վայրէջքները:
  • Փայտիկները պետք է ունենան նույն շարժման տեսքը, ինչ որ խոտերն ունեն, սակայն նրանք չպետք է կատարեն օձ: Երբ փայտիկն անհետանում է էկրանից, այն մեկընդմիշտ հեռանում է:
  • Յուրաքանչյուր մակարդակում պետք է լինի փայտիկների որոշակի քանակ, իսկ ինչ-որ պահից սկսած՝ փայտիկները պետք է վեջանան:
Փայտիկները ծրագրավորելու շատ ձևեր կան, բայց դրանք կարծես բավականին բարդ են, այդ պատճառով արի այն մոդելավորենք մի օբյեկտով, ինչպես մոդելավորեցինք կուղբի կերպարը.
var Stick = function(x, y) {
    this.x = x;
    this.y = y;
};

Stick.prototype.draw = function() {
    fill(89, 71, 0);
    rect(this.x, this.y, 5, 40);
};
Հետո, մինչև մեր խաղը կսկսի, ինչպես մեր կուղբի համար ստեղծեցինք, այնպես էլ արի ստեղծենք 40 փայտիկի զանգված՝ հաստատուն հեռավորության և պատահական y-ի հետ միասին:
var sticks = [];
for (var i = 0; i < 40; i++) {  
    sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}
Հիմա կարող ենք պատկերել փայտիկները այնպես, ինչպես խոտն էինք պատկերել, միայն առանց մի կողմից մյուսը տեղափոխելու:
for (var i = 0; i < sticks.length; i++) {
    sticks[i].draw();
    sticks[i].x -= 1;
}
Ահա փայտիկները՝ այդ կոդով պատկերված: Փորձիր ցատկեր անել: Ի՞նչ տեղի կունենա: Ոչինչ: Շուտով դա էլ կկարգավորենք:

Ուզո՞ւմ ես միանալ խոսակցությանը։

Առայժմ հրապարակումներ չկան։
Անգլերեն հասկանո՞ւմ ես: Սեղմիր այստեղ և ավելի շատ քննարկումներ կգտնես «Քան» ակադեմիայի անգլերեն կայքում: