Search the Community

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. You’ve used Panda to add a new Asset to your game. 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!

Hi all, I'm a newbie at panda js and pixi js and I want to try using lesser-panda for my project because it look like lesser-panda still maintained. I got several problem that need to be discuses to. Is there any lesser-panda community for me to have some question and discussion? Thank you

Hey there everyone. Using Panda Im wondering how to slow down the default FPS in Animations. Currently i use loop to animate sprites. For(i=0, i<W1Height,i++){ W1.scale+0.1; W1.addTo(this.stage); Will run about 32 times, how to slow? Just use a smaller number than 0.1? Any ideas...

Hey everyone, I've been developing with Panda for the last 3 months now. Great engine, I prefer to PIXI because of the long class names, makes it very easy to see what inherits from where. However I have become stuck with Spritesheets and Animations, Please could anyone point me in the right direction? //OFFICIAL DOCUMENTATION // Creates spritesheet with frame size 138x100 var spritesheet = new game.SpriteSheet('spritesheet.png', 138, 100); // Returns sprite using frame 0 from spritesheet var sprite = spritesheet.frame(0); sprite.addTo(this.stage); // Returns 15 frames long animation, starting from frame 2 var anim = spritesheet.anim(15, 2); anim.animationSpeed = 0.3; anim.play(); anim.addTo(this.stage); // Define animation frames with array var anim = spritesheet.anim([0, 0, 1, 2, 3, 2]); //=================================================================================// //PERSONAL ATTEMPTS //====================SPRITESHEETS=====================================// //=====================================================================// var SS = new game.Sprite('DALEKHASH.png'); //Dalek Standing var DalekS1 = SS.crop(157,1,58,123); //var DalekS2 = SS.crop(x,y,w,h); var DalekS1 = new game.Sprite; //var DalekS3 = SS.crop(x,y,w,h); var DalekS4 = SS.crop(x,y,w,h); //Dalek Up var DalekU1 = SS.crop(868,1,64,118); //var DalekU2 = SS.crop(x,y,w,h); var DalekU1 = new game.Sprite; //var DalekU3 = SS.crop(x,y,w,h); var DalekU4 = SS.crop(x,y,w,h); //Dalek Down var DalekD1 = SS.crop(157,1,58,123); //var DalekD2 = SS.crop(x,y,w,h); var DalekD1 = new game.Sprite;//var DalekD3 = SS.crop(x,y,w,h); var DalekD4 = SS.crop(x,y,w,h); //Dalek Left var DalekL1 = SS.crop(1232,1,89,115); //var DalekL2 = SS.crop(x,y,w,h); var DalekL1 = new game.Sprite;//var DalekL3 = SS.crop(x,y,w,h); var DalekL4 = SS.crop(x,y,w,h); //Dalek Right var DalekR1 = SS.crop(1133,1,97,115); //var DalekR2 = SS.crop(x,y,w,h); var DalekR1 = new game.Sprite; //var DalekR3 = SS.crop(x,y,w,h); var DalekR4 = SS.crop(x,y,w,h); //=======================ANIMATIONS====================================// //=====================================================================// //DalekRAni = new Animation (DalekR1,DalekR2,DalekR3,DalekR4); DalekSAni = new Animation (DalekS1); DalekSAni.animationSpeed = 0.1; DalekSAni.play(); DalekUAni = new Animation (DalekU1); DalekUAni.animationSpeed = 0.1; DalekUAni.play(); DalekDAni = new Animation (DalekD1); DalekDAni.animationSpeed = 0.1; DalekDAni.play(); DalekLAni = new Animation (DalekL1); DalekLAni.animationSpeed = 0.1; DalekLAni.play(); DalekRAni = new Animation (DalekR1); DalekRAni.animationSpeed = 0.1; DalekRAni.play(); //=====================STAGE MOVEMENTS==================================// //======================================================================// //This is where we add IF statement for MOVEMENT if (game.keyboard.down('UP')) DalekUAni.addTo(this.stage); else if (game.keyboard.down('DOWN')) DalekDAni.addTo(this.stage); else if (game.keyboard.down('LEFT')) DalekLAni.addTo(this.stage); else if (game.keyboard.down('RIGHT')) DalekRAni.addTo(this.stage); else DalekSAni.addTo(this.stage); zArray3.zip

Hi there, I'm trying to get Panda.js running from node using the pandatool but unnfortunately I'm encountering some problems with building the app. This is what I have done sofar: > npm install pandatool -g> panda create project1> cd project1project1> panda buildwhich gives the following error: C:\git\pandatest\testproject\project1>panda buildBuilding project...C:\Users\rtpa\AppData\Roaming\nvm\v4.2.3\node_modules\pandatool\build.js:56 delete game.config.debug; ^TypeError: Cannot convert undefined or null to object at Object.module.exports.exports [as build] (C:\Users\rtpa\AppData\Roaming\nvm\v4.2.3\node_modules\pandatool\build.js:56:16) at Object.<anonymous> (C:\Users\rtpa\AppData\Roaming\nvm\v4.2.3\node_modules\pandatool\panda.js:7:17) at Module._compile (module.js:435:26) at Object.Module._extensions..js (module.js:442:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:311:12) at Function.Module.runMain (module.js:467:10) at startup (node.js:136:18) at node.js:963:3Is this an error in the pandatool code or am I doing something silly... Any suggestions?

Hi all! I'm new to this forum and also new to HTML5 game development. I've basics of HTML5 and JavaScript as my background. My game project is about 2d sniper game. For this, I've come across game engines like Phaser, Easel, Panda and Pixi. I completed the basic tutorial for developing games with Phaser and Easel. I checked out Panda (didn't go thoroughly) and turns out it also uses Pixi for rendering. My major requirement is a mobile camera to zoom and move my crosshair to the target. I would like to move the camera using mouse. For this, I think Phaser and Panda provides a great support with the camera object. But I wanna enhance my game dev skills so Phaser would not be a great choice since it focuses on fast easy development. With that said, I'm having problems with Easel. I don't know how to manipulate the camera and also I don't understand what the 'ticker' class in the docs does. I'm having troubles choosing one out of these. It would be very helpful if the someone having experiences using these game engines will help me out with some feedback or recommendations. I would like to thank in advance. Note: I'm sorry if this question has been already asked in this forum or my question is not valid. I just posted my question without searcing much

hi all i 've created a small demo with panda.js,but not display anything on iOS iPhone (it works fine on Lumia 925); no missing assets. Here my config.js pandaConfig = { name: 'sotb', version: '1.0.0', disableCache: true, system: { width: 640, height: 400, webGL: true, hires:1, retina:false, scaleToFit: true, resizeToFill: true, scaleMode:"bicubic" }, debug: { enabled: true }, audio: { stopOnSceneChange: false }}; Panda.js 1.13.1Pixi.js 2.2.5Canvas renderer any suggestion? thanks!!

I uploaded my game to a server, and the browser on my laptop see the game, income from the iphone and I see nothing. As I set to work on my iphone? Thanks.

Hello! I'm new to this forum and I've been reading through different topics and looking for comparisons between the different frameworks but I can't decide where too go with this. I know how to program but I've never done games. I would like to know from experts voice and from people who already did projects like the ones i'm looking forward to develop which is the framework I should be looking at. I want to develop simple 2D games, nothing with too many design, games like space is the key or flappy bird. I want to be able to publish the games to google play and to the app store and also being able to add ads to he games to earn some money if possible. I've been looking at Phaser, PandaJS and Hexa. Which one do you suggest to use? Thanks,

hi!, I just have a weird problem, and just on ios (I think android gave more memory to browser resources). I have a dinamic game, with a dinamic map, so I generate a tileset of 26x25 tiles (100x100 each tile), and then I tried two things: that container, I convert to cache as bitmap, and when the player got to the final of that tileset, I cacheasbitmap = false the container, remove all sprites, and then add a new tileset (but from same tileset family, only change order, and all tileset are added on start), and make cacheasbitmap again, the other method I use, is instead of cacheasbitmap that tileset container, I add tileset too, but use the generateTexture() method, and to delete it, I use texture.destroy() method. The two methods works, I have 1 draw call per tileset instead of 400, so thats very nice. THE PROBLEM!!, is, no matter what I do, on ios, (on iphone 6 plus!! so it's not a limited ios device), when I generate, the 6 or the 7 tileset, the browser crash and restart, and I already check and have sure is this method that crash, because I try to only generate 5 of this segments of tileset, and then no generate more, only move on the last one, and the game don't crash, so I think, whatever I do, removing this sprites, or destroy the texture, I think the engine doesn't really remove from memory, have someone this problem before?? really thanks!

Hi. All, I have this script (use debugdraw to see the shape). When I use Panda 1.12.0 it is working properly. But when I switch to Panda 1.13.1 the collision functions are not called. Is this bug or something? Thanks. game.module( 'game.main').body(function() {game.createScene('Main', { init: function() { this.world = new game.World(0, 100); var f=new game.Food(); var m=new game.Monster(); }});game.createClass('Food', { init: function() { this.radius=9; this.body = new game.Body({ position: { x: 320/2, y: 100 }, velocityLimit: { x: 300, y: 800 }, mass:1, collisionGroup: 1, collideAgainst: [0] }); this.body.velocity.y=-100; this.body.collide = this.collide.bind(this); var shape=new game.Circle(this.radius); this.body.addShape(shape); game.scene.world.addBody(this.body); game.scene.addObject(this); console.log(this.body) },//end Init() collide:function(opponent){ console.log('Collision! On food') }});//End Class 'Food'game.createClass('Monster', { init: function() { this.radius=15; this.body = new game.Body({ position: { x: 320/2, y: 300 }, velocityLimit: { x: 0, y: 0 }, collisionGroup: 0, collideAgainst: [1] }); this.body.collide = this.collide.bind(this); var shape=new game.Circle(this.radius); var rshape=new game.Rectangle(40,40); this.body.addShape(rshape); game.scene.world.addBody(this.body); game.scene.addObject(this); console.log(this.body) },//end Init() collide:function(opponent){ console.log('Collision!') }});//End Class 'Monster'});//End bodyPS: Sorry for my english.

I'm trying to scale one of the pandajs demo games to fit a parent container on a webpage, I've been trying to use: game.scene.stage.scale.set(0.5,0.5), where my thinking was that I would have to calculate the scale factor using the difference between the parent's dimensions and the game's resolution. This doesn't feel like the right solution. I also have to scale the game for each scene, which also doesn't feel right. I'm not sure if I'm missing some kind of feature like phaser where you can state the game's parent then set the game to "SHOW_ALL" or something? I'm really trying to get the hang of Pandajs seems like a cool framework. Any help would be really appreciated.

Play [fullscreen, any device] Our humble attempt to create game with Jelly Splash game mechanic which is my favourite among all match3-like games. Game was intentionally developed as simple witouth many features. I wanted to see how html5 publishers will accept this game. But we are going to develop sequel with levels map, different tasks and all that stuff. So we need your feedback to polish this one and use it as base for sequel. Game was exclusively licensed by SoftGames and available there also - http://m.softgames.de/games/play/pandalicious Thanks in advance!

Hello guys, I'm trying to get this code working: game.module( 'game.main').require( 'engine.core').body(function() { game.addAsset('box.png'); eNemies = game.Class.extend({ init: function(vel, px){ this.containerEnemies = new game.Container(); this.containerEnemies.addTo(game.scene.stage); this.sprite = new game.Sprite('box.png',px,500,{anchor: { x: 0.5, y: 0.5 }}); this.sprite.interactive=true; this.sprite.addTo(this.containerEnemies); this.sprite.touchstart = this.sprite.click = function(){ this.remove(); } }, update: function(){ if(game.system.paused != true){ speedRandom = Math.floor(Math.random() * 280) + 100; this.sprite.position.y -= speedRandom * game.system.delta; } }, remove: function(){ game.scene.removeObject(this); } });game.createScene('Main', { backgroundColor: 0x44cce2, init: function() { eNemiesArray = []; i = 0; createEnemies = function(){ posXrandom = Math.floor(Math.random() * 500) + 1; this.eNemiesArray[i]=new eNemies(120,posXrandom); i++; setTimeout("createEnemies();", 250); } createEnemies(); }, });Enemies creation is working, enemies onTouch event also, but the update function, to move every enemies seems to not work, can you help me to understand what's wrong? Thank you

Hi, I'm newbie in development of games in HTML5. During this weekend I made my first HTML5 game with Panda game engine. It's quite simple, your goal is to build the tallest tower from various bricks and let building stands as long as possible. Game using p2.js plugin for physics. You can play it here: http://crazybricks.clay.io Thanks to @enpu for great work around Panda engine.

I am using flaying dog to learn panda. I have made some little changes in the game by my own but i cant figured out how to use diferent sprits when the object crashes and when the object land. Any help?

First of all, this is my first post (in fact, a topic) and I didn't know where to ask for this, so please don't be to hard on me. Having said this, I explain my problem. I googled around and I see "node.js" everywhere. I though panda.js was a framework for including it into a web page as any other game engine around (like Phaser and such, that you use a script tag to include it). I've got Apache as web server, can I make panda work? Am I missing something? Thanks in advance. Leo.

How do i change the ingame font? I tried to create a .fnt file with the app called BMFont I then loaded it as an asset and in the game BitmapText methods i called my font instead of the "Pixel" font The result was that the game never loaded But i didnt get any errors in the javascript console..