The last thing I’m going to do for this tutorial series is show how to implement the scoring and level mechanism. The idea of the game is that as you clear lines, you get points to increase your score. After you get enough points, you move on to the next level, where the blocks fall […]
Tag: HTML5
Tetris in HTML5 for Noobs: Part 8 – Game Logic
We’ve almost got a complete working game, and in this chapter we’ll look at adding the game logic to make the tetriminos fall on their own and keep score. To make the tetriminos fall, we need to lower the position of the current piece by one block at regular intervals. To do this, we need […]
Tetris in HTML5 for Noobs: Part 7 – Basic Collision Detection
Now that we have a game state grid variable, we can use it to implement basic collision detection. We want to prevent moving the current game piece into any existing tetriminos or off the grid boundary. To do this, we need to modify the setGrid function so that it can check to see if a […]
Tetris in HTML5 for Noobs: Part 6 – The Game State Grid
In this chapter, we will perform a major restructuring of the code to allow drawing multiple tetriminos at the same time. We’re going to create a variable called the state grid that will maintain the state of each grid location in the game canvas. A zero will represent an empty location and the numbers 1-7 […]
Tetris in HTML5 for Noobs: Part 5 – User Interaction
So far, we’ve only been creating static images with our drawing commands. The next step is to make the images move. Games demand some level of interactivity, so we need to be able to respond to user input. In Tetris, the user is able to move the current tetrimino to the left or right, adjust […]
Tetris in HTML5 for Noobs: Part 4 – Tetriminos
The drawBlock function we wrote last time lets us draw a block at any point on the screen, but it looks pretty flat. If you look at most Tetris games, the blocks have a beveled edge to make them appear three dimensional. We can add this purely stylistic effect to our game to make it […]
Tetris in HTML5 for Noobs: Part 3 – Basic Drawing Commands
Now that we have a basic layout, it’s time to start drawing objects to the canvas. Pretty much everything we do from here on out will be done in JavaScript. We can add a script section to our page by adding a <script> block to the <head> section of our code. So far, we’ve gotten by […]
Tetris in HTML5 for Noobs: Part 2 – Basic Layout
Alright, let’s get started. The first thing we need to do is set up our development environment. With HTML5, it’s about as simple as it gets. All we need is a text editor and a web browser. On Windows, I like to use Notepad++ and Google Chrome, although any text editor and modern web browser would […]
Tetris in HTML5 for Noobs: Part 1 – Introduction
I had a thought today: I should make a game in HTML 5. Actually, it’s an idea I’ve had for a while now, but have never really had the time or motivation to do it. So why now? I had a conversation with one of my friends and was asked how one would go about […]