ძირითადი მასალა

კომპიუტერული პროგრამირება

კურსი: კომპიუტერული პროგრამირება > თემა 4

გაკვეთილი 4: ორგანზომილებიანი თამაშის შექმნა: მხტუნავი თახვი

ტყე - გარემო

ეს თამაში არის კლასიკური 2-განზომილებიანი „საიდ-სკროლერი": ეს ნიშნავს, რომ მას გვერდიდან ვუყურებთ და მოქმედი გმირი მასში მხოლოდ წინ ან უკან მოძრაობს. თუმცა, ჩვენ გვინდა, რომ გმირი ყოველთვის ეკრანის ცენტრში იყოს, ამიტომ ხილვადი მოძრაობის სიმულაციას ვაკეთებთ ფონის გადაადგილებით. ეს ხრიკია, მაგრამ ის მუშაობს!

დასაწყისისთვის, მოდით, დავხატოთ მხოლოდ ის ნაწილები, რომლებიც არ მოძრაობენ. ლურჯი ცა და ყავისფერი მიწა:

draw = function() {
    background(227, 254, 255);
    fill(130, 79, 43);
    rect(0, height*0{,}90, width, height*0{,}10);
    // ...
}

ახლა კი, „საიდ-სკროლერის“ ვიზუალის შესაქმნელად დავამატოთ ბალახი. ამისათვის გამოვიყენოთ ბალახის სურათი image ბიბლიოთეკიდან. ამ მოძრავი გარემოს შექმნის ერთ-ერთი გზა არის წარმოდგენა იმისა, რომ ჩვენი სამუშაო სივრცის სიგანე არის 3 000 პიქსელი, ამ სიგანის იყო ჩვენი ეტაპი, და დავხატოთ ბალახის იმდენი ნაწილი, რამდენიც ჩაეტევა ამ 3000 პიქსელში, ყოველ ჯერზე გადავიტანოთ ისინი. მიუხედავად ამისა, ეს არც ისე ეფექტურია, თამაშების პროგრამირებისას ეფექტური მუშაობა კი ძალიან მნიშვნელოვანია. ამის ნაცვლად ჩვენ დავხატავთ ზუსტად იმდენს, რამდენიც გვჭირდება 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-ის მნიშვნელობების კლებასთან ერთად ის საბოლოოდ გაუჩინარდება. გახსოვდეთ, ჩვენ გვსურს, რომ ნაკვეთები მარჯვენა მხარეს გაჩნდნენ მაშინვე, როცა ისინი მარცხენა მხარეს გასცდებიან. ამის გასაკეთებლად შევამოწმებთ, ეკრანს საკმარისად გავცდით თუ არა (გახსოვდეთ, რომ ჩვენი სურათები იხატება ზედა მარცხენა კუთხიდან) და თუ გავცდით, მაშინ 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;
    }
}

ამ ყველაფრის შეჯამების შემდეგ მივიღეთ თახვი, რომელიც ჰგავს მოძრავს, როცა დახტის. სასწაულია!

კარგი, გვყავს თახვი, რომელიც დახტის საიდ-სკროლინგის გარემოში. მაგრამ აქ თახვს საქმე არ აქვს! უნდა დავამატოთ ჯოხები, რათა თახვი ახტეს და შეაგროვოს ისინი.

მოდით, ვიფიქროთ ჩვენს ჯოხებზე, რადგან უნდა მოვიფიქროთ, როგორ დავაპროგრამოთ ისინი:

თითოეულ ჯოხს აქვს 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;
}

აი, ისიც, ამავე კოდში ჯოხების დახატვით. სცადეთ მათთვის ახტომა! რა ხდება? არაფერი! ამას მალე გავასწორებთ...

დავალაგოთ:

გსურთ, შეუერთდეთ დისკუსიას?

შესვლა

პოსტები ჯერ არ არის.

გესმით ინგლისური? დააწკაპუნეთ აქ და გაეცანით განხილვას ხანის აკადემიის ინგლისურენოვან გვერდზე.