(\/)att
05-07-2004, 12:11 AM
I'm currently trying to write a version of the game Memory with JavaScript. Functionaly speaking I've got it down pat, but when a player clicks on a card to flip it over there's about a 2 or 3 second delay before it happens. I already have the images pre-loaded (unless there's an error I'm unaware of). Anyone have any ideas how I might be able to speed the image swaps up? When running the html file straight from my hard drive everything works perfectly, perhaps I'm just doomed to be limited by my bandwidth.
JavaScript directly involved with image swapping:
--------------------------------------------------------------------------
// Array of card images
imageArray = new Array();
var ImageNum = 0;
var image_dir = ""
imageArray[ImageNum++] = new imageItem(image_dir + "zero.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "one.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "two.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "three.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "four.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "five.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "six.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "seven.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "eight.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "nine.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "card_back.jpg");
function imageItem(image_location) {
this.image_item = new Image(50, 50);
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
// flips selected card
function flip(cell){
var row;
var col;
if(document[cell].src == get_ImageItemLocation(imageArray[10])){
// imageArray[10] = "card_back.jpg"
var rc = cell_to_rc(cell); // cell name to row and column
row = rc[0];
col = rc[1];
var temp = grid[row][col][0];
document[cell].src = get_ImageItemLocation(imageArray[temp]);
}
else {
document[cell].src = "card_back.jpg";
}
}
--------------------------------------------------------------------------
For the complete file goto: http://www.clemson.edu/~csencsm/games/memory/memory.html
Thanks
(\/)att
JavaScript directly involved with image swapping:
--------------------------------------------------------------------------
// Array of card images
imageArray = new Array();
var ImageNum = 0;
var image_dir = ""
imageArray[ImageNum++] = new imageItem(image_dir + "zero.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "one.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "two.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "three.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "four.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "five.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "six.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "seven.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "eight.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "nine.jpg");
imageArray[ImageNum++] = new imageItem(image_dir + "card_back.jpg");
function imageItem(image_location) {
this.image_item = new Image(50, 50);
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
// flips selected card
function flip(cell){
var row;
var col;
if(document[cell].src == get_ImageItemLocation(imageArray[10])){
// imageArray[10] = "card_back.jpg"
var rc = cell_to_rc(cell); // cell name to row and column
row = rc[0];
col = rc[1];
var temp = grid[row][col][0];
document[cell].src = get_ImageItemLocation(imageArray[temp]);
}
else {
document[cell].src = "card_back.jpg";
}
}
--------------------------------------------------------------------------
For the complete file goto: http://www.clemson.edu/~csencsm/games/memory/memory.html
Thanks
(\/)att