day 07 of 1000 days

Welcome, hope your day is going well.

Brief:- I am making a snake game project from a youtube tutorial. The game is still not finished, will do it tomorrow. Though the most major part is done, you can play it also. https://codepen.io/shreerohitrj/pen/eYLzMKe

Detailed:- As I am still not fully recovered so I decided to do a simple project "snake game". I used code with harry sir tutorial for reference: https://www.youtube.com/watch?v=2ZDnw6ifdSI&t=3392s. It's a good tutorial, he has also provided the sound files and code for it. I still can say that I used my code in this and took starting logic & how to move the snake(I got confused about that coz) from the tutorial.

The game is simple to make, only DOM, function and array concepts are used. I made a board using a div element. Divide it into 18 columns and rows, 1fr will auto-calculate the size of the unit, it actually divides the free space in that proportion. I still need to do a lot of styling.

display: grid;
grid-template-columns: repeat(18,1fr);
grid-template-rows: repeat(18,1fr);

Now the js part. "use strict" is used in starting, it helps in avoiding silly errors. First I made some music objects using new Audio(path), which gives various methods like play, pause etc. For food, I stored its coordinates in an object, whereas for the snake stored them in an array of objects. The movement is noticed by attaching an event listener to the window object. It is provided by the browser (I will have to study more about it). I used object literal instead of the switch case statement. The main logic of snake movement is to loop the snake array object and change the element such that the previous element's coordinates are replaced by the next element's coordinates. For that I have made a direction object, and using it I will increment the coordinate by +1. It is mostly used in games and called velocity, as I am not adding speed hence direction is a more appropriate name.

Now to display the snake and food, we will have to refresh the board each time. I will use requestAnimationFrame for that. But I haven't included that right now as I want to start simple, and also speed is zero right now. To render(display), the main logic is to add and remove HTML elements using js. I first assign board div to a variable using the document object method querySelector. I then used board.innerHtml="", it will remove any HTML inside the board. After this we looped over the snake array and for each array element, created a div element using createElement method. We will have to position it using style in js, assign it to the grid and add class. Later add it as a child element in board div using appendChild(). Same way to render food element. To make is random I use below function. There is one possibility that it may appear on snake's body which I haven't removed yet.

const randomInt = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min);
//gives random number between min & max, including min, max 
//I found it online, and tested it also.

That's it for today.

Personal:- I was not able to do much for the past few days due to illness. Still feeling less energy in my body though no fever. Hopefully from tomorrow, I can do much more. What I did in past is not good for me. I should have studied even less. You can either have the pain of working hard or the pain of regret that you didn't work hard. I will remember this thing from now on. Today's progress is small one but I am happy, though it took me some time due to silly errors.