Assessment: Bouncing Balls

[drgaud]

Hello all,

I have completed the assessment for the Bouncing Balls game, MDN Assessment page. I had alot of fun making this game.

I added a few extra features, such as:

1. Adding an event listener to the mouse so it can also move the evil circle
2. Allowed for the use of the arrow pad to control the evil circle
3. Added a game reset feature.

I was hoping if it was possible to have my assessment reviewed.

Here is the link to the JSFiddle .

I would like to add to this game, a start dialogue, a timer: to record the time against previous times, and increasing levels of difficulty…also I’m going to take the script and redo it using ES6 classes; Ill post it back here when I am done.

Hopefully what I am currently submitting would be enough, please let me know what you think, I have annotated the script using JSDocs in places.

Many, many, many…many Thanks =)

[gojanpaolo (Jan Paolo Go)]

@drgaud Fun game! I don’t have the knowledge to assess your code yet but I did play the game and after finishing it, I got stuck on the “Congratulations… Play Again” dialog box. Pressing OK does not seem to work. I am not sure if it’s because of JSFiddle or Chrome.

[chrisdavidmills]

@drgaud well done — this is absolutely fantastic! It is a fun little demo to code up in the first place, and I love to see people add their own features to it.

FYI there is an ES Class version of the demo here: https://github.com/mdn/learning-area/tree/master/javascript/oojs/assessment-es-class. Hope it helps.

[drgaud]

Thanks man, I really appreciate that feedback.

I found, converting it to classes was challanging untill I had a penny drop in undertanding objects. I kinda understand it alot better now, the role of this how it defines the scope of the object as to what properties it calls and where it calls them. am I right in saying that this operates as a link-reference to the parent class that the subclasses extend from (only if super() is applied), it also can define where the properties are applied as in

    function foo(){
                  this.bar = 'its not foobar its FUBAR!'
   }
   foo.bar // its not foobar...

It feels like everywhere I see JS code I see objects, and I can understand the way they all play with each other better.

Which brings me to my next question, is functional programming just simplified abstraction of functions where set input => defined and expected output. Is it misleading to presume that Functional programming in Javascript is a completely new and super imposed programming paradigm on the language when from my observations, it is intrinsically multi-paradigm, as in Objects can define the patterns and proprieties along with the methods. Methods can be written in a functional way, so the two exist, symbiotically I am sorry to ask this, but its tripping me up, kinda studying the FP atm, and finding some of the rhetoric around it somewhat misguiding.

Hope your keeping well,
=)

[drgaud]

I think its JSFidlle, I had to disable the automatic reload of sites Js engine every time it runs it s setInterval() do I order to reload the page you have to hit run again in the corner to reload the script.
The next one Im going to host on github, I think it would be better for it as it would help mitigate alot of issues that hosted code-editors have when it comes to shared resources, filing systems, executing the scripts and other cors issues that you can face.
Once I get it working Ill post a write up on it, so others can do the same if that is something that might be off interest.

Thanks for playing man, I really appreciate it, =)

[chrisdavidmills]

It’s funny, you know — I’ve never ever really studied functional programming, so I can’t really help you much here. I certainly wouldn’t say it is essential, although a number of people would likely disagree with me. I know some languages lend themselves better to FP than others, and who knows, I’ve probably bene doing a lot of it without realising

[drgaud]

@chrisdavidmills @gojanpaolo :

check out the new and improved Bouncing Balls Game .

I hope you enjoy the new and refined ES6 Bouncing Balls game, I did end up adding some more features to the game.
Its more twisted for starts.
Added Things like a countdown timer, I have given users a 60sec window to collect as many balls as they can.
I also added levels of increasing difficulty, a score counter and learnt a bit on sessionStorage in order to make the Personal Best recorder.

I would greatly appreciate any feedback on the game esp the code, I did run into some issues, and the voice in my head is saying that I have typed some of it up wrong, but I would like other opinions before I indulge that particular form of neuroticism.
As ever I have annotated the script with JSDocs for better use in VS code,(and general readability) here is a link to the GitHub Repo

Let me know of your Personal Best’s the highest score gets a pint.

mine is 63

Hope you enjoy the game
keep safe,

[chrisdavidmills]

@drgaud looks really exciting, nice work! I got 66, but then the number of balls released got really slow

Interestingly, it doesn’t seem to run in Firefox, but does in Chrome.

[drgaud]

Hey man, thats another pint I owe.
Ill work on that and hopefully figure out why that happened man, I have a feeling that I have written it wrong. i.e: In the animation() method I have called the instanciated objects and placed the methods on them. I think if I passed in the general objects as parameters instead of having them defined like object.draw() instead of blackHole.draw() . It might help, but when I think about it, it wouldn’t really pass the parser phase let alone get to execution.
Also there is a fair number of for loops that are in the script. Would this be a bottleneck in the script? if it is how could I go about reducing the complexity.
As I see it the code is fairly On^2.

[drgaud]

So it turns out the velocity that I had the balls ranged between was the reason why it would hang when it generated balls over 80+, I managed to sort that out and have had numbers of balls generated into the 1000+ with no further issue.

I havent been able to recreate the issue witht the firefox broswer as I have managed to get it working on my local machine.

there is one last thing I would like to do with this and that is to make it mobile friendly. But I would get round to that later, I have already procrastinated enough with this exercise,

[chrisdavidmills]

Nice work here. I wouldn’t call it procrastination — I’d call it learning.

[drgaud]

totally agree, Ill post back when I have it completed.

Thanks for the support man, really does help

[Peter_Wambua]

Hi, is there a need to add:
EvilCircle.prototype = Object.create(Shape.prototype);
Object.defineProperty(EvilCircle.prototype, ‘constructor’, {
value: EvilCircle
});

or
Ball.prototype = Object.create(Shape.prototype);

Object.defineProperty(Ball.prototype, ‘constructor’, {

value: Ball

});

yet we are not adding any methods in the prototype of the parent class Shape?