Search the Community

Hello all, I'm new to html 5 and making my first steps here, trying to understand what I'm doing. So now i have a rather static game played on tiles that the user is supposed to slide, and I'm having this strange bug that i can't seem to come around for afew days now: To animate the sliding of tiles by the user, i am trying to delete the area where animation occurs, and then repeatedly repaint the slides moving in that area. The problem is that there's also background underneath, and even though i first paint the bg and then the sliding icons, still i get only the background and not the icons. When i don't paint the bg, the icons are there - so what must be happening is that the bg gets painted over the icons, instead of underneath. Didi anyone have anything like it before? Here's the code i'm using for that: function switcher(xFrom,yFrom,xChange,yChange,isSuccess) //switches between 2 icons; isSuccess defines if to keep the switch or go immediately back. { var animOffset; //variable to contain the animation offset in pixels, related to the start position var xTo=xFrom+xChange; //X of target icon var yTo=yFrom+yChange; //Y of target icon var typeFrom; //Type of source icon var typeTo; //Type of target icon var switchTime=1000; //minimum duration of switch animation in milliseconds var endTime=startTime+switchTime; //target minimum end time //Logical Switch preparation typeTo=boardTiles[xFrom][yFrom]; typeFrom=boardTiles[xTo][yTo]; //Graphic Switch if (startTime==null) { startTime=new Date().getTime(); //register the start of animation timestamp; getTime gets a fixed time while now changes with the clock } animate(); function animate() //this is a recursive function { animOffset=Math.ceil(((Date.now()-startTime)/switchTime)*cellSize); render(); if (animOffset < cellSize) { //animation still incomplete, continue rendering requestAnimationFrame(animate); } else startTime=null; //reset startTime so a new animation could later begin } } function render() { removeTile(xFrom,yFrom); removeTile(xTo,yTo); drawTile(typeTo,xFrom,yFrom,animOffset*xChange,animOffset*yChange); drawTile(typeFrom,xTo,yTo,-animOffset*xChange,-animOffset*yChange); } }The removeTile and drawTile functions are defined elsewhere, the following way: function drawTile(n,x,y,oX,oY) //Graphically draws a tile (used during animation or as part of addTile). { //n is the icon number, x,y are matrix coordinates for it to be placed, oX, oY are parameters for offset from x,y tiles gameBoard.drawImage(icons[n],(xBoardStart+x*cellSize+oX),(yBoardStart+y*cellSize+oY)); //draw the tile on the canvas } function removeTile(x,y) //removes icon from x,y by repainting the relevang bg section over it. { boardTiles[x][y]=0; //mark the tile on the logical array as removed gameBoard.drawImage(bg,(xBoardStart+x*cellSize),(yBoardStart+y*cellSize),cellSize,cellSize,(xBoardStart+x*cellSize),(yBoardStart+y*cellSize),cellSize,cellSize); }Any assistance would be appreciated...