Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Classic Frogger Game #594

Merged
merged 15 commits into from
Oct 5, 2022
Next Next commit
minimum viable product
  • Loading branch information
YuraZagor committed Sep 17, 2022
commit 088a852d8d54f6243a7db7489dd3d20b378360ce
83 changes: 83 additions & 0 deletions submissions/YuraZagor/Frogger/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
let allEnemies = []
let allSpeeds = [200, 250, 350]
let rangeY = [73, 156, 239]

function Player(x, y, sprite) {
this.x = x;
this.y = y;
this.sprite=sprite;
};
Player.prototype.render = function() {
ctx.drawImage(Resources.get(this.sprite), this.x, this.y)
};
Player.prototype.update = function() {
};
let player = new Player ( 202, 405, 'images/char-boy.png' )

function Enemy(x, y, sprite, speedX) {
Player.call(this, x, y, sprite);
this.speedX = speedX;
};

Enemy.prototype = Object.create(Player.prototype);

Enemy.prototype.update = function(dt){
this.x += this.speedX * dt;
if (this.x > 505){
this.x = -55
this.speedX = allSpeeds[Math.floor(Math.random()*3)]
}
if (this.y === player.y){
if ((this.x - player.x < 40 ) && (player.x - this.x < 40 )) {
player.x = 202;
player.y = 405;
}

}
};

function addBug() {
rangeY.forEach (
(levelMark)=> allEnemies.push( new Enemy(0, levelMark, 'images/enemy-bug.png', allSpeeds[Math.floor(Math.random()*3)] ))
)
};

console.log(player)
player.handleInput = function (direction) {
Copy link
Member

Choose a reason for hiding this comment

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

One of the purposes of OOP is that class defines all behaviors of the class.
Please explain why this approach was taken.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

My logic then was as follows: this kind of behavior is typical only to player object. As in this case we do not need this functionality in Player-prototyped enemy-objects , so I did not prototype it in Player.
Also, TBH, I am a newbie who tryed ways - and this one worked. Re-wrote with Player.prototype

Copy link
Member

Choose a reason for hiding this comment

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

this kind of behavior is typical only to player object
That's correct. Also true is that any method on Player prototype is typical to player object.

player.propertyName = function () worked, as expected. We still can have functions as object properties.

But what if we have a multiplayer game? OOP helps to have objects blue-prints and avoid code duplication.

Oh, I see. You based enemies on Player.
So in fact Player is an "any" character.

The good thing was that you came up with having a base class for shared properties and behaviour.
The improvemnt would be to have both Enemy and Player class extend such base class with their own specifics.
Are you up to improve your code accordingly?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, that way it makes more sense and now I was able to solve ' player.x = playerStartX' omitting .

Done

switch (direction) {
case 'left':
if (this.x > 0){
this.x -= 101 };
break;
case 'up':
this.y -= 83;
if(this.y < 50){
this.x = 202;
this.y = 405;
}
break;
case 'right':
if (this.x < 400){
this.x += 101};
break;
case 'down':
if (this.y < 400){
this.y += 83 };
break;
default:
break;
};
};

document.addEventListener('keyup', function(e) {
const allowedKeys = {
37: 'left',
38: 'up',
39: 'right',
40: 'down'
};
player.handleInput(allowedKeys[e.keyCode]);
});

addBug()