SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast Bryce's Avatar
    Join Date
    Sep 2003
    Perth, Western Australia
    0 Post(s)
    0 Thread(s)

    Question JavaScript Puzzle Game

    I have been tasked to design a JScript puzzle game with the following rules:

    1 - The board is 4x4 tiles and contains 15 tiles labelled "A" through "O" and the game is complete when the tiles are in alphabetical order from top left to bottom right (ie A, B, C, D across the top row)

    2 - There is one empty space on the board into which an adjacent peice may slide into. The tiles may only move left, right, up and down and only into the empty space.

    3 - Only one tile may move at a time.

    4 - Tiles may not jump over other tiles.

    5 - The board is scrambled at the beginning of the game.

    I know this has been done to death online but I am wondering if anyone can help me out here or point me towards a tutorial of some kind to help me out. I am intending to use some kind of event handler to swap image ID's but if there is a better way to do it, it would be helpful.

    Thanks a lot in advance!
    a distorted reality is now a necessity to be free...

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    where the World once stood
    0 Post(s)
    0 Thread(s)

    If you are looking for javacript game tutorials, you should visit -->

    If the tutorial doesn't help, you should be able to find a game similar to the one you are working on and study it.

    If all else fails, let me know, and I'll see what I can do.
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Moncton, New Brunswick, Canada
    0 Post(s)
    0 Thread(s)

    That's called the 15 puzzle. It was invented by Sam Loyd:

    I had to make one too as part of a javascript assignment. Everyone in the class had to make one (20 of us) and it was fun. I remember going home and working all night till 3 in the morning to complete it when the teacher gave us 4 days to finish. I can also remember how blown away I was at the innerHTML method ... I would program day and night coming up with the weirdest things.

    I suggest only looking at an example and figuring out the logic for yourself. The main thing you have to do is set up the puzzle markup and the get it to generate randomly each time. Once that task is complete, it's easier to get the pieces to move with innerHTML, onclick.

    Here's what I came up with a couple of years ago:

    I would do it a bit different now since I'm a little more experienced, but it works! I'm not showing you anything that you can't find on the internet already, and there's many, many better versions of the same puzzle out there.

    Like I said the random generation is the major hurdle, I can help you out if your stuck. I chose tail recursion (i think) myself, it was the only way I saw at the time. Everyone else, including the teacher, did it iteratively. Turns out tail recursion's not a bad way of doing things either:

    Show us what you came up with when your done, I'd love to see how it came out.



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts