Snake Game Tutorial – Episode 1: Introduction

Snake Game Tutorial – Episode 1: Introduction


Hey guys! What is up? This is Frank. Welcome to the first episode of – Snake Game Tutorial with Frank! In this tutorial, we will create a snake game that is entirely based on JavaScript, CSS and HTML. So after you finish this tutorial, you will get a webpage that looks something like this. This is a little demo I did with the snake game, and – I don’t know if you guys can see it – I can control the snake with my arrow keys. The snake will react whenever I press the key – it will react accordingly. And – And when it dies… Boom! You got a restart button. So you can see that it also has a theme colour selector, which is not necessary for the game, but it would be a pretty handy
extra feature. Same as the level. You can choose the change of speed after you eat food, or apple or fruit or whatever you call it in your version, and you have a start, pause
and play button. Oh, of course you have a score, and a canvas. So, before we start, we will be looking at the overall structure of the document as you can see on my demo. The very essential part – will be – the canvas, where – where the snake will be drawn on – that’s a pretty decent snake XD – and then – we will have – (a) food. We can also add a score feature – let’s say, 50 points – and as you can see on my example one – let me use another colour – let’s say, blue – so blue are extra features – we can have a theme
selector – dropdown menu – and then we can have a level selector. And we can also have a title: Snake Game. And we can have a play/pause button – let’s call this play/pause button – so these are some main elements that we’re gonna focus on – so that’ll be – let me change it back to red – in total, we have – I don’t know what happened there – eight elements. Remember this count; this will be how many elements we need in the final version of our snake game. So, anyway, here are some main elements and steps, as I mentioned in the previous slide. First of all, it’s the snake, the most important thing, then we have the food, and another big topic will be how you would move the snake – we would do that with JavaScript – and finally we need a score, scoring system. So for the snake part, we need to learn how to draw a canvas using thetag in HTML5, and then we have to determine where on the canvas our snake is going to be. Since it has many parts, we will learn how to draw the snake parts one by one onto the canvas. Then we have the food part, also another main element. We need to learn how to randomise the position of the food, and then (followed by) how to draw the food onto the canvas. And the third part – I think it’s the most interesting and fun part – is to advance the snake and to detect – when the user presses a key, how to determine if it’s – if it’s up key, down key, left or right, and how to move the snake according to what the user has pressed. And the final part is the scoring system. We know that when the snake touches the food, hits the food, eats the food, there will be an addition to the score. And we also need to learn how to display the score on the page. So this will be the first introduction episode of our snake game tutorial. In the next episode I will be writing the pseudo code of the game, so please tune in for future episodes. Also since you guys must have been very experienced users of YouTube ¯_(ツ)_/¯, please like, subscribe, and click the bell button, so you get first-hand information when I upload a new video. Yep, that would wrap up this video, and I hope to see y’all in the next episode of Snake Game Tutorial with Frank.

Randy Schultz

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *