Author Topic: [HTML5/javascript] Platformer game  (Read 14289 times)

0 Members and 1 Guest are viewing this topic.

Offline ben_g

  • Hey cool I can set a custom title now :)
  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1002
  • Rating: +125/-4
  • Asm noob
    • View Profile
    • Our programmer's team: GameCommandoSquad
[HTML5/javascript] Platformer game
« on: July 07, 2015, 06:27:22 pm »
As you may have already seen or heard on IRC, I'm working on a platformer game.

At first, this game was meant as an exercise to learn javascript, but I liked it, so I continued working on it.
The point of the game is to get to the green square at the end of the level, while everything that's red is out there to kill you. It's a simple concept, but the game can be quite challenging in some areas.
Here's a screenshot:


You can play it here: http://velocitygames.tk/platformer.html The server we host it on doens't have a very good uptime though, so if it's down, just try again later.

To give you guys a challenge: here are my scores from when I was testing the score displaying code:

These aren't my best scores, but I did get a lot of practice while testing, so they probably aren't that bad either. Feel free to post your scores below.

Currently, there are 4 levels (including the tutorial), but more will be added later.

This topic is also posted on Codewalrus.
« Last Edit: July 07, 2015, 06:53:59 pm by ben_g »
My projects
 - The Lost Survivors (Unreal Engine) ACTIVE [GameCommandoSquad main project]
 - Oxo, with single-calc multiplayer and AI (axe) RELEASED (screenshot) (topic)
 - An android version of oxo (java)  ACTIVE
 - A 3D collision detection library (axe) RELEASED! (topic)(screenshot)(more recent screenshot)(screenshot of it being used in a tilemapper)
Spoiler For inactive:
- A first person shooter with a polygon-based 3d engine. (z80, will probably be recoded in axe using GLib) ON HOLD (screenshot)
 - A java MORPG. (pc) DEEP COMA(read more)(screenshot)
 - a minecraft game in axe DEAD (source code available)
 - a 3D racing game (axe) ON HOLD (outdated screenshot of asm version)

This signature was last updated on 20/04/2015 and may be outdated

Offline c4ooo

  • LV5 Advanced (Next: 300)
  • *****
  • Posts: 252
  • Rating: +10/-1
  • The impossible chemical compound.
    • View Profile
Re: [HTML5/javascript] Platformer game
« Reply #1 on: July 07, 2015, 06:32:13 pm »
I got to say, the game may not be to complex, but the minimalistic style is just awesome!  :thumbsup: Reminds me of "The Worlds Hardest Game". (Yes, thats a game)
Edit: could you make the image smaller it breaks page formatting :P
Edit 2: I beat level one in 320 deaths ;) Also, what are you using to host your forum?
« Last Edit: July 07, 2015, 06:47:41 pm by c4ooo »
-German Kuznetsov
The impossible chemical compound.

Offline ben_g

  • Hey cool I can set a custom title now :)
  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1002
  • Rating: +125/-4
  • Asm noob
    • View Profile
    • Our programmer's team: GameCommandoSquad
Re: [HTML5/javascript] Platformer game
« Reply #2 on: July 07, 2015, 06:55:43 pm »
I just tried "The Worlds Hardest Game" and gameplay-wise, my platformer does seem to be a platformer version of that O.O
The images should be fixed now.
The forum is SMF and it's hosted (together with the rest of the website) on a Windows 7 conputer that we never turn off, using XAMPP to make the site work.
My projects
 - The Lost Survivors (Unreal Engine) ACTIVE [GameCommandoSquad main project]
 - Oxo, with single-calc multiplayer and AI (axe) RELEASED (screenshot) (topic)
 - An android version of oxo (java)  ACTIVE
 - A 3D collision detection library (axe) RELEASED! (topic)(screenshot)(more recent screenshot)(screenshot of it being used in a tilemapper)
Spoiler For inactive:
- A first person shooter with a polygon-based 3d engine. (z80, will probably be recoded in axe using GLib) ON HOLD (screenshot)
 - A java MORPG. (pc) DEEP COMA(read more)(screenshot)
 - a minecraft game in axe DEAD (source code available)
 - a 3D racing game (axe) ON HOLD (outdated screenshot of asm version)

This signature was last updated on 20/04/2015 and may be outdated

Offline Sorunome

  • Fox Fox Fox Fox Fox Fox Fox!
  • Support Staff
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 7920
  • Rating: +374/-13
  • Derpy Hooves
    • View Profile
    • My website! (You might lose the game)
Re: [HTML5/javascript] Platformer game
« Reply #3 on: July 08, 2015, 02:51:15 pm »
Wait, this is in a release stage? aaaaawwwweeesooomee!!! :w00t:

THE GAME
Also, check out my website
If OmnomIRC is screwed up, blame me!
Click here to give me an internet!

Offline ben_g

  • Hey cool I can set a custom title now :)
  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1002
  • Rating: +125/-4
  • Asm noob
    • View Profile
    • Our programmer's team: GameCommandoSquad
Re: [HTML5/javascript] Platformer game
« Reply #4 on: July 08, 2015, 02:54:36 pm »
Wait, this is in a release stage? aaaaawwwweeesooomee!!! :w00t:
Let's call it "public beta"  ;)
I just decided that with 3 levels and a tutorial, it actually became a fun game, instead of a simple proof of concept. So I decided to finally write a topic about it.

EDIT: the highscores have been moved to local storage instead of in the cookies, so if you still have any old highscores, they should be migrated to make them work again. There's an option to do that in the changelog.
« Last Edit: July 15, 2015, 06:06:09 pm by ben_g »
My projects
 - The Lost Survivors (Unreal Engine) ACTIVE [GameCommandoSquad main project]
 - Oxo, with single-calc multiplayer and AI (axe) RELEASED (screenshot) (topic)
 - An android version of oxo (java)  ACTIVE
 - A 3D collision detection library (axe) RELEASED! (topic)(screenshot)(more recent screenshot)(screenshot of it being used in a tilemapper)
Spoiler For inactive:
- A first person shooter with a polygon-based 3d engine. (z80, will probably be recoded in axe using GLib) ON HOLD (screenshot)
 - A java MORPG. (pc) DEEP COMA(read more)(screenshot)
 - a minecraft game in axe DEAD (source code available)
 - a 3D racing game (axe) ON HOLD (outdated screenshot of asm version)

This signature was last updated on 20/04/2015 and may be outdated

Offline TIfanx1999

  • ಠ_ಠ ( ͡° ͜ʖ ͡°)
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 6173
  • Rating: +191/-9
    • View Profile
Re: [HTML5/javascript] Platformer game
« Reply #5 on: July 16, 2015, 12:06:01 am »
I've played through the first level of the game and I like it! I think the check points are well spaced and the enemy placement and speed seems good. It does indeed remind me of the world's hardest game except in platform style, but that's not a bad thing. It also kind of reminds me of VVVVVV in that your goal is to evade enemies since you have no way to kill them. I wondered initially if a variable height jump might be good, but after playing it some I think it's fine how it is. Things I'd like to see: Joystick support if possible. Using the arrow keys is ok, but a joystick would be awesome. :D Also perhaps a calc  version for the new CE model?  :angel: *nudge nudge wink wink*. I know that one is a bit of a long shot, but it'd be cool to see and a nice fit for the platform I think. ;) So yea, great job so far!

*Edit* Also maybe make it so the player can't move immediately after dying and perhaps add in where the player flashs for a few moments (to indicate death). Sometimes I find myself dying multiple times in a row after respawn simply because I'm still holding the arrow key after dying. And oh yea!, perhaps a simplistic death animation.

*Edit2* Another thought: IIRC, red green color blindness is the most common. I think red is good and universal for danger, but perhaps make it a darker red to help differentiate between enemies/ things that kill you and the player/exit.
« Last Edit: July 16, 2015, 12:21:15 am by Art_of_camelot »

Offline Unicorn

  • LV1 Newcomer (Next: 20)
  • *
  • Posts: 16
  • Rating: +0/-0
  • I am rainbows
    • View Profile
Re: [HTML5/javascript] Platformer game
« Reply #6 on: July 18, 2015, 12:29:15 pm »
*Edit2* Another thought: IIRC, red green color blindness is the most common. I think red is good and universal for danger, but perhaps make it a darker red to help differentiate between enemies/ things that kill you and the player/exit.
Maybe ben_g could add a color picker? That would be nice to have :)

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6268
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: [HTML5/javascript] Platformer game
« Reply #7 on: July 20, 2015, 11:34:12 pm »
ಠ_ಠ


Also, why is the game all inline?
/e

Offline ben_g

  • Hey cool I can set a custom title now :)
  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1002
  • Rating: +125/-4
  • Asm noob
    • View Profile
    • Our programmer's team: GameCommandoSquad
Re: [HTML5/javascript] Platformer game
« Reply #8 on: July 25, 2015, 02:40:50 pm »
I've played through the first level of the game and I like it! I think the check points are well spaced and the enemy placement and speed seems good. It does indeed remind me of the world's hardest game except in platform style, but that's not a bad thing. It also kind of reminds me of VVVVVV in that your goal is to evade enemies since you have no way to kill them. I wondered initially if a variable height jump might be good, but after playing it some I think it's fine how it is. Things I'd like to see: Joystick support if possible. Using the arrow keys is ok, but a joystick would be awesome. :D Also perhaps a calc  version for the new CE model?  :angel: *nudge nudge wink wink*. I know that one is a bit of a long shot, but it'd be cool to see and a nice fit for the platform I think. ;) So yea, great job so far!

*Edit* Also maybe make it so the player can't move immediately after dying and perhaps add in where the player flashs for a few moments (to indicate death). Sometimes I find myself dying multiple times in a row after respawn simply because I'm still holding the arrow key after dying. And oh yea!, perhaps a simplistic death animation.

*Edit2* Another thought: IIRC, red green color blindness is the most common. I think red is good and universal for danger, but perhaps make it a darker red to help differentiate between enemies/ things that kill you and the player/exit.
I'll add joystick support if I can figure out how. A calc version for the CE would be hard since I don't know ez80 asm, but Alexgt from Codewalrus is planning a version for the HP Prime.
As for the colour blindness: I thought it was okay since it's bright red and (relatively) dark green. I'm not sure how to check for visibility though. Would simply converting a screenshot to greyscale a good way, or should I try to merge the red and green channels?

ಠ_ಠ


Also, why is the game all inline?
I guess that happens because not everything is according to the standards. Does it mess up for you, or is it just showing a warning?
The game is inline because that way it was easy to distribute (single file), and I only started using seperate files in the dev version. It'll be changed in the next update.
My projects
 - The Lost Survivors (Unreal Engine) ACTIVE [GameCommandoSquad main project]
 - Oxo, with single-calc multiplayer and AI (axe) RELEASED (screenshot) (topic)
 - An android version of oxo (java)  ACTIVE
 - A 3D collision detection library (axe) RELEASED! (topic)(screenshot)(more recent screenshot)(screenshot of it being used in a tilemapper)
Spoiler For inactive:
- A first person shooter with a polygon-based 3d engine. (z80, will probably be recoded in axe using GLib) ON HOLD (screenshot)
 - A java MORPG. (pc) DEEP COMA(read more)(screenshot)
 - a minecraft game in axe DEAD (source code available)
 - a 3D racing game (axe) ON HOLD (outdated screenshot of asm version)

This signature was last updated on 20/04/2015 and may be outdated

Offline TIfanx1999

  • ಠ_ಠ ( ͡° ͜ʖ ͡°)
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 6173
  • Rating: +191/-9
    • View Profile
Re: [HTML5/javascript] Platformer game
« Reply #9 on: July 25, 2015, 05:41:05 pm »
I'm not sure how to check the red/greens, but I thought they were both fairly bright. Also, not sure how many levels total you have so far, but I think I got to the 3rd or 4th one.

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6268
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: [HTML5/javascript] Platformer game
« Reply #10 on: July 27, 2015, 03:21:17 pm »
ಠ_ಠ


Also, why is the game all inline?
I guess that happens because not everything is according to the standards. Does it mess up for you, or is it just showing a warning?
The game is inline because that way it was easy to distribute (single file), and I only started using seperate files in the dev version. It'll be changed in the next update.
It's just a warning. I doubt there will be problems from your game, but you should add a charset meta tag to <head> just in case. Eg:
Code: [Select]
<meta charset="utf-8">
You may also want to look into strict mode https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
/e

Offline ben_g

  • Hey cool I can set a custom title now :)
  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1002
  • Rating: +125/-4
  • Asm noob
    • View Profile
    • Our programmer's team: GameCommandoSquad
Re: [HTML5/javascript] Platformer game
« Reply #11 on: September 03, 2015, 05:30:39 pm »
Big update: The level editor is out of alpha. There are still a few unfinished extra's in the community hub, but everything should be stable and reliable enough for the public release now.
The level handling system is now also completely rewritten. It now congratulates you after every level and waits for you to click a button before moving on to the next one. It also gives you the option to return to the main menu there, and when you were playing an online level, it also gives you the options to upvote/downvote that level (in case you haven't voted already), as well as an option to return to the community hub, which will open the page of the level you just played again so you can place a comment if you want.
There is also a guide now that tells you some basic tips for beating the game, and it also explains how to use the level editor.
I hope you'll enjoy this update.

The platformer is now hosted on http://velocitygames.tk/platformer.php , but the old page should redirect you there.
My projects
 - The Lost Survivors (Unreal Engine) ACTIVE [GameCommandoSquad main project]
 - Oxo, with single-calc multiplayer and AI (axe) RELEASED (screenshot) (topic)
 - An android version of oxo (java)  ACTIVE
 - A 3D collision detection library (axe) RELEASED! (topic)(screenshot)(more recent screenshot)(screenshot of it being used in a tilemapper)
Spoiler For inactive:
- A first person shooter with a polygon-based 3d engine. (z80, will probably be recoded in axe using GLib) ON HOLD (screenshot)
 - A java MORPG. (pc) DEEP COMA(read more)(screenshot)
 - a minecraft game in axe DEAD (source code available)
 - a 3D racing game (axe) ON HOLD (outdated screenshot of asm version)

This signature was last updated on 20/04/2015 and may be outdated

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6268
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: [HTML5/javascript] Platformer game
« Reply #12 on: September 03, 2015, 05:36:03 pm »
Hmm, scrolling to the bottom does something strange
/e

Offline ben_g

  • Hey cool I can set a custom title now :)
  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1002
  • Rating: +125/-4
  • Asm noob
    • View Profile
    • Our programmer's team: GameCommandoSquad
Re: [HTML5/javascript] Platformer game
« Reply #13 on: September 03, 2015, 07:24:38 pm »
If you mean the border and/or the footer: that's seen as a website issue (and other pages have it too). That will be fixed when I'll start on fixing browser display issues of the website itself.

If you mean the http:// thing, it's because ssl is off by standard on the website (to enable caching and save bandwidth). The site should work fine with ssl if you use https://velocitygames.tk/platformer.php .
My projects
 - The Lost Survivors (Unreal Engine) ACTIVE [GameCommandoSquad main project]
 - Oxo, with single-calc multiplayer and AI (axe) RELEASED (screenshot) (topic)
 - An android version of oxo (java)  ACTIVE
 - A 3D collision detection library (axe) RELEASED! (topic)(screenshot)(more recent screenshot)(screenshot of it being used in a tilemapper)
Spoiler For inactive:
- A first person shooter with a polygon-based 3d engine. (z80, will probably be recoded in axe using GLib) ON HOLD (screenshot)
 - A java MORPG. (pc) DEEP COMA(read more)(screenshot)
 - a minecraft game in axe DEAD (source code available)
 - a 3D racing game (axe) ON HOLD (outdated screenshot of asm version)

This signature was last updated on 20/04/2015 and may be outdated

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6268
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: [HTML5/javascript] Platformer game
« Reply #14 on: September 03, 2015, 07:58:33 pm »
I was initially referencing the border around the content though. It looks fine until you scroll all the way to the bottom. It stays broken until you scroll all the way back to the top.

Looks like your form actions are hard coded to http for that (It's hidden behind the main content).
/e