stefvhuynh stefvhuynh - 2 months ago 9
Javascript Question

How to make a game out of an html table?

I'm basically trying to make a game that involves a grid. Here's what I have so far (it'll help to see the game before I explain what I need to happen):

Javascript (see jsfiddle for html):

var score = 0;
var points = function(val, box) {
var noise = Math.round(Math.round(0.1*val*Math.random()*2) - 0.1*val);
score = score + (val + noise);
var square = document.getElementById(box);
square.innerHTML = val + noise;
square.style.display='block';
setTimeout(function() {
square.style.display='none';
}, 400);
document.getElementById("out").innerHTML = score;
}


http://jsfiddle.net/stefvhuynh/aTQW5/1/

The four red squares at the bottom left of the grid needs to be the starting point in the game. When you click on one of those boxes, you can then travel along the grid by clicking adjacent boxes. Basically, I need to make it so that the player can only travel up, down, left, and right from the box that they just clicked on. I don't want the points function to be invoked when the player clicks on a box that they're not supposed to click on.

Additionally, I need to make it so that the player can't click on another box until 400 ms have elapsed.

I'm relatively new to programming so any help at all would be great. I would also appreciate tips on how to make the program more efficient, if there's a way to do that.

Answer

General idea:

I'd suggest having a similar id for all your boxes, such as box_x_y, and storing a list of strings, let's say allowedSquares.

You would then be able to write a function which, upon clicking on a box, would check if it's id is in allowedSquares, and if it is, call points(val, box) then update the contents of allowedSquares to reflect the change of position.

The point of using a standard id convention for all your boxes is that you could write getPosition(box) and getBox(intX, intY) that would parse the id strings to return you the box position, or vice-versa.

You can even make the updateAllowedSquares(clickedBox) function change the color of adjacent boxes to show they're allowed next steps.

EDIT: Some example code:

Disclaimer: these are not the code lines you're looking for.

This is only a starting kit for you, which assumes a 3x3 grid with a single-square bottom right starting position. You will have to adapt this code a bit. Also, I predict something will go wrong concerning going out of bounds. I'll let you think with this a bit, as I prefer giving food for thoughts over complete solutions in those cases...

var allowedSquares = ["box_2_2"]; // Initial list

function decodePositionFromID(boxId) {
  return boxId.split("_").slice(1,2);
}

function getIDfromXY(x, y) {
  return "box_" + x + "_" + y;
}

function updateAllowedSquaresList(boxID) {
  // 1 - We clear the array.
  allowedSquares.length = 0; 

  // 2 - We get the adjacent boxes IDs.
  var xyArray = decodePositionFromID(boxId);
  var upperBoxID = getIDfromXY(xyArray[0], xyArray[1]-1);
  // Rince, repeat, and add some gameboard boundaries checks.

  // 3 - We add the new IDs to the list.
  allowedSquares.push(upperBoxID, ...);
} 

function boxClick(val, boxID) {
  // We check if the box is a valid square to play.
  if (allowedSquares.indexOf(boxID) != -1) {
    points(val, boxID);
    updateAllowedSquaresList(boxID);
  }
}