Well, I just knew the basics and I knew as well that I wanted to learn to code, no matter what, as I explained . here After some time trying to learn it by myself, I figured out that would be better for me to sign up for a coding bootcamp in my hometown. For those who just want to play the game and are not interested on the story on how it was made, ! here it is And oh boy! Coding almost every single day, with LABS (homework) to do, teachers available to reach for whenever I need some help or guidance and a group of other students that are in the same situation as me has really made a difference on my learning pace. But I'm not here to tell you -if you're learning how to code- that you must sign up for one of these, everyone has different oppinions about them. I'm here to explain what I was able to made after the first module, just learning HTML, CSS and Javascript. The final project of the module was a game that we had to develop on 2 weeks. We had complete freedom on how to do it, the one and only rule was not to use any framework. Here, in Spain, when you have to get your driving license, you must pass a medical test. This test is kind of boring, just evaluating how well you see and hear, but it had as well one thing that made it very enjoyable: a little coordination video game. The player is represented by 2 dots (one for each hand) that move only in horizontal. It consists on two little roads viewed from above which sudden turns to the right or left, with the purpose of making it a challenge to maintain both dots in the middle of the road. So, the purpose of the game is to avoid stepping out of the way. The game will finish at a certain point, and then a game-over screen will show the percentage (%) of the time that the player stepped out of the way, from the start to the end. I never played that kind of game before and I've never played it after, but it stuck on my head since then, some years ago. So I decided to re-make it. First of all, I tried to organize all the work that had to be done in a on Github: Readme file The game state will consist on just 3 screens: The --> Title + Start button Start Screen The actual --> Instructions + Play button --> Javascript Canvas Game Screen The --> Result + Play again button Game Over Screen Then the development of the MVP (minimum viable product) for the actual game will be like this: Create a dot and show it on the screen. Move dot horizontally --> Click on right or left arrows to move player on the Canvas. Create the road --> First, a straight line. Then, add turns, right or left. Check collision (when the dot is stepping out of the road). If collision --> Sum time that the dot is out of the way --> Change colors. End game at a certain point (? seconds). Replicate it for both hands. Then I had other kinds of stuff I wanted to add if I had enought time, like: Adding background music and sound effects Make it beautiful with CSS It was actually my first time making a game, my first time using and my first time trying to organize my code in a kind of Model-View-Controller way ( ). Canvas MVC If you don't know, Canvas is represented by a square that allows us to "paint" things on the screen with Javascript and the Model-View-Controller is a concept that helps us in not having all the code in a single huge file, but separating concerns and making it easier to read and maintain. I reached out to the conclusion I had to create these files: A to place the HTML tags and some content. index.html A to put the CSS. stylesheet.css A that will act as the view, getting data from and updating the HTML. main.js A that will act as the controller and model at the same time, having the logic inside. game.js A and that will create those other dynamic and replicable parts needed. player.js path.js For the sake of simplicity, I didn't even host the game in any place, I've just linked to my Github repo to deploy it fast and easy. It's a great tool! Netlify On Github, I started for the first time to use . Having a branch means creating like a "clone" of all your code files, and that allows you to change it and test it without worrying too much about messing up. Once you have something that works, you can "merge" this test branch/es with your main code (usually called the "master"). branches I decided to call my game ' ' in a retro reference and I started to code. Coordinator 2000 Showing a little square on the screen was the easiest part. I placed on the HTML file the canvas tag: < = = = > canvas id "coordinator" width "1200" height "600" </ > canvas On the main.js file, "take" the canvas: canvas = .getElementById( ); let document 'coordinator' Give it a context, so it knows what kind of a drawing board is: ctx = canvas.getContext( ); let '2d' And initializing the class 'Game' with that property: game = Game(ctx); let new Inside the game.js file, a method to draw it: _drawPlayer(player) { .ctx.fillStyle = player.color; .ctx.fillRect(player.x, player.y, player.width, player.height);
  }; this this And so on... I'm not diving into the code itself (you can see it ) because it will take ages to describe what's going on in every line and what happened in every step during those 2 weeks, but I'm commenting the highlights: here I first thought that I should create 2 lines to define the road and then move them in some way, until other student from my class told me that maybe would be easier to just create of the same color, one on top of each other to make the road. an array of little rectangles Then, moving the road to draw the turns would be as easy as adding or subtracting the X position when adding new rectangles on the array. I ran into a little problem, as the array was getting bigger and bigger the browser started to show signs of underperformance, almost freezing at some point, so I just added a function that was deleting the rectangles from the array as soon as those stepped out of the canvas: _deletePath(array) { ( i = ; i < array.length; i++) { (array[ ].y >= .canvasHeight) {
        array.shift();
      } 
    }
  } for let 0 if 0 this Also, I didn't know how to make the turns dynamic, so I just harcoded them: _generateTurnsR() { lastItem = .rightPathArray[ .rightPathArray.length - ]; ( .frames >= && .frames < ) { ._generatePathR(lastItem.x += ); 
  } ( .frames > && .frames < ) { ._generatePathR(lastItem.x -= );
  } ( .frames > && .frames < ) { ._generatePathR(lastItem.x); let this this 1 if this 0 this 160 // turn right this 1 else if this 155 this 220 // turn left this 1 else if this 215 this 420 // straight this Adding a on the 'update method' allowed me to place turns every few seconds, just adding or subtracting the X position of the little rectangles. frames counter During those 2 weeks, there was some days that I was extremely frustrated, as I coudn't figure out how to do things. Luckily, I had Alex, a teacher assistant available, that sometimes helped me pointing to the right direction. At the end, there's still some (if you notice playing the game, when the left dot steps out of the road, the border doesn't become red, as the right one does), some (the timer is a GIF image, instead of code, because I didn't have time left to do it properly) and the code, after being refactored by me a few times, is still sloppy and full of don't-know-how-to's (for example, I did all the CSS as quickly as possible, without taking into account screen sizes or responsiveness). bugs bad practices Still, is the first "thing" created by me coding all the lines, one by one. In the past, I created a few webpages, but all of them where using Wordpress and the sensation is not the same. This is a thousand times more exciting! And now... yes! you can play it ! :) here

I Built a Game in Vanilla JS And I Don't Know How to Code 3 Months Ago

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

About The Money In Your Pocket...Or Your Bank: Creation And Evaporation of Value

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

About The Money In Your Pocket...Or Your Bank: Creation And Evaporation of Value

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps