DEV Community

loading...
Cover image for [UPDATE] SpaceInvadersJS - Demo live now!

[UPDATE] SpaceInvadersJS - Demo live now!

Nicola
I'm a FrontEnd developer, specialized on Angular platform. I love design and music!
・1 min read

Hi to all!

Finally, a playable (early stage) demo of my Typescript-based framework is live:

https://nicolalc.github.io/jssheet/spaceinvaders/index.html

What's in this update

  • Generic bugfixes
  • Optimizations
  • NEW player shooting boosts
  • NEW simple Game HUD
  • NEW simple game score / logic
  • NEW player shield and life
  • NEW explosions effects
  • NEW shoot effects

What there will be in the next release

  • Levels
  • Global score
  • Sprite animations
  • 2X player boost (will shoot 2x times)

What will be in the final release

  • A full playable 2D game
  • A responsive game for every platform (but it's strongly game type dependent)
  • A web editor, to handle dinamically sprites and behavior, like a real Engine
  • 3D

Take a look to the old development posts:

https://dev.to/nicolalc/spaceinvaders-with-only-javascript-and-css-407c
https://dev.to/nicolalc/threejs-typescript-html-game-engine-5d5k

USEFUL RESOURCES

repository
threejs
personal website

Discussion (11)

Collapse
willvincent profile image
Will Vincent • Edited

Doesn't appear to work properly in chrome, I see no sprites other than the earth & moon background.

EDIT: Seeing the same in Firefox.

Collapse
willvincent profile image
Will Vincent

Every browser, same scenario in fact. Something definitely is not working right.

Collapse
nicolalc profile image
Nicola Author

That's pretty strange, I'm using chrome as dev browser and everything seems to work fine (check this video).

I've never tried with other browser but I'm using ThreeJS and standard CSS so this seems to be really strange. I'll do a check!

Collapse
nicolalc profile image
Nicola Author

Are you getting any specific error? It seems like a style problem or a WebGL problem, maybe you need to enable it but I don't think you need to. WebGL is developed by Mozilla itself so especially in Firefox it should works. I've checked and I have no issues with firefox.

Currently, only Edge and IE doesn't work properly because of some CSS flex properties I need to fix.

I'm working on Windows, did you use a different OS?

Thread Thread
willvincent profile image
Will Vincent • Edited

was on a mac.. just tried again on windows with brave, same result.

Saw a 404 on reload.js but no other errors

I can also see that all the assets are loading properly, they're just failing to display for whatever reason. /shrug/

Thread Thread
nicolalc profile image
Nicola Author

That's pretty strange, I'll do a check later on my mac, maybe is only related to an AdBlock system which could block the resource loading, but I don't really know the cause of this issue, thanks for your time this could help me check the engine errors.

Thread Thread
willvincent profile image
Will Vincent

That would make sense on brave on the windows machine, and on my chrome instance on the mac, but I don't have any ad blocker installed on safari or firefox which also both failed on the mac.

Also of note -- the game is still playable, but obviously VERY impossible without being able to see the sprites :D

But shooting does yield a score increase

Thread Thread
nicolalc profile image
Nicola Author

Yes because the logic and graphics are separated, anyway if you'd like to you can download the project and run with these commands:

# install dependencies
npm i
# run first build and keep watching for changes
npm run build-dev
# in another terminal window run
npm start

your application should run @ localhost:3000

Maybe this is an issue related with github websites, I don't really know this is a strange issue!

Thread Thread
maxdevjs profile image
maxdevjs

Same with Chrome and Firefox on Linux :)
@nicolalc you develop it on Windows, I guess?
Also, Github is down :D

Thread Thread
nicolalc profile image
Nicola Author

Yeah that seems so strange, and yes I develop (unfortunately) on windows 😢

Collapse
ryancmcconnell profile image
Ryan McConnell

Super cool! Love how versatile JS is.