I'm having issues with my javascript script

JavaScript
1

The code is written for a tilesheet with frames in a 3x2 pattern(3 rows, 2 column). The new tilesheet has a 2x3 arrangement of cells (2 rows 3 columns). I need to modify the javascript for this new arrangement of animation cells.

<canvas width="128" height="128"></canvas>

<script>

//create a monster object
var monster =
{
	//the monster's image file and the size of each frame cell
	IMAGE: "monsterTileSheet2.png",
	SIZE: 128,
	COLUMNS: 2,
	numberOfFrames: 5,
	currentFrame: 0,
	sourceX: 0,
	sourceY: 0,
	
	updateAnimation: function()
	{
		this.sourceX = Math.floor(this.currentFrame % this.COLUMNS) * this.SIZE;
		this.sourceY = Math.floor(this.currentFrame / this.COLUMNS) * this.SIZE;
		
		if(this.currentFrame < this.numberOfFrames)
		{
			this.currentFrame++;
		}
	}
};

//set up the canvas and drawing surface
var canvas = document.querySelector("canvas");
var drawingSurface = canvas.getContext("2d");

//load the animation tile sheet
var image = new Image();
image.addEventListener("load", updateAnimation, false);
image.src = monster.IMAGE;

//The number of rows and columns and the size of each cell
var ROWS = 3;
var COLUMNS = 2;
var SIZE = monster.SIZE;
var SPACE = 10;


function updateAnimation()
{
	//set a timer to call updateAnimation every 300 milliseconds
	setTimeout(updateAnimation, 300);
	
	monster.updateAnimation();
	
	render();
}

function render()
{
	//clear thee canvas of any previous frams images
	drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
	
	//Draw the mosnter's current animation frame
	drawingSurface.drawImage
	(
		image,
		monster.sourceX, monster.sourceY, monster.SIZE, monster.SIZE,
		0, 0, monster.SIZE, monster.SIZE
	);
}

</script>
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.