Full Game Tutorial: Making Minesweeper

[Wolfsbane]

 

Tutorial: Making Minesweeper

(Preview of what we'll be making)

 

Introduction to MineSweeper

(Image 1. The classic Minesweeper. You can play a version of it online at http://minesweeperonline.com )

Minesweeper is a classic game, which just about everyone who’s ever had a computer has played before. It’s a sometimes frustrating puzzle game, that mixes a bit of luck with a head for numbers. It’s a simple design that can challenge the player again and again no matter how many times they play it.

Basic Design

Before we can get into writing any code, let’s take a look at the design of the classic Minesweeper.

 There will be three basic game objects: A square, the playing field that contains all the squares, and the ‘Smiley’ faced button. The basic gameplay is the player has to uncover the whole field, except for the mines. He can place a flag on top of mines by right-clicking to avoid clicking on them. If he accidentally clicks on a mine, it blows up, and he loses the game. If he manages to clear all the squares without clicking on a single mine, then he wins.

 Each object will have the following behaviors:

Game Objects Table 1.1

Square	Playing Field	Smiley Face
Could be a bomb Could be next to a bomb. If it is, then the square has a number. Flags can be placed on top of squares.	Is a list of Square objects. These squares need to be created in the room, and the bomb needs to be randomly placed. If all the non-Bomb squares are cleared, then the player wins.	Looks anxious when the player presses a square. Looks dead when the player presses a bomb square. Looks cool when the game is won.

 

Tools

Panda2

Link: https://www.panda2.io/

 Panda2 is a visual way of writing HTML5 Javascript games. It allows you to immediately see the code changes you're doing onscreen. It's built on the Panda Engine, which is an opensource html5 engine.

ImageEditor

 Any image editor for creating png’s to use for the game’s graphics. But don’t worry, the game resources are included with the source code so you can get coding without spending time trying to create game resources.

Step 1: Setting up the Base

 So you’re ready to make the latest, and greatest MineSweeper game. Great! But how will we start?

 In Panda2, create a new project.

(Image 2. A blank project).

 The first screen we’re presented with the base game setup: This is where the core ‘engine’ is loaded for the game. You can see first it’s loading the engine, then the config,  before it starts main.js. We don’t need to worry about the engine, so first let’s add some graphics we can use in the game.

 Click on the asset tab, and then add graphics:

(Figure x. Adding assets to the game).

 

 Go to where your game graphics are stored, and selecte the Square graphic to load.

(Figure 1.x the assets for this game)

 Click on ‘Main’ in the sidebar. You’ll be presented with your ‘game logic’.

(Figure 2. Main.js. This is going to be the starting point of your game).

 Click on line 12, to get your cursor there, then press the (+) button, which is indicated by the red arrow in Figure 2. It’ll create some code for new, a new Class. Go ahead and call it ‘Square’.

 After creating the Square, now we have to add the sprite for it. Click again on the asset tab, hold down Alt and click on the ‘square.png’ image. You should now see the following code added to your game:

game.addAsset('square.png');

 Make sure this code is just above your ‘Main’ definition.

 Now: Inside Square, change the init function to this:

init: function(x, y) {        this.mySprite = new game.Sprite('square.png');        this.mySprite.position.set(x,y);        this.mySprite.addTo(game.scene.stage);    }

 And inside of Main.init(), add the following line of code:

var playingField= new game.Square(96,96);

 All together, it should look something like this:

game.module(    'game.main' ) .body(function() { game.addAsset('square.png'); //press alt+click on square to add it to game. game.createScene('Main', {    init: function() {        var playingField= new game.Square(96,96);    } }); game.createClass('Square', {    init: function(x, y) {        this.mySprite = new game.Sprite('square.png');        this.mySprite.position.set(x,y);        this.mySprite.addTo(game.scene.stage);    } }); });

 Save and refresh. (the red arrow in Image below points to the Refresh game button)

 Congratulations! You’ve created the first step of the game.

1.  You’ve used Panda to add a new Asset to your game.

2.  You’ve created your first game object, and you’ve created your first sprite to draw into the game.

 What we’ve created so far can be found in the minesweeper_01 project in the source code.

 Now: While what we’ve achieved is not that impressive, we’re getting familiar with the workflow of adding game resources like images, and creating new gameobjects. Now that we’re familiar with this, we’ll now be able to quickly create new objects and display them however we please. Other resources, like music and sound are added in much the same way.

 Next up: We want to create a playing field. And we want to add some game function to the Squares (Like Bombs!).

Step 2: Creating the Playing Field and adding interactivity.

 In this step, we’ll create the actual playing field of squares, we’ll turn some of the playing fields into bombs, and we’ll let the Player click/tap on the squares to reveal them.

•  We need to add more assets to the game.
• This includes loading 2 font resources: 
  • Fonts have 2 files associated with 2 files: *.fnt file, and a *.png file.
• Load the extra assets into the game.
• Add a PlayingField game object. Add Bombs and code for checking for bomb.

 Our game now looks like this:

 It’s getting there! Squares now know if there’s a bomb next to it, or if it’s a bomb. Square are also randomly assigned a bomb.

 The full code for where we’ve gotten to so far can be found in the minesweeper_02 project files.

Step 3: Implement basic game logic.

 In this step, we code the game to have win/lose logic. We add some of the classic Minesweeper features, such as marking squares with flags, and adding a ‘Smiley’ face to the GUI

 The game now looks like:

 Full source code can be found in minesweeper_03 project files.

Step 4: Adding some final polish.

 Final code polish. Flagging mines on game complete. Exploded sprite. Adding Animation.

 Game now looks like:

 Full source code is in minesweeper_04 project files.

Final Step: You!

 The next step is to take this game to the next level. Here’s some suggestions:

•  Traditional Minesweeper is a fixed grid. Add some level design! Change the pattern. There’s no reason to even keep it to be squares. Use hexagons, or circles. Put it in space!

•  Polish the game! Add Music and sound effects. Add a Title screen. Add some cool explosion animations if the player clicks on a bomb. Make stars fly out when the player wins.

• One thing that players of the traditional minesweeper do is play for the hi-score. Add a timer and track their scores. Let them share their scores on Social Media

•  Release it! The Panda2 editor has some features to easily export and release your game across multiple platforms. Some of the platforms it currently supports are Android, iOS, Facebook Instant Games, AndroidTV, XBoxOne.

Source Downloads:

• minesweeper_01.zip
• minesweeper_02.zip
• minesweeper_03.zip
• minesweeper_04.zip

And Finally...

Leave some feedback. Cheers!

 

[Wolfsbane]

Might be worth noting that from Part 1 I put in excessive details (screenshots, etc), but I dropped that in part 2 onward. Let me what level of details is appreciated. ?

A tutorial for a JS engine is tricky: It has to either assume either a complete beginner, or someone who understands programming fundamentals and just wants to learn the workflow of building a game with JS. 

[khleug35]

Thank you for your tutorial, very detail and helpful!!

[enpu]

Really good work @Wolfsbane

[Alexeyy]

Best explanation ever! Could you say briefly, how to write infinite minesweeper like that?

I can share my experience.

• Do not try to use one huge canvas. It won't do. Huge canvas is way too slow. (trust me, I tried it)
• Keep your field in JS object. Don't try to use 2d-array. It's too slow. (i.e. don't use f[x][y], use f[`${x}-${y}`]; the second solution works faster, it's not obvious, however, it's true)

[Wolfsbane]

Thanks @Alexeyy, ?

Not sure about an infinite minesweeper: If was designed the same as the one shown then you could do it the same way as is programmed in this tutorial: Just keep the active pieces as a linked-list. All 'inactive/dead' pieces would be disabled and never polled/used.

You honestly wouldn't even need to use a canvas if the game is so static.. but you could use a huge canvas, but you'd have to be careful with your drawing: There aren't animations,(typically) so again, for inactive/dead pieces just draw it to the canvas once, and don't re-draw it. E.g. most game engines typically have the canvas refreshing every 30-60 fps.. but for a turn-based non-animation game like Minesweeper, doesn't need it. 

Let me know how that goes!

Edited April 5, 2020 by Wolfsbane

[CpuWizrd]

Quote

 

Would love to go through this tutorial... any chance of getting the source code? The links say unavailable...

Thanks in advance!

Oops...

after I signed up they were available...

THANKS!! look forward to trying it out!

Edited January 8, 2021 by CpuWizrd