dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Can you suggest a framework/libary/plug in to make this app (described within) easier

  1. #1
    Join Date
    Mar 2014
    Posts
    1

    Can you suggest a framework/libary/plug in to make this app (described within) easier

    I am tasked with writing an application that is similar to battle ship. There is a 100x100 grid. Initial, each cell of the grid has a red box in it. A user clicks the red box, enters a special code that they were given, and that red box reveals a letter or a blank space. There a certain "winning words". So lets say the letters WINNIN have been revealed. The person who reveals the G is a "winner". So, the application does a few things:

    Firstly, after a user clicks the square and enters a code, it checks to see if the code is valid.
    Then, assuming the code is valid, the red square turns into a letter or a blank space.
    If a letter is revealed, the system checks to see if it's a "winning" letter. Therefore, the system would need to see if the other letters in that same word have been revealed.

    I am using a WAMP stack and javascript (jQuery). I am having trouble figuring out how to swap the image (from a red square to a letter) after an image is clicked. Keep in mind this needs to be swapped for everyone who will subsequently view the application and therefore must be database driven. I'm thinking to have a 2 MySql table (with only one column) that corresponds with the visual html table before and after being clicked (lets call them VISUAL_TABLE and ACTUAL_TABLE). Initially, all the rows in the visual table would contain the following string <img src="redsquare.jpg" />, and row 1 would correspond with cell 1 in the actual html table, row 2 would be cell 2 in the actual html table, etc. Then, when a user clicks the image in cell 1 (which row 1 in VISUAL_TABLE), it replaces row 1 in VISUAL_TABLE with row 1 in ACTUAL_TABLE. The row 1 in actual table may contain the following string <img src="letter1.jpg" />, After this swap has been made, I can run a php script that checks to see if that swap was a winner. So, for example, if the winning word was WIN, the W being in row 1, the I in row 2, and the N in row 3, the php script would see if all 3 of those rows is no longer <img src="redsquare.jpg" /> and if so then it saves that person as a winner.

    Does that make sense to anyone else? Is there a better way to do this? Is there a framework/library that could make this easier? I am open to suggestings about the design of the application itself, however I am more specifically asking about a javascript library/framework/plug in that would simply ANY part of this (preferably the visual part, maybe a replacement for the HTML table?).

    Thanks

  2. #2
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    The thing to do is to change the image immediately with jQuery and update the value via ajax. When you initially load the application, you will need to load the images based on values in the database.

    jQuery is going to be good, but you will have to mix in some PHP for writing values to the database.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles