DEV Community

Cover image for Learn Javascript through a Game

Learn Javascript through a Game

Souparno Paul on September 06, 2020

If you Google the term "Javascript", billions of search results pop up. That's how popular it is. Almost all modern web applications use Javascript...
Collapse
 
stealthmusic profile image
Jan Wedel

Great game you did there and nice post! Snake was the big thing on the first Nokia phones I used and I learned programming by changing the code of Nibbles, a snake clone shipped with QBasic.

A couple of minor ideas to improve the readability of the code:
A function that check collisions should probably not be called “die” or “eat”. I would suggest to create an abstraction that allows something like that:

if( snake.collidesWith(food) )        {snake.eat(food)}
Enter fullscreen mode Exit fullscreen mode

This may appear as an unnecessary separation but separation of concerns really help to maintain and read code.

Collapse
 
soupaul profile image
Souparno Paul • Edited

True. I thought about writing a function for collisions but decided against using the formal term. Collision detection is a big part of game development and I hope to address it in a different article. Great that you created the game using QBasic, which coincidentally also turns out to be the first programming language I learnt.

Collapse
 
duarch profile image
André Duarte

Great idea 💡 I’m gonna try it!

Collapse
 
graces10 profile image
Grace S.

Awesome post! I love the classic snake game, even better that it uses vanilla JS.

Collapse
 
soupaul profile image
Souparno Paul

There is so much more to Vanilla JS than what appears on the surface. That is exactly what I intended to address with this post. Glad you liked it!

Collapse
 
mohessaid profile image
Mohammed E. MEZERREG

Great article! I think you have to mention that the interval variable is a global variable as well. Also mention that clearInterval(interval) must be added to the existing if statement in the update function when the snake dies.

Collapse
 
gerardocrdena14 profile image
Gerardo Cárdenas

Yes, I am interested in learning more about game development using Javascript. I don´t want to use frameworks.

Collapse
 
soupaul profile image
Souparno Paul

Glad you liked the article. There are quite a few good frameworks out there but have a high-level of abstraction in terms of the functions used. I wanted to showcase the underlying principles and I really look forward to posting fresh new content on game development using JS.

Collapse
 
gerardocrdena14 profile image
Gerardo Cárdenas

That´s very good. I enjoyed reading it, now I will enjoy playing it.

Collapse
 
manipandian profile image
Manikandan

I am curious to know,
Why did you call prevent default in each keyDown calls?
What is the purpose of that method in this case?

Collapse
 
codinglanguages profile image
Your DevOps Guy

I like how you created the game using plain JavaScript.

Are you planning to create more games like this?

Collapse
 
soupaul profile image
Souparno Paul

I am looking forward to it.

Collapse
 
thecodingcosmos profile image
Nikhilesh Verma

I am hosting my snake game through blogspot, how to add controls for mobile

Collapse
 
soupaul profile image
Souparno Paul

We haven't really focused on mobile controls here but I'm sure if you can add some on screen buttons, they would do the trick.