First Commit. Update readme. Flowchart in img folder #21
Conversation
assets/js/script.js
Outdated
| var counter = 1 | ||
|
|
||
| // constructor for all spawns | ||
| function Spawn(life, damageWhenExpire, effectHealth, effectAmmo, effectGrenade, timeToExpire, counterLink){ |
There was a problem hiding this comment.
Why are we not using a class method here?
| $spawn.attr('id', "s"+counter) | ||
| $spawn.addClass('spawn enemyEasy') | ||
| $spawn.css({ | ||
| "left": Math.floor(Math.random() * 1000), |
There was a problem hiding this comment.
Why don't you randomize the position in the constructor instead?
There was a problem hiding this comment.
My intention was to separate the functions that are HTML/CSS from the JS side of things.
For my constructor I only wanted to include 'game effect stats' that had nothing to do with the HTML and CSS side of things. This is mainly because I was hoping to add more variety to enemy stats in the future, for example adding scores, or making boss enemies that have more life and stay for longer but deal set damage every few seconds. I was worried adding CSS inside the constructor would make it look too messy.
For the setting of ID, Class, HTML and CSS side of things, I was hoping to chunk them in a separate function. I realise that it resulted in a lot of repetition for my spawnEnemyEasy(), spawnEnemyNormal() and all the rest. My solution would be to create a separate function named spawnDiv() which would group the repetitions and replace the repetitions with this function. This would allow the elimination of repetition and still keep the constructor clean imo.
|
Project Workflow: 3 / 5 Glow
Grow
Things to look out for
|
| @@ -1,0 +1,471 @@ | |||
| $(function() { | |||
|
|
|||
There was a problem hiding this comment.
If possible, declare variables first at the top of your scope.
assets/js/script.js
Outdated
| $gameOverlay.css({ | ||
| 'display': 'none' | ||
| }) | ||
| document.getElementsByClassName('gogo')[0].volume = 0.6; |
There was a problem hiding this comment.
You may replace this line $('.gogo.')[0].volume = 0.6. Why does that works but $('.gogo').volume doesn't work?
assets/js/script.js
Outdated
| countDown() | ||
| } | ||
|
|
||
| $('.easyStartBtn').on('click', () => { |
There was a problem hiding this comment.
You may move your eventListeners after the declarations of functions.
assets/js/script.js
Outdated
|
|
||
| function updatePlayerStats () { | ||
| playerStatsInterval = setInterval(() => { | ||
| var $playerHealth = $('.playerHealth') |
There was a problem hiding this comment.
What will be the difference if you put these line(100 - 103) in outer scope of function updatePlayerStats? What will be the advantage if we reduce the number of DOM accessing?
There was a problem hiding this comment.
Ah I see, putting the variables in the set interval scope will make unnecessary DOM accessing over and over again.
| checkEnemyExpire() | ||
| checkVictory() | ||
| checkLoss() | ||
| } |
| if(spawnList[i].timeToExpire <0){ | ||
| if(spawnList[i].damageWhenExpire > 0){ | ||
| playerStats.health = playerStats.health - spawnList[i].damageWhenExpire | ||
| document.getElementsByClassName('playerDamage')[0].volume = 0.8 |
| for (var i = spawnList.length -1; i > -1; i --) { | ||
| if(spawnList[i].life <= 0) { | ||
| $('div').remove('#'+spawnList[i].counterLink) | ||
| if (spawnList[i].effectHealth === -1) playerStats.health = playerStats.health -1 |
There was a problem hiding this comment.
you can do this playerStats.health -= 1
assets/js/script.js
Outdated
| // EVENTS --------------------------------------------- | ||
|
|
||
| // 3 easy, ammo refill | ||
| function event1(time) { |
There was a problem hiding this comment.
You may use better names for functions. :)
|
Project Workflow: 4 / 5 GlowVery fun game with sound and well-balanced modes. GrowNaming convention on some functions can be improved. Things to look out forES6 |
3 participants
Readme is updated.
Flowchart has two versions, one has better formatting. Delete other one in next commit.
Start work on coding game logic.