M9 | L5 – Happy beaver I

Astăzi vom afla despre:

  • Crearea caracterului

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Happy Beaver

Exemplu: https://www.khanacademy.org/computer-programming/happy-beaver-01/5858694108495872

Crearea caracterului

Să începem prin a ne face personajul, castorul sălbatic. Atunci când creăm un personaj de joc, ar trebui să ne gândim la ce proprietăți și comportamente ar trebui să aibă. De exemplu, castorul nostru ar trebui să țină evidența poziției ei x și y și a câte bastoane a adunat. De asemenea, are nevoie de două comportamente: hopul, care o face să sară puțin în sus și să cadă, ceea ce o face să cadă puțin în jos.

Iată cum ar putea arăta asta, ca obiect:

var Beaver = function(x, y) {

    this.x = x;

    this.y = y;

    this.img = getImage(„creatures/Hopper-Happy”);

    this.sticks = 0;

};

Beaver.prototype.draw = function() {

    image(this.img, this.x, this.y, 40, 40);

};

Beaver.prototype.hop = function() {

    this.img = getImage(„creatures/Hopper-Jumping”);

    this.y -= 5;

};

Beaver.prototype.fall = function() {

    this.img = getImage(„creatures/Hopper-Happy”);

    this.y += 5;

};

var beaver = new Beaver(10, 300);

beaver.draw();

Acest program nu face o treabă foarte bună la verificarea diferitelor comportamente, totuși – nu este animat, așa că o putem vedea doar într-o stare de a fi. Să adăugăm o funcție de extragere, astfel încât să putem spune castorului să facă diferite lucruri în funcție de interacțiunea utilizatorului. Pentru acest joc, vrem ca castorul să sară ori de câte ori utilizatorul apasă tasta spațiu. Acest lucru poate fi implementat destul de simplu:

draw = function() {

    background(255, 255, 255);

    if (keyIsPressed && key.code === 32) {

        beaver.hop();

    } else {

        beaver.fall();

    }

    beaver.draw();

};

Acesta este un cod destul de eficient, dar dacă l-am rula, ar trebui să ne apăsăm continuu bara de spațiu pentru a împiedica castorul să cadă de pe fața pânzei pentru totdeauna, să nu ne mai întoarcem niciodată. Ar trebui să restricționăm valorile y la o valoare rezonabilă, pentru a menține castorul în ecran. Acest lucru este obișnuit în jocuri, pentru a păstra personaje în interiorul „lumii jocului”. Am putea face acest lucru folosind constrain în funcția de extragere, trecându-i un min și max adecvat:

this.y = constrain(this.y, 0, height-50);

Acum, iată programul nostru, cu un castor de salt și cădere controlat de tastatură. Joacă-te puțin cu el!

https://www.khanacademy.org/computer-programming/happy-beaver-01/5858694108495872