Sign in to follow this  
Wolfsbane

Full Game Tutorial: Making Minesweeper

Recommended Posts

 

Tutorial: Making Minesweeper

(Preview of what we'll be making)

Df4Tp1vyv8nXw9bnP6QmWOHSbZq9nKmMXjltzZJDgZZmVMyzeAp0KAgXe2j6iP8tfvoBCpFizAKqRDVtwhyUYMgxNCOuuhGOM09eF1DMB0uLnQ9uu8srU_l0Z6ePqAEcbRKnIdIb

q_wMpWnc9xg4W_PzTTUCn2tIe8ygZ857g-zvGGjvkc41eCv1zdLk-Om12irEgkmN7l0VMVFJvjYiDZtYiINon2WgcMMS2G_sBAoyDi8NQZM5_4QiNfh6TzGU0LcSvAxNwEtDX6EI

 

Introduction to MineSweeper

pxcEeXQCz79UjK0_FM6ZvdOFYHqRI-2G1rPnw82uUffcuZ8rGRks51v8hx5PstGHQ6YNxMewP6CvEM2s94SS4r6-5F63GjprnpSybALtO6jL1Qku3dxKjYhiaAnWKS2_JvjJFaIZ

(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.

B54i9-gQUkaI0Zx63nLMILU2D8Hsigmgfh1SCkH-4AwEL-FMbgDFII-KjhHPI5QgkCcfU-U6oAtH17kVg4obF0nk1zGYwYXk0BbkrFboDwnGAx7YlLHPS-NUM2NEKLj2fUJ18lZ1

(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:

QZJhxGQC7f_8RSgTXfMvNFFhFU_M7wwu_i4sVx0zRd0lfhW_SbUYWRml6AA6tz2NzDaeVw0Zl3r9blS4irtqewePOH08H9RQGW5FUNkIhxNCQ8mK1a8MRXkP1-JjpxKsZiBzMc6X

(Figure x. Adding assets to the game).

 

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

U9URNiRY0084cLsHx_W23AxQDLn8n9y7f_8dqYAvXVJwN1vlLjw8engq7woNLJYdnB3aTF1UkGJRzhpU4EnV8R7JU7lYMlKDGMuZ4lXVpen-ipyEBQJjSSVu8bdB-a8TlxuzxpW3

(Figure 1.x the assets for this game)

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

pWc3f_lOdXNZlsZDidtxc4zMdVAXz9-vecVvjyjQE05CWj533jvKu5mBsIUSlw8gwK9RbDcCy9en1NQfVouJEHa1wn0wvWDMOqHZ80TCzIE5GPecIczUvXZhT6h9cJD9joZ1t0qG

(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)

bpiWvZZFRGYDgQWVS1ri31GBucTtQ_uE_mHZ_bL_CXSBlXjSTzW7m-sBQuR_xF6t8xzEPvot41lWkf7PVcU0DgkRG5C6Ojqe0RsHocN7PmLRKxzLWuW3ML_7OXIKU85UTn07kP1W

 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:

e88asuZuYXidinprC6Bz3wFdr8LOkF-es9HT13MXBrhckh8mA5TCqz-edg43AwpelH0bqiLgsyC49b_J2M594PuQp1L4xosdtycBnmmXrAlxhGr4PL4zYZrzcora3wjjhfCdbQS_

 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:

ZOmwZuN9CmQaQQNlZyVZ2v-GqwCftJZouj2xb5KmbxHv6CmF13YV0FkP9QqedMwd29OWdTBNxO9BAdrV02CtCtyE51tXO5A5ssYCHz-8EbZGD3WJAO9o-64lxedd4ls6-P20VHrU

 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:

MaFU-gfSjY6OjQ7zhvMgOXyggL9yIyI6mt88p5QdtZ9a-1_Uv-1wKcs3aB1buWyrjwtxEfxuz1AoPMIUHZ2vMI5iFHfDPi4TLvuwe4hAYp90tgLmXMNvjBX8SxV4XTefyvMy57PR

 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:

And Finally...

Leave some feedback. :) Cheers!

 

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.