Sliding Puzzle: Make A Classic Game using Javascript & P5.js Framework | Saran Siri | Skillshare

Sliding Puzzle: Make A Classic Game using Javascript & P5.js Framework

Saran Siri, Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (19m)
    • 1. Promo

    • 2. Draw The Tiles

    • 3. Move The Tiles

    • 4. Randomize The Tiles

    • 5. Match The Winning Tiles

    • 6. Count The Moves


About This Class

Learn how to make classic games using P5 online editor! 

This is my game tutorial series where I teach javascript and P5.js framework using classic games.

Check out other classic games
Snake =>
Pong =>

Online Editor =>


1. Promo: Hello. My name is Iran. In this class, I will show you how to make a classic sliding puzzle game using JavaScript and P five framework. You need to know the basic understanding of JavaScript. And if you want to learn the basic function in P five, I have many causes on that, too. In this class, we look over how to draw the tiles. Move the tiles random, minus two tiles. Check whether the player wins the game and count the move. Let's open the next lesson and get started. 2. Draw The Tiles: go to editor the p five years dot org's and Zion if you haven't done it yet, and to start with a new sketch first, we will change the canvas size to 400 by 500. So we have a gap to display how many moves failure has used, then greed and airy to store the tiles, let tiles equals records and MD array and also create a size of the ties. Whether is three by three or four by four. Make it three by three. For now, let size Ego's three. Then we review the tires variable with a table full of numbers, using follow ups in the set of function. Right down for that's why ego zero Wireless and three, which is his ice one plus plus brackets, create an empty row for the tiles. Tires at Why? Because an empty array. Then in each row, we will and an array feel with three zeros. So for latex. ICO zero x less than size X plus, plus brackets, tires at why at its equals. Zero. Let's check if the follow ups populate the numbers correctly by printing them out. First consoled that table. Put the tires in in the console. It does create three by three tiles. Then we will draw each rectangle to represent each tile. Do you find the size of the game board itself? Let the board size equals 400 pixels. Let be Size equals Floren it now in a draw function and the fall groups. Four. Let why ego zero. Why is it in size y plus plus inside that we have four. Let X ik 00 XLs them size ex Christmas in here. Since the board size for ended and we want to fit three political rectangles, the tile size or tea size would be 400 divided by three. So let T size equals be size for in it. Do you want to buy three dis ice, then draw a rectangle raked position X is X times T size. So why is why times the size further with is T size and the height is t size run, and it should look like that if I change the size before. If you adjust the T size to 100 by 100 then we would draw a number on top of east higher text. Get the number from each tire tiles at why at X for the exposition is 0.5 plus x group them couldn't horrendous is and times T size. I have two and 0.5 in because I want to shift it to the left by half the size of the tile sites. Same goes for the wind direction 0.5 plus why times key size it run and that you go next. Let's make the text centered and make it bigger below. Create canvas type in text. Online center center. Set the text size to 24 text size 24 Get run now is easier to see next. The players should be able to swept the tiles around and in the game when the numbers are like 123 45678 and zero. So in a loop we will change numbers in tiles instead of zero. We will assign one plus X plus why times size did run. The last position here should be zero instead, after the Liukin's and tiles at size minutes one size minus one equals zero. Also, we don't want to display the tile number zero or recall the empty time in the drawer function could an if statement saying, If this tile it's not zero, then do the rest draw each rectangle in number. 3. Move The Tiles: the core allergic of the game is to swell the empty tile with a tire. That player clicks, So let's start with making a swap. Function it. You take positions of two times, and it's looked in because each tile is represent in X and Y position. Swell function needs four parameters, so functions work. Why one x one. Why two x two To throw up two tiles, we will store the first tire number in a temporary variable. Tim equals value. A first tile tiles at why one x one outside a number from second tile to two first heil so it would be first tile. Eco's second tile finally has signed Attempt number two, the second tile tires. Why two X two equals temp. To test this work function at the mouse pressed function, it could be below this work function Function most first when the mouse is pressed, let's what these two tires swoop. The first tile Is that why you go? Zero x ico zero Your second tile is that why who zero f equals one? Run it. When we click on the screen, there should be swept. Next we will have too few. These numbers with a tire that repress and the M D tile. I removed this work here first computer loops and ask when a tile is not zero. And also we will use the chief size again in here. Copy pass, then check with her. Most Sex and mas y, which aren't the current position of the mouse, are inside. Each tiles boundary is most X greater than or equal to x times T size and my sex less than or equal to X plus one times T size and muscle Y is greater than or equal to why times, T size and most why less than or equal to y plus one times t size. So when the most position is inside this style, try to swap them by calling the function. Try to smoke, which really created somewhere later send in his current position. Why Comma X now for the try to swap function, did you take in all four directions? Whether the MD tire is, it doesn't. If the empty tile is, it does and swap this tile with the empty tile. If we have to make sure the left tire does exist, first s minus one is greater than or equal to zero and the left tile riches tiles at why x minutes 10 then swept the current tile. Which is that Why X with the empty tile on the left? Which is that? Why X minus one? Do the same thing if the right tire is empty. Attendant from X minus 12 X plus one If the right tire exists, X plus one should less them size and tiles at why If plus one equals zero, then swap y X and why X plus one, too more wreaths for the top and the bottom. I'll see if y minus one is greater than or equal zero and tiles at Y minus one at X equals zero Slump blanks Y minus one and x Aziz one plus one less than size and tiles y plus one x equals zero swept wanks Why plus one annex. Get run Now The empty tile should be able to move anywhere on the board 4. Randomize The Tiles: What we have now on the board is the final move of the game players. You don't start with this. We have to swap the tires random. The first. To do that, let's create a randomized function. Function randomize. Let I equals zero. Let's say that we want to swap the titles 200 times. So while I is do less than 200 keep the X and Y position randomly. Let's X equals random function from zero to less than size. Put it in person function to make it an integer number. Do the same thing for why direction random from zero to size, converted to end using percent. In this case, our size is three. This be randomly if you 01 or two. Once we have a random position off the tiles, try to swept this position, if possible, with the empty tile, so try to screw up. Why X? Keep swapping 200 times. Increase the counter and two d. I hit 200 to get out of the wild. Call this function in the set of function. Now it looks randomly generated 5. Match The Winning Tiles: that step is to come home and he moves to finish the game and also this. Play it below the board and the moves bearable. Starting at zero. Let moves ecos zero. When the player successfully swaps the tires, increase the moves by one below, trying to swap ad moves plus plus recent moves. When the game ends, Moves Eco's zero finally displayed in draw function. Put it at center. Text moves. Colon plus variable moves comma. Put it at center with divided by two comma for 50. Run it. You can change the size to four to make it harder. Now this plant and that's it. Thank you. 6. Count The Moves: next step is to check whether the player wins the game. We have another tires variable to represent the winding tiles. If you have everything that ties better, go has before being swept 200 times. Let win tires, equals an array and win times in the far loops. Ban tyres is wind ties. Why equals an array? Wind times Y x He goes one plus x plus. Why time size win tires sighs minutes one size minus one equals zero. Then we will create its wind function to check with the current position of the tiles. Look exactly like the winning tires function is when computer for loops and ask if any position in tires is not the same as the winning times. Even if I know when you once then returned false ive tiles, Why X It's not the same ass. Win tires one X returned force. If all the ties are mashed, return through. Then when the mouth expressed. Asked if the times are mashed, the player wins the game. Yes, his win is true. We said the board, by calling randomized and don't do anything below that, so the rest should be in the else statement. Tried it out. No, if I click on a screen again after I won, you should call randomize function