Menu
HI,
In html5 canvas, I want to display an array of 4 related walking images one at a time to simulate movement. I can do this but not when I use classes as below. I get no error but no output? The code loops as required but I just cant display any array element.
It is the ClassLoadImages.prototype.m_draw which is the issue.
I have been to other forums but no one can solve this .
[CODE]
<canvas id=”myCanvas” width=”600″ height=”400″></canvas>
<script>
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(‘2d’);
var j=0;
var imgLoaded = 0;
var x=0,y=0;
var fi=0;
/////////////////////////////////////////////////////////////
function ClassLoadImages(startx,starty) {
// var img1 = new Image();
var arr1 = [];
var images=[];
var ii=0;
// var imgElement=[];
this.x=startx;
this.y=starty;
this.imgElement=[];
arr1[0] = “images/bcave1.png”;
arr1[1] = “images/bcave2.png”;
arr1[2] = “images/bcave3.png”;
arr1[3] = “images/bcave4.png”;
onImgLoad = function() {
// alert(imgLoaded);
imgLoaded++;
if(imgLoaded == 4) //all loaded
{
//alert(imgLoaded);
gameLoop = setInterval(doGameLoop, 100);
//return ;
}
};//img1.onload
for (i=0;i<arr1.length;i++){
//alert(i);
images[i] = new Image();
images[i].onload = onImgLoad;
images[i].src = arr1[i];
this.imgElement[i] = images[i];
}
};//func ClassLoadImages
ClassLoadImages.prototype.m_draw = function(fi){
// this.x++;
// this.y++;
ii++;
//images[ii].x++;
if (ii==4){
ii=0;
}
ctx.drawImage(this.imgElement[fi], 30, 30);
// ctx.fillText(“finished loading ” ,10,40);
};
////////////////////////////////////////////////////////////////
function doGameLoop() {
ctx.clearRect(0,0,600,400);
if(fi==4) {fi=0;}
img.m_draw(fi);
fi++;
}
var img= new ClassLoadImages(30,30);
</script>