DEV Community

Cover image for SpaceInvaders with only JavaScript and CSS!

SpaceInvaders with only JavaScript and CSS!

Nicola on September 30, 2019

I've created a Javascript + CSS only SpaceInvaders game, to test the performance of a complex HTML management, here there is a video: Watch on Loo...
Collapse
 
drmandible profile image
DrMandible

I lol'd at bullet.classList.add('Shooted');

I had trouble finding your game assets for the player/enemies. Are you using png or svg? My understanding is svg is the most performant for small sprites (as long as you stay away from filter effects).

I ask because I'm currently working on a project that involves svg sprites so I'm always looking for newer/better ways to handle them.

Collapse
 
nicolalc profile image
Nicola

Ahah yeah that was a stupid trick to try some cool effects on the bullet when the player shoot, but it was kinda a waste of time. I want to improve it in the future but for now it’s useless 😂

I don’t use svg for enemies, I use only emoji characters because the goal of the project was different but I wish to implements some animated svg when I’ll convert all into a object oriented project..

My advice for a better svg management is to design it with a paint tool like gimp or gravit designer, which are free (or partially free) and then convert into an html format svg tag, then try to play a lot with the fill or stroke svg property using css animations and javascript code.. the next step might be learning how to handle these svg using typescript, by defining some smart classes to handle svg object, with a render method to handle animations. In my mind a solution could be a Sprite class with some properties like sheet [Image[]] and framesPerSecond [number?=0] to handle the sprite animation and the number of frames to perform at second. This is a simple example of an abstract class wich can lead you to a simplest and better organization of your sprites..

Collapse
 
drmandible profile image
DrMandible

Oh good call on the emoji characters. I bet that is even better performance.

Currently I'm importing them as ReactComponents and using inline styling + styled components. That allows me to access everything in the svg while using the React state management. Works out pretty well so far in small tests, though I confess handling the context of the variables has been a bit of a headache.

Thread Thread
 
nicolalc profile image
Nicola

Are you working with arrow functions? These functions could help you with variable scope a lot. In React I use only these function to propagate the scope of the component into its functions like render.

Thread Thread
 
drmandible profile image
DrMandible

I am but I'm still learning too. When I import a React component I'm often unable to access the variables inside that component and I don't know why or when that happens. I'm sure it's something obvious.

My ideal developers environment would have a color coded graph of all my variables, where they were declared, their current values, and what their scope is. Passing values - especially state/context - are an endless source of frustration for this budding developer. I find myself making bloated functions just so I can write something without having to stop and debug for an hour just to pass state.

Thread Thread
 
nicolalc profile image
Nicola

I think you might not access the component variable, but you must define variables as component properties, and set them when you declare a component instance.

For example:

interface WelcomeProps = {
  name: string;
  color: string;
}
class Welcome extends React.Component<WelcomeProps> {
  constructor(props) {
    super(props);
  }
  render() {
    const {props} = this;
    return <h1 color={props.color || '#000'}>Hello, {props.name}</h1>;
  }
}
[...]
const element = <Welcome name="Mario" color="red" />;

You don't need to access to the component variables if you only need to keep it dynamic, use react props to handle component variations.

Thread Thread
 
drmandible profile image
DrMandible

Thanks! This gives me something to chew on. I keep seeing articles that are refactoring the kind of code you're showing me into hooks and ditching the constructor and super props. So I haven't even looked into that functionality because I've been trying to use hooks for everything. But perhaps yours is the more straightforward way.

I see you're using typescript too. I should probably start doing that.

Thread Thread
 
nicolalc profile image
Nicola

I think typescript is a must, If you don't know JS well it could be a mess to handle. Also, the major frameworks (and not) like Angular, React and Vue uses Typescript as the default language. It could lead you to a fantastic Object-driven Javascript world, where you can reduce the size of your written code and improve your code without wasting time debugging around for hours!

I suggest you to start with the tutorials here and to learn also what nodejs is and how to use it. Take a look also on what npm is and what is a node package before starting with typescript.

I'm creating a TS version of this SpaceInvaders to improve the project readability.

Thread Thread
 
drmandible profile image
DrMandible

Awesome! I've hooked up a node.js backend to my react app as a test / proof of concept. It's a hassle. So anything to make that easier is fantastic.

Collapse
 
cxong profile image
Cong

Nice; will you deploy to a website so people can play?

Collapse
 
nicolalc profile image
Nicola

Yes I'll do when I'll complete the game, I need to do some score and game logic, and maybe a multiplayer version ^

Collapse
 
nicolalc profile image
Nicola

BUT you can download the repository and try it by yourself ;)

Collapse
 
cxong profile image
Cong

Too much effort 😂
Please follow these instructions and you can have GitHub automatically serve the game on a website: help.github.com/en/articles/config...

Thread Thread
 
nicolalc profile image
Nicola

Ahah yes I know you can host pages on GitHub like thism, I'll do this weekend probably, I'm converting the project to typescript so when I did it I'll create a playable version online ^

Collapse
 
ellen_dev profile image
Ellen Macpherson

Amazing work!

Collapse
 
utkarsh profile image
Utkarsh Talwar

Good stuff haha! Hit me with that nostalgia.

Collapse
 
felipperegazio profile image
Felippe Regazio

Amazing work! (+1)

Collapse
 
smootok profile image
Yassine Amine

Amazing work! (+2)

Collapse
 
alais29dev profile image
Alfonsina Lizardo

Great job!! Looks really cool :D

Collapse
 
nicolalc profile image
Nicola

Yeah thanks, it's nothing complex just a test but I'm happy to hear that! ^

Collapse
 
htshah profile image
Het Shah

Amazing work (+3)!!!!