University Web Project - JSdiver: Part 2

24/10/24

I've made an adequate amount of progress with JSDiver since the first post. I'm writing this after getting home, and since I've been struggling to get Git access on my own machine due to University restrictions, for now, I can only work on the project on campus machines. It's a little limiting but at least it motivates me to leave the house.

For this reason, I'll be comfortably explaining the bugs/incomplete features instead of actually fixing them, as I can't fix them at the moment. I mean, I could go to campus right now, but it's late in the evening and I'm tired. I'll do it tomorrow...

The first sort of noticeable change is a few changes with graphics. There are more sprites on the sprite sheet, including more variants of the plane segment and more obstacles.



The menu now also displays your score after you die. It does ask you to submit it to the leaderboard, but you'd struggle with that as I've not actually implemented one yet. It's coming soon, I promise.



I've now also properly implemented the difficulty system. It now has a real influence on the rate at which enemies spawn. I still need to tweak the speed at which they move, as right now it feels like they move too slowly at the beginning, and speed up too quickly.

The biggest new feature I've created is what I'm currently just calling "big obstacles." I could probably be more creative - "sweeping" might make more sense, but big will do for now. What they do is they kind of wipe across an entire portion of the screen. It's partially inspired by the missiles in Jetpack Joyride, where there'll be a warning of where the missiles will be traveling before they're fired. The area in which the obstacle will be flashes red for a few seconds, before the obstacle (currently either a helicopter going up, or a plane traveling sideways) appears for a few moments. I haven't actually implemented the collision detection yet, as I was rushed away to a lecture, but I've already sort of schemed it out in my head. The rendering of them is a little odd, but I can probably fix it by tweaking coordinate values. I also REALLY want to make the helicopter look prettier.



Also, foreground clouds! Only because parallax effects are impressive.



Another important change I made was switching from `setInterval(main, 1000/60);` to just `requestAnimationFrame(main);`. I really should've used it from the start, though I'm pretty new to animation with JavaScript, so I guess I just got confused. I probably would've kept using it if not for Firefox being absolutely terrible at running the game with `setInterval()`. A problem which I didn't realize I had until getting home was that the speed of the game is now entirely reliant on execution speed as a result of this, which I for some reason didn't consider. In my defense, the campus machines are considerably weaker than what I have at home, so they ran at a much more reasonable speed. I'll just throw a frame limiter onto it once I have access, but if you decide to try the game on anything faster than an office PC, you may find it unplayably fast.

Speaking of playing it, I elected to put the game up for use now that it's actually playable. I'll probably have the speed thing sorted by this time tomorrow, but if you're somehow reading this within 24 hours of me posting it, try to play it on a weaker device...

For now, I'm putting it on my University page. If you find any problems I've not mentioned here, please E-mail me about them.