Jump to content

Search the Community

Showing results for tags 'gameboard'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 1 result

  1. I'm building a Number Tumbler game. The original work, which is not mine is at https://lumoludo.com/numbertumbler/ However, I thought it made for some good practice, so I've tried to code my own version as an exercise from scratch. I have my create function here create: function() { //this.initScores(); this.makeBoard(); this.generateTiles(); //this.startTimer(); }, The only two functions relevant to my problem are the makeBoard and generateTiles ones. This is the makeBoard function, which draws the game board. makeBoard: function() { cells = this.game.add.group(); var xPos = 50; var yPos = 100; for (var i = 0; i < 5; i++) { for (var j = 0; j < 5; j++) { cell = this.game.add.graphics(0, 0); cell.lineStyle(1, 0x0000FF, 1); cell.beginFill(0xC71585, 1); cell.drawRect(xPos, yPos, 90, 90); cell.endFill(); cell.inputEnabled = true; cell.visited = false; xPos += 90; cells.add(cell); } yPos += 90; xPos = 50; } gameStats.target = this.randNumber(); }, I started out by creating a group to store the tiles/squares/cells. Since this is a 5 x 5 game board, I decided to create a nested for loop, that will first iterate over the rows and then the columns. Since the tiles/squares are rectangles, the appropriate type is Phaser.Graphics. This allows the important drawRect function. I'm also calling the generateTiles function to add number text to each rectangle. generateTiles: function() { cells.forEach(function(cell) { var centerX = cell.getBounds().x + 30; var centerY = cell.getBounds().y + 20; var num = this.game.add.text(centerX, centerY, gameState.randDigit(), { "fontSize": 40 }); cell.addChild(num); var number = +(num.text); cell.events.onInputOver.add(function() { console.log("Number: " + number); if (game.input.mousePointer.isDown && !cell.visited) { cell.visited = true; gameStats.selectedTiles.push(cells.getIndex(cell)); gameStats.currentSum += number; } }, this); cell.events.onInputDown.add(function() { cell.visited = true; gameStats.selectedTiles.push(cells.getIndex(cell)); gameStats.currentSum += number; }, this); cell.events.onInputUp.add(function() { console.log(gameStats.currentSum); if (gameStats.currentSum == gameStats.target) { gameStats.score++; gameStats.target = gameState.randNumber(); gameStats.selectedTiles.forEach(function(index) { //console.log(gameStats.selectedTiles); if (index >= 5) { var shiftedNum = cells.getChildAt(index - 5).getChildAt(0).text; cells.getChildAt(index).getChildAt(0).setText(shiftedNum); /*if (index - 5 >= 5) { cells.getChildAt(prevIndex).getChildAt(0).setText(cells.getChildAt(index - 5).getChildAt(0).text); }*/ } else { cells.getChildAt(index).getChildAt(0).setText(gameState.randDigit()); } }); } cells.setAll('visited', false); gameStats.currentSum = 0; gameStats.selectedTiles = []; }, this); }); }, Recall that in the makeBoard function, I created a new variable called cells which is a group of rectangles. For each cell, I need an initial number, which will be stored as a text object. I also need to add event listeners on each of the rectangles to test if a user clicked down on a tile, hovered over a tile while the cursor was down, or released the mouse button. The first go around, it works as expected. The original numbers are replaced with new numbers on the screen. However, on subsequent tries, the numbers retained their own values. Not sure why this happens though as I called the setText method on the text object to update the text value.
×
×
  • Create New...