DDTe3 Hour 8 - Sliding Puzzle

My mother went from improving to a very rapid decline and passed away July 29th at 1:05AM. She meant the world to me and will be greatly missed. While I posted a game on BlazingGames.com  this week as the game ready to post, I will be taking a few week break from posting new material. I am many weeks ahead on this blog for material so may still post the weekly articles here but I can not guarantee this. Here is the continuation of my How Many Games can I Develop in 24 hours challenge.

Creating the Sliding Puzzle game is fairly straightforward as the only real game mechanic that needs to be implemented is the slider. The slider is simply the bottom right-most tile set to be highlighted with the highlight color being near-opaque. The reason for making it near-opaque instead of fully-opaque is that I felt the game would be better if you knew what part of the image the slider represented but it had to be dark enough that it was obviously the slider. Creating the slider, then, required very little code.

    this.slider = new BGLayers.Point(tw-1, th-1);
this.view.setTileHighlight(tw-1, th-1, true);
    this.view.setColors("rgb(100,0,100)", "green", "red", .5, .9);

With the slider on the board, the only other major game-play mechanic became moving the slider around. I decided that the best way to implement the movement of the slider would be to simply take a point that represents where the slider is to be moved to and then move the slider horizontally until it is at the proper x location and then vertically until it is at the proper y location.

PuzzleGallery.SlidingPuzzleGame.prototype.moveSlider = function(p)
{
   this.view.setTileHighlight(this.slider.x, this.slider.y, false);
   while (this.slider.x < p.x) {
       this.puzzle.swapPuzzlePieces(this.slider.x, this.slider.y, this.slider.x+1, this.slider.y);
       ++this.slider.x;
   };
   while (this.slider.x > p.x) {
       this.puzzle.swapPuzzlePieces(this.slider.x, this.slider.y, this.slider.x-1, this.slider.y);
       --this.slider.x;
   };
   while (this.slider.y < p.y) {
       this.puzzle.swapPuzzlePieces(this.slider.x, this.slider.y, this.slider.x, this.slider.y+1);
       ++this.slider.y;
   };
   while (this.slider.y > p.y) {
       this.puzzle.swapPuzzlePieces(this.slider.x, this.slider.y, this.slider.x, this.slider.y-1);
       --this.slider.y;
   };
   this.view.setTileHighlight(this.slider.x, this.slider.y, true);
   this.view.update();   
}

This made implementing the mouse very easy as you simply call the moveSlider function with the point passed by the onTileClick call that BasePuzzleView makes when a tile is clicked. While having both horizontal and vertical movement at once was nice, after playing the game I worried that it might be too confusing to the player so altered the onTileClick function to only allow the slider to move when the move was only horizontal or vertical.

The other thing I was worried about is that the scrambling of the puzzle was not based on the game-play mechanic. While I am positive that this shouldn’t matter and that any scrambled puzzle should be solvable, I decided not to take any chances and wrote my own Sliding Puzzle Game scrambling function. This simply moves the slider around by randomly selecting points on the puzzle and calling the moveSlider function using that point.

PuzzleGallery.SlidingPuzzleGame.prototype.scramble = function()
{
   var p = new BGLayers.Point();
   var w = this.puzzle.puzzleWidth;
   var h = this.puzzle.puzzleHeight;
   var n = w * h * 10;
  
   for (var cntr = 0; cntr < n; ++cntr) {
       p.x = Math.floor(Math.random() * w);
       p.y = Math.floor(Math.random() * h);
       this.moveSlider(p);
   }
}

And with that done, we have finished a second game. For the third game, however, I am not going to go with the rotation puzzle but have a different sort of twist in mind.