#even html/css is a struggle tbh

[professionalchaoticdumbass]

i forgot how little i know about any sort of programming

[jtprojects]

Snake Game with JavaScript

Blog Post 2 – INTP-362

INTRO

Hello! If you came here after reading my first blog post (not necessary but it would be funny if u wanted to see my struggle) welcome back! It’s nice to see you again! If you diDN’T read the last blog post (the disloyalty smh /lh) hello! Nice to make your acquaintance!

If you aren’t aware what I’m doing here (tbh same life is definitely,,, A Thing™ for sure), I essentially ventured out to learn about game development in JavaScript (a coding language, often paired with HTML and CSS if you weren’t aware which is completely fair). I have previously had experience with JS in terms of website development but never really for game development. For the sake of this post and the catered audience, I’m just gonna assume that you know JS and HTML and CSS and all that jazz. If you don’t, my sincerest apologies (/s,,, kinda).

(The title of the game and display of the current score would be what is controlled by html and css while everything in the black box would be controlled in js)

MAKING DECISIONS

So, first thing I had to figure out which IDE to use. Now this wasn’t too hard of a choice, as I already have multiple different IDEs with options for JS, html, and css (by multiple I mean 2, the accursed netbeans and the modern and sleek vscode). For this project, due to its simplicity and familiarity, I chose vscode (I was gonna give a whole outline as to what vscode is but I’m not getting paid to do that so no thank you).

After getting my IDE decided and figured out, I had to find out what game I wanted to create. Of course, as I am overly ambitious (which I must admit is one of my fatal flaws) My initial idea was “hey, why don’t I make a short, simplified version of pokemon or a fighter game like mortal kombat or smash?” y’know, like a fool. While these goals may have been achievable if I had multiple months to do this and no sense of procrastination, it simply wasn’t possible to pull off unless I wanted to neglect my studies and focus solely on the game.

After hitting that miserable realization, I made up a list of games that I could make in the amount of time given and the amount of motivation I had inside of me (which,,, is not a lot actually). My list eventually came down to these games:

Snake

Pong

That one offline dino game on google

Tetris

and Flappy Bird

Now all these games were doable, however, when it came to applying the things that I already knew, I would have to choose snake. As I had learned previously (not in the last blog post tho) how to control the movement of a shape based from keyboard input and object collision and everything of the sort, snake seemed like the easiest option to me.

HTML

After creating the project, I immediately created all the files and game them appropriate names (tho they deffo could’ve been better but eH ‘twas a lapse in judgment). First thing after creating all the files was to set up the html page.

Just like any html page, I included the basic tags. The DOCTYPE, meta tags, title, a link to the css page and a script to the js page, a header with the extremely (/s) original title and a body with a div to show the current score and a canvas to allow me to draw in (canvas being the only new thing that has anything to actually do with my game).

CSS

Now I won’t bore you with the css details as most of it iS just setting the font, font colour, centering elements, placing elements side by side, and all that jazz hOWEVER, one thing that ig is really cool even though it’s not my original code bc in no way, shape, or form am I this cRACKED at css, would be the title.

(It’s the text colour animation effect on https://alvarotrigo.com/blog/css-text-animations/ )

DISPLAY WINDOW

Now here’s where it gets into the fun bit. The first steps to actually be able to do anything would be create the display and context. (Just for a little bit of unnecessary context, the code being presented is not in order of the actual project it’s just been copied and pasted to show you what I want you to see like those illusionists or something)

First thing we must do is create a grid in our minds. In this imaginary grid, each square is 25 pixels by 25 pixels, which has been assigned to the blockSize. Next we choose the dimensions of the display, I chose 20 blocks x 20 blocks. Then, as I had been taught in the past, we create the variables that are meant to hold the display information which is the width and height of the window and the context of the page just so that we can manipulate the window.

In the update function (the function that reruns every time the setInterval tells it to. This is the thing that I talked about last blog post that allowed for either a higher or lower fps.) we set the background colour as black using fillStyle and we draw the rectangle (square??? a square is a rectangle right?? geometry was rough) using fillRect. The first 2 values are the x and y of the top left corner of the display while the next 2 values are to set the actual size of the window.

Now, you may be like “hey, my guy, respectfully, you talked about display and setting the height and width and context and setInterval and actually drawing the window, but what about all the stuff in the middle? The change direction and foodRando and everything?” and to you, loyal reader, I say hush. It will all be revealed in good time impatient child.

DRAWING THE SNAKE

Next, we draw the snake.

Now just like the display, we get the X and Y of the snake head (obv not hardcoded bc we dO want it to move unlike irl). Next thing we add into the update function (don’t let the screenshot fool you this iS still the same update function as the last one). We also get the colour for the snake (I went fancy for this one and decided to do a hex code instead of just like,,, ‘green’ even though both would’ve produced similar results) and update the x and y of the snake based off of some things that will be talked about later on. We then continue to use fillRect again to draw the head of the snake.

Now the next bit is a bit more complicated then everything else shown previously (but if u know coding then its genuinely not that bad lmAO it just looks a bit spooky). In the for loop, we essentially create the variable i (you’ll see this bad boy a lot) and cycle through all the entries in the snakeBody to draw the rest of the body of the snake that way the snake’s body isn’t a fixed size. And can be increased depending on the entries in snakeBody.

 Next we have the for and if loop that’s placed before the snake display. The for loop is used when the snake is moving. Basically, every time the snake moves (and especially when the snake is turning) it allows the current section of the body to get the placement of the piece in front of it and replace it and moves down to the head which is placed using the if statement right after which is able to move (mostly) freely that way u can get those crisp 90 degree angles when your snake moves.

DRAWING THE FOOD

Finally, the last drawing piece, would be the food.

Just like all the parts before this, we start with initializing the variables that are to be used when finding the placement of the food. In the update function, we do the same thing we did as before, we set the colour using fillStyle and fillRect to place the food somewhere in the window.

Now finally, for the part that I told you guys to wait for, the meaning of foodRando. What foodRando does is that it finds a random place on the window using Math.floor to ensure that the number chosen is rounded down to a while number and Math.random to find that random place. The for loop is to ensure that the x and y coords of the piece of food isn’t inside the snake otherwise it reruns until it lands in an empty space. This is ran every time a piece of food is eaten and when the website first launches.

MOVING THE SNAKE

And now we talk about the other part of displayScreen that you were (or were not idk I can’t tell… or can I? No I can’t don’t worry you’re safe for now).

The next thing after being able to draw all these components to the window was to figure out how to actually move the snake. This is there the changeDirection comes into play. Inside displayScreen, we have an event listener which listens for when the user’s finger lifts off of an arrow on the keyboard, specified with ‘keyup’. Once that action takes place, the event listener runs changeDirection which takes in an event. in this event, we determine which key was pressed and move it according to the key that was pressed by changing vX and vY which is just the velocity. -1 in the Y variable means up while 1 means down. In the X variable, -1 is left and 1 means right. For both, 0 means just not moving.

But what is the && for? If you recall from all those years ago (it’s okay grandparent I get it ‘back in your day’ or whatever) the snake can’t  go from going up from going down immediately, same with left and right. This is because, if the snake were able to do that, it would just eat itself (and break its spine which isn’t really the best but who am I to judge) and immediately end the game. The && is meant to prevent that from happening. It’s a check to basically say “if you wanna do this, first we gotta make sure you ain’t doing the forbidden move”.

SCORING AND GAME END

Lastly (if you’re still here, hOLAY I’m barely even still here lmAO how do you dO it what is the sECRET?), dealing with collisions that cause the game end and keeping and increasing score.

For this last stretch, we state the variables for keeping score and ending the game, score and gameEnd. If you recall from the very beginning in displayScreen and in the html, there was some part with score in it. document.getElementById(“score”) is taking the variable from the js file and displaying it in the html so the reader gets some sort of validation beyond their snake getting longer (firstly, haha innuendo don’t look too deep into it. secondly, talk ab parental problems or something lmAO just like me frfr).

Next in the update function, we have the first if condition. In this condition we’re just specifying that, if gameEnd, the variable used to tell if the user has lost or not, is true, we end the game and restart using history.go (that’s something new that I learned I am but a tiny child) the page to allow the user to play again. The next if we have is to recognize when the snake has become fed and increase it’s size (like chickens to the slaughter) and increase the score. Once we have done that, we rerun foodRando, generating another piece of food.

 Finally, we enter the game end conditions. The first if statement is used to identify whether the head of the snake has hit the wall (like the tiktok sound or something idk). The for statement after that is recognize that if the head of the snake hits another part of the snake, that means it’s game over. For both, it recognizes game end by changing gameEnd to true and then sending an alert to the user (with a kinda mean message I’m sorry but not really) informing the player that they had lost the game.

CONCLUSION

In the end, this game was fun to make! I think if I were to go back and restart the game or add additional features, I would include things that I wanted to but was too overwhelmed to add like a menu where you can choose your display settings or maybe just a whole different project as this one seemed a bit simplistic and easy :P. While coding I realized just how similar this is to java or any coding language really. Truthfully, the only difference would be that of drawing the shapes and figuring out logic behind collisions and the syntax but everything else: the if and for statements, the functions, and logic behind everything is still the same. I think that was why I would’ve appreciated if I took on a harder game or task but, in the end, it was pretty fun to play with.

THE FINAL PRODUCT

Now since you’ve all stuck with me for so long, here’s your reward: a gif demo of the actual game being used :D (if you want access to the full project, I have my github linked :) pls don't judge my abysmal snake skills).

[winterlinggg]

Studyblr Tag!

GENERAL

What country are you studying in now? Eau Claire, America

What’s your major or specialization? Paralegal (Criminal Law)

What year are you in? First year of Paralegal, sixth year of college

What courses are you taking (/will be taking if on break)? Paralegal & Law Ethics, Civil Litigation, Legal Research, Economics, American Government

Favorite course? I loved my Web Design course and Cultures in Conflict courses at University

What languages do you know? Want to learn? English, Sarcasm, HTML/CSS

What language do you study in? Do you think in a different language? English, and nope!

Career aspiration? Paralegal for the District Attorney’s Office, and legal advocate for victims of stalking, especially in states whose laws offer perpetrators too many advantages via grey area and loopholes.

If you couldn’t be #8, what would you be? A web designer and developer

Moment you knew what you wanted to do? After I was stalked by a police officer who used work equipment, resources, databases and coworkers to stalk me. It is not legally considered stalking in Oregon (where it happened), but it is in my current state of Wisconsin.

STUDY ENVIRONMENT

Where is your favorite place to study? My computer, which has three 43″ monitors on top of an actual conference table. It’s nice for spreading out on.

When is your favorite time to study? My favorite is late night studying, between the hours of 10pm to 7 or 8am.

Clean desk or organized mess? Clean desk!!

Music or no music? What type? If I listen to music, it has to be lyric-less music because I get too distracted by the words. 

Name top 3 worst distractions. Twitter, my boyfriend (who I live with), and YouTube 

Exam time, dress up or dress down? Dress down, because I like to be super comfortable in otherwise stressful exams. 

Exam time, hair up or hair down? Hair up and out of my face. When I’m hyper-focused, the tickle of my hair gets extra annoying. 

Favorite outfit for studying? Honestly, just undies and a tee-shirt

Favourite study scent? Always flowers, specifically jasmine, gardenia, or honeysuckle.

STUDY TOOLS

Name 5 things you would consider your ‘study essentials’. I would say my Pentel side-click pencil, my color-designated Staedtler pens, my midliners, and notecards. 

Hardcopy books or pdf online? HARDCOVER - I don’t know what it is but I cannot stand e-textbooks or typing up my notes (despite the fact that I was a computer science major. There’s something special about highlighting an actual book and writing notes down. I feel like you get to spend more time with the material. 

Favorite study snack? drink? White Chocolate Macadamia Nut Cliff Bar and coffee.

Favorite pen (or pencil)? Pentel Side-click mechanical pencil - I cant stand back-clicks because it makes me change my grip on the pencil every time.

Favorite notebook/paper? I’d like to explore more notebooks, like the leuchtturm1917 but I’ve been a Five Star notebook buyer since grade school. Maybe next semester. 

Name 5 apps/tools that help you be productive. GoogleDrive, FamCal (my boyfriend and I’s synced calendar), the recorder app on my phone so I can listen back to lectures... I don’t know, I use paper more than apps. 

How many pens/pencils/markers are in your pencil case? 2 pencils, 1 pen, 8 Staedtler pens, 8 midliner highlighters.

Backpack or purse? Backpack, but a messenger bag.

How many notebooks do you have? Five notebooks (one for each class), and one leather portfolio with a legal pad for my volunteer position with the DA’s office. 

STUDY HABITS

How do you motivate yourself when you’re not motivated? When I’m not motivated, it’s typically because I’m too anxious. So I’ll take a break, take a bath, have a snack, declutter my desk, and that typically does the trick.

Pump up routine before writing an exam? run through notecards, listen to metal music tbh (I know it’s an unpopular genre but it gets your blood going).

Crammer or pacer? For assignments and general studying, I’m a pacer, and for papers I am a crammer ~ but not a day-before crammer kind of way, just in a I’m-on-a-roll kind of way.

Type of learner (kinesthetic, auditory, visual)? Kinesthetic in the sense that if I don’t physically write it out, I am less likely to remember it. It forces me to take my time with each definition/equation/theory. Then visual in the sense that, when I’m taking a test, I visualize exactly where on what page that information is written on.

How do you plan? (digital, planner, lists, no plan, etc.) Depends. Generally speaking, for my day, I use FamCal which syncs my boyfriend and I’s calendars together. For studying, like which order I’m going to read chapters/start essays/etc, I use notcard to-do lists. 

Preferred note-taking method? The outline method, although I am going to attempt the Cornell method this semester.

Do you make to-do lists? How? Yes, religiously. I go class by class, starting with the lightest homework first. For example I’ll start with readings for class A, followed by the online quiz for class B, then begin the rough draft for my paper in class C.

Do you stick to your to-do lists? Yes, about 90% of the time. If I don’t then it’s because it’s for the heavier homework like a rough draft paper in class C, in which case it’s me not following my to-do list because I’m taking a break and finishing later.

Group study or independent study? Independent is good for when I’m in a hyper-focused study session, but groups are really good at motivating me because I’m competitive I want to be the most productive one there. 

Average number of hours of sleep during exam time? Probably 8? I have to sleep more than the average person - I’ve been that way my whole life (it’s not a laziness thing). I typically sleep 10 hours or so, and have difficultly sleeping from the anxiousness of the upcoming test.

Ever pulled an all-nighter? Back when my PTSD was really bad I could never sleep at night, so I’d begin studying at 10pm and go to bed at 7 or 8 when dawn starts peeking through my blinds. So I used to be an exclusive “all-nighter”

STUDY MENTALITY

What do you do to recover from getting a grade lower than expected? I figure out where the hell I went wrong. Did the test come from the textbook instead of class notes? Did I focus more on general theories or ideas instead of the specifics like when and where or vice-versa?

One advice you’d give others? There is more than one way to get to where you want to go. I did a lot more writing of papers than weekly assignments in university. For papers, my best advice is to tailor the paper to what the teacher would like for optimal grading leniency. For example, in my Anthropology 380 course ‘Cultures in Conflict,’ I had to write about two cultures that struggled when they met. I may have enjoyed writing about a culture clash such as native amazonian tribes who are expected to stay “primitive” to satisfy the curiosities of american tourism, but I knew my teacher was into anime. So, I wrote my 20 page paper on “The Proliferation of Japanese Anime in American Pop Culture.” I got 110% on that paper (there were XC opportunities for that paper which I took, but I ALSO wasn’t graded down for ANYTHING because she loved the topic so much), and because it counted for so much of my grade, I ended that semester with 104% overall in that class. 

What are you most proud of right now? Honestly, my desk. I took so much time on setting it up exactly the way I like it, and it’s so big and aesthetically pleasing that it’s EASY to WANT to study. 

Favorite quote to keep you going? Someone somewhere is having a worse day than you. (So even if I don’t want to get up at 7:00am, I should appreciate that it’s my biggest struggle today)

Favorite way to destress? A BATH WITH A LUSH BATH BOMB

OTHER

Favorite 5 studyblrs? I can’t think of them all now, but I will make another post of people that pump out the type of content that made me love Studyblrs in the first place soon.

How often do you check Tumblr? 2x-3x a day?

Hobbies when you’re not studying? Playing video games (overwatch), taking care of my succulent garden (I easily have over 100), and watching political/social commentary on YouTube.

Favorite compulsory-reading book? Suspense/Crime books. I just Finished ‘Women in the Window’ which I read all in one day.

First nerdy joke that pops into your head. There are 10 types of people in this world: those who understand binary, and those who don’t.