My New Spacecraft Browser Game with Vanilla JS

Spacecraft screenshot

I enjoy creating mini-games or implementing interaction designs on the web.

And here is the browser game I've made recently!

Source Code

Online Demo

Are you new to Canvas?

Doing basic 2d stuff with canvas is so easy and has a main loop to draw and update that you can do this with a setInterval or for smoother animations with a recursive requestAnimationFrame

I have used canvas for stars, and I implemented most elements via DOM, and if you don't use a library like gsap, it would be hard to implement non-linear effects in canvas.

if you want to create a real-world browser game, it would be better to use libraries(engines) like pixijs.com for better performance and also better developer experience; I don't do it because I want to improve my skills and have something challenging for a weekends

And finally, for me, it's interaction design and not just a game which I always follow codrops and awwwards.

tympanus.net/codrops/
awwwards.com/
greensock.com/gsap/
pixijs.com/

Feel free to ask questions or share your thoughts with me :)

Twitter: https://twitter.com/danialdezfouli

--

--

--

Senior Full Stack Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Taking React animations to the next level with React-Spring

ES6 Generators in JavaScript, a Real-World Use Case

A real-world generator

How to Create a Boilerplate in TypeScript With Node Package Manager, MongoDB, Express, Node, &…

React Reconciliation

POCKET CHANGELOG V0.2.1

Improving Babel support for TypeScript with ‘type-only’ imports

How I Learned to Stop Using Classes, and Love the Hooks

How to build SPA with NextJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Danial Dezfouli

Danial Dezfouli

Senior Full Stack Web Developer

More from Medium

Adding a Chart to Your Website With Chart.js

Let’s play with Hyperlinks

HOW TO CREATE A DARK/LIGHT THEME TOGGLE

5 Articles every WebDev should read this week (#01)