JS OOP Frogger Game Task #450

franchukv · 2022-09-05T18:36:06Z

JS OOP Frogger Game

Demo | Code base

The code is submitted in a dedicated feature branch.

Only code files are submitted.

Fixed all bugs or defects which other students received:

Now enemies don't 'blink' when creating.
Now user visually can see that he crossed the road successfully.

Please, review.

github-actions · 2022-09-05T18:58:59Z

Hey!

Congratulations on your PR! 😎😎😎

Let's do some self-checks to fix most common issues and to make some improvements to the code before reviewers put their hands on the code.

Go through the requirements/most common mistakes listed/linked below and fix the code as appropriate.

If you have any questions to requirements/common mistakes feel free asking them here or in Students' chat.

When you genuinely believe you are done put a comment stating that you have completed self-checks and fixed code accordingly.

Also, be aware, that if you would silently ignore this recommendation, a mentor can think that you are still working on fixes. And your PR will not be reviewed. 😒

Frogger Arcade Game -- JS OO exercise check list

Relates to Object-Oriented JavaScript task.

Check-list - definition of done

Universal recommendations:

Give variables and functions meaningful names. Avoid generic names like item, element, key, object, array or their variations. Exception: helper functions that are specifically and intentionally designed to be multipurpose.
Function names should start with a verb as they denote actions; variables are normally nouns; boolean variables/functions start with is, does, has etc; variable containing multiple entities and functions returning lists contain entity name in plural form.
Have consistent code style and formatting. Employ Prettier to do all dirty work for you.
Use common sense or seek for an advice whenever requirements look ambiguous or unclear.

Also take a note of the requirements above and follow them in all your future projects.

By the way, you may proceed to the next task before this one is reviewed and merged.

Sincerely yours,
Submissions Kottachecker 😺

franchukv · 2022-09-05T19:32:01Z

Self-check done.

stale · 2022-09-19T20:00:46Z

This issue has been automatically marked as stale because there were no activity during last 14 days. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

А. Чому так?
Найбільш розповсюджена причина: Студент не реагує на коментарі змінами коду і не задає запитань через брак часу або зміну життєвих пріоритетів. Покинуті піари відволікають менторів. Коли у студента з'явиться час, він/вона зможе перевідкрити той самий піар і продовжити роботу.

Б. Що робити, якщо в піарі нема оновлень, оскільки не зрозуміло, що треба зробити?
Варіант 1. Задати питання в самому PR.
Варіант 2. Задати питання в студентському чаті.

В. А якщо я все зробив(ла) і це ментор не рев'юває мої зміни?

Переконайся, що ти відреагував(ла) на всі коментарі або кодом, або запитаннями, або відповідями. Напиши в PR і в чаті, що чесно вважаєш, що все зроблено і попроси повторне рев'ю. Якщо щось не зрозуміло, задай запитання.
Реагуй на коментарі як менторів, так і інших учасників, включаючи ботів.
Не ігноруй прохання типу * "Let's do some self-checks ..." * "Go through the checklist below..." * "mark fulfilled requirements..." * "if you would silently ignore this recommendation, a mentor may think that you are still working on fixes"
навіть якщо вони написані ботом. Боти помічники і ментори покладаються на те, що прохання і пропозиції бота дотримуються.
Не лінись піти по лінках в коментарях, погуглити термінологію та скористатись Google Translate.
Можливо, у менторів склалися інші пріоритети через роботу, сімейні обставини і т.п. В такому разі, якщо ти зробив(ла) рекомендоване вище, то волай в чаті, що PR позначений stale, наче, все зроблено, а ментори чомусь не реагують - рятуйте!

Г. Хіба недостатньо того, що я додав(ла) коміт із змінами?
Часто буває так, що бачиш новий коміт, ідеш перевіряти, змін багато, доводиться перечитувати весь код. А потім з'ясовується, що одна невеличка зміна "відкладена на потім" чи з'являється ще один коміт і знов треба перечитувати все. Любіть нас, спілкуйтеся з нами - і ми відповімо повною взаємністю.

Традиційна пропозиція: задай питання по вищенаписаному в студентському чаті.

OleksiyRudenko

@franchukv pleas double-check yourself against requirements.
Feel free asking specific questions in Students' chat if anything is not clear.

OleksiyRudenko · 2022-09-20T17:03:08Z

submissions/franchukv/js-oop-frogger/app.js

+Enemy.prototype.setStartEnemiesPosition = function () {
+    for (let i = 0; i < 3; i++) {
+        let y = i * TILE_HEIGHT + 50;
+        let x = i * -TILE_WIDTH;
+        allEnemies.push(new Enemy(x, y));
+    }
+};


Class should handle its instances. Class is designated to handle a single instance.
Also from the check-list:

classes do not refer to any global variables, like global variable player, which is an instance of Player class
(referring to global constants and globals provided by the gaming platform like Resources is OK);
Hint: pass Player instance as an argument to every enemy.

The code has this issue in the fragments below.

With hope that I correctly understand this requirement, I fixed this. Please review again.

OleksiyRudenko

@franchukv need another iteration of fixes.

OleksiyRudenko · 2022-09-29T18:40:11Z

submissions/franchukv/js-oop-frogger/app.js

+    for (let i = 0; i < 3; i++) {
+        let y = i * TILE_HEIGHT + 50;
+        let x = i * -TILE_WIDTH;
+        allEnemies.push(new Enemy(x, y, player));


The problem with allEnemies is exactly the same as it was with player.
You need to recognize the problems of the same class.
Not illegal but a bit wierd to let an enemy to add itself to a naturally external container.
We can call this behavior "enlist yourself in squad" here, but normally we want entities being decoupled from containers for them. This way we separate concerns (management of an individual vs management of a set of individuals).
You may keep this as an Enemy's method, but need to solve global variable reference problem.

Also player here is a global variable. Do not expect mentors to red-pen problems of the same class.

Okay, now I understand what does mean 'illegal' variables in this context. Rewrote app, please review again)

OleksiyRudenko · 2022-09-29T18:40:35Z

submissions/franchukv/js-oop-frogger/app.js

+        )
+    ) {
+
+        player.resetPlayerPosition();


Check your code for "illegal" global variables.

Checked and fixed

OleksiyRudenko · 2022-09-29T18:41:32Z

submissions/franchukv/js-oop-frogger/app.js

+};
+
+const allEnemies = [];
+const enemy = new Enemy();


WHy do we need this?

We don't need this, fixed

OleksiyRudenko · 2022-09-29T18:43:57Z

submissions/franchukv/js-oop-frogger/app.js

+const TILE_HEIGHT = 83;
+const TILE_WIDTH = 101;
+const ENEMY_SPEED = 80;
+const PLAYER_STAT = {


What does "STAT" mean?
Do not use abbreviations that are not conventional in software development.

It means "characteristics", just a wrong naming, fixed

OleksiyRudenko · 2022-09-29T18:44:54Z

submissions/franchukv/js-oop-frogger/app.js

+    this.width = 80;
+    this.height = 40;


Looks like enemy and player share some features.

Hmm, yes, but only 'height', not sure that a reason to create parent class for them or a variable which will contains their equal value.

Setting constants is yet another way to keep similar things in sync.

P.S. Shared properties and behaviour is a good enough reason to have a base class to encapsulate behaviour and properties handling. We just do not focus on this in this task. Just "a really-really nice to have". In OOP Exercise there are no excuses.

Okay, got it, thanks.

Please review again, I rewrote the app using constants.

OleksiyRudenko

@franchukv pretty well done!
Let's add some clarity.
Code is written for other people.

OleksiyRudenko · 2022-10-02T12:19:09Z

submissions/franchukv/js-oop-frogger/app.js

+    ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
+};
+
+const Enemy = function ({ size }, enemy, player) {


Function declaration says that the function expects and enemy as one of the parameters.
Is it actually an instance of class Enemy expected here?

If I understood the question right, the answer will be: actually no, we expect basis properties of 'enemy' for creating an instance of class Enemy.

Anyway, renamed.

OleksiyRudenko

@franchukv yet another thing.

OleksiyRudenko · 2022-10-02T12:21:01Z

submissions/franchukv/js-oop-frogger/app.js

+const allEnemies = [
+    new Enemy(EMENIES_CONF, EMENIES_CONF.enemy[0], player),
+    new Enemy(EMENIES_CONF, EMENIES_CONF.enemy[1], player),
+    new Enemy(EMENIES_CONF, EMENIES_CONF.enemy[2], player),
+];


As a peer developer I am tasked to add 20 more enemies.
Adding 20 more nearly identical rows of code is a no-go.
Can we make this code DRYer?

Yes, we can use loop into 'addEnemiesToInitArray' function to add instance of enemies from 'ENEMIES CONF.enemy' to 'allEnemies'.

Let's make it.

2. Added function 'addEnemiesToInitArray'

2. Now user visually can see that he crossed the road successfully.

OleksiyRudenko

@franchukv let's polish it in order to practise best practices in software development.

OleksiyRudenko · 2022-10-05T14:09:36Z

submissions/franchukv/js-oop-frogger/app.js

+function addEnemiesToInitArray() {
+    ENEMIES_CONF.enemies.forEach((enemy) => {
+        allEnemies.push(new Enemy(ENEMIES_CONF, enemy, player));
+    });
+}


Extension to the requirement re global variables. It is good to avoid global variables as much as possible.
Well designed function relies on explicitly passed parameters only.
Read about pure functions to learn why.
You do not need to fix this in this code.

OleksiyRudenko · 2022-10-05T14:11:03Z

submissions/franchukv/js-oop-frogger/app.js

+        width: 40
+    },
+    position: {
+        x: 202,


You could calculate this from TILE_WIDTH programmatically. So whenever tile width changes, this param changes accordingly and automagically.

OleksiyRudenko · 2022-10-05T14:13:27Z

submissions/franchukv/js-oop-frogger/app.js

+        width: 80
+    },
+    enemies: [{
+        x: -80,


You could pass repeating value at new Enemy moment.
E.g. ~~new Enemy({ x: -80, ...ENEMY_CONF}, ....)~~ new Enemy(size, {x: WHATEVER_CONST, ...enemy} player). Upd: corrected due to misread of not obvious code.

Would make enemies config 33% shorter. This would also help to change the number in a single place should we need to do this.

OleksiyRudenko · 2022-10-05T14:14:12Z

submissions/franchukv/js-oop-frogger/app.js

+    this.checkCollision();
+
+    if (this.x >= CANVAS_WIDTH) {
+        this.x = -80;


Constants help make code DRY and numbers semantically comprehensible.

OleksiyRudenko · 2022-10-05T14:27:57Z

submissions/franchukv/js-oop-frogger/app.js

+
+function addEnemiesToInitArray() {
+    ENEMIES_CONF.enemies.forEach((enemy) => {
+        allEnemies.push(new Enemy(ENEMIES_CONF, enemy, player));


btw, why do we send all enemies configuration to every enemy?
I see that size is extracted at receiving party. But is would much more obvious if we use the opportunity to send exactly what is needed

And enemy here, actually, is not an instance of Enemy but rather enemy physical parameters.
It would be great if this was clear from reading the code without need to scroll up to class definition to understand what is going on in this line of code. On big codebases it would be a real pain.

OleksiyRudenko · 2022-10-05T14:32:48Z

submissions/franchukv/js-oop-frogger/app.js

+const ENEMIES_CONF = {
+    size: {
+        height: 40,
+        width: 80


Any correlation with -80?

OleksiyRudenko · 2022-10-05T14:34:07Z

submissions/franchukv/js-oop-frogger/app.js

+    },
+    {
+        x: -80,
+        y: 220,


Can y be calculated from row number?

OleksiyRudenko · 2022-10-05T14:35:59Z

submissions/franchukv/js-oop-frogger/app.js

@@ -0,0 +1,136 @@
+const CANVAS_HEIGHT = 606;
+const CANVAS_WIDTH = 505;


Looks like there is correlation between tile width and canvas dimensions. Let computer do the calcs.

1. Rewrote game engine for visual demonstration of new features (I'm not sure is it okay or not for this task). 2. Added simple functionality to choose size of game desk. 3. Now all math calculating by a computer. 4. Enemies added automatically into game based on game desk size.

franchukv · 2022-10-07T12:24:02Z

I did a little junior magic, and I'm not sure that everything is ok, please review..)

OleksiyRudenko

@franchukv great job!
Employ passing whatever a function needs to deal with as arguments to functions and return from functions whatever they do rather than directly use/change global variables.
It makes code cleaner.

OleksiyRudenko · 2022-10-09T13:45:29Z

submissions/franchukv/js-oop-frogger/app.js

+const allEnemies = [];
+createEnemies(ENEMIES_CONF, TILE_HEIGHT, TILE_WIDTH);


const allEnemies = createEnemies(...) would be more obvious as it would self-explain the effect of createEnemies

Finished 'JS OOP Frogger Game'

aee3d8b

OleksiyRudenko added the task-Frogger label Sep 5, 2022

stale bot added the 💤 Stale label Sep 19, 2022

OleksiyRudenko added the self-check-done Student confirmed that self-checks against requirements/common-mistakes are done label Sep 20, 2022

stale bot removed the 💤 Stale label Sep 20, 2022

OleksiyRudenko requested changes Sep 20, 2022

View reviewed changes

now classes don't refer to any global variables

4c26565

franchukv requested a review from OleksiyRudenko September 29, 2022 08:25

OleksiyRudenko requested changes Sep 29, 2022

View reviewed changes

rewrote app

569160f

franchukv requested a review from OleksiyRudenko September 30, 2022 08:29

rewrote app after repeated self-check

44c939d

OleksiyRudenko added the Stage0.1 label Oct 1, 2022

OleksiyRudenko self-assigned this Oct 1, 2022

OleksiyRudenko requested changes Oct 2, 2022

View reviewed changes

1. Renamed 'enemy' arguments to 'enemyProperties'

feb2b0b

2. Added function 'addEnemiesToInitArray'

franchukv requested a review from OleksiyRudenko October 3, 2022 05:37

franchukv added 2 commits October 3, 2022 08:43

added a few semicolons

dee91b1

1. Now enemies don't 'blink' when creating.

74aafcc

2. Now user visually can see that he crossed the road successfully.

OleksiyRudenko added the UAT-done Student confirmed User Acceptance Tests are done and collected feedback is processed label Oct 3, 2022

OleksiyRudenko requested changes Oct 5, 2022

View reviewed changes

OleksiyRudenko reviewed Oct 5, 2022

View reviewed changes

submissions/franchukv/js-oop-frogger/app.js Outdated

},

{

x: -80,

y: 220,

Copy link

Member

OleksiyRudenko Oct 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can y be calculated from row number?

OleksiyRudenko reviewed Oct 5, 2022

View reviewed changes

franchukv requested a review from OleksiyRudenko October 7, 2022 12:24

OleksiyRudenko approved these changes Oct 9, 2022

View reviewed changes

OleksiyRudenko merged commit a896250 into kottans:main Oct 9, 2022

		@@ -0,0 +1,136 @@
		const CANVAS_HEIGHT = 606;
		const CANVAS_WIDTH = 505;

		const allEnemies = [];
		createEnemies(ENEMIES_CONF, TILE_HEIGHT, TILE_WIDTH);

JS OOP Frogger Game Task #450

JS OOP Frogger Game Task #450

Conversation

franchukv commented Sep 5, 2022 • edited Loading