![](red.gif)
Changing the source of table cells in javascript
I'm trying to make it appear as if a block is falling down the screen, but in order to do this I have to switch the .src at a given X,Y position. All the cells in the grid-like table I made contain "red.gif" as the default. Basically I have to switch that with another color .gif, like "green.gif", then "green.gif" needs to be passed on to the cell below it, while changing the .src of its origional position back to the default red.
If someone could help me with this, it would be great, because as it is I'm stuck on this problem and can't move on until I figure out how to do this.
Thanks for your time,
marcm
<script language=java-script>
//---------------------------------------------------------------
var tableRows=20; // --------------------| rows in play area |----------------------------------------
var tableColumns=10; //-----------------------------| columns in play area |-----------------------
var gameBoard=new Array(); //-----------------------------------------------------------------------------| array to hold state of play area |--------
var blockImages=new Array("blank","red","blue","green","pink","black"); //--------------------| the different blocks |----------
//-----------------------------------------------------------------------------------------------------
function changeBlock(x,y,img){ //----------------------------------------| funkshin |-----------------
if(x>=tableColumns || x<0) //--------------------
return false;
if(y>=tableRows || y<0) //--------------------
return false;
document.images['i'+x+'_'+y].src=blockImages[img]+'.gif';
gameBoard[x+(y*tableColumns)]=img;
return true }
//-----------------------------------------------------------------------------------------------------
function drawTable(){ //-------------------------------------------------------| funkshin |----------------------------------
var blockWidth=20;
var blockHeight=20;
var tableHtml='<table cellpadding=0 cellspacing=0 border=1>';
for(var n=0;n<tableRows;n++){
tableHtml+='<tr>';
for(var g=0;g<tableColumns;g++)
tableHtml+='<td>
</td>';
tableHtml+='</tr>\n'; }
tableHtml+='</table>';
document.write(tableHtml);
}
//--------------------------------------------------------------------------
//----------| keyboard events |----------------------------------------
document.onkeydown = keyDown;
function keyDown() {
var ieKey = event.keyCode;
if (ieKey == 37) {
changeBlock(1,4,3)
}
else if (ieKey == 38) {
}
else if (ieKey == 39) {
}
else if (ieKey == 40) {
}
}
</script>
<script language=java-script>
drawTable(); //------------------------------------------------
</script>
</body></html>
Edited by - marcm on May 5, 2001 5:16:09 PM
![](red.gif)
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
Recommended Tutorials
Advertisement