You are here:

# Dreamweaver/I am trying to make a simple game, for my University, am trying to use html canvas .. need some help

Question
Here's the whole code I've written
am supposed to have a cookie falling to get into a cookie monster's mouth
the cookie monster is supposed to be going left and right
if they crash the program stops

my first problem here is that i don't really know why the pictures aren't appearing
Need some help

<!DOCTYPE html>
<html>
<title> Cookie Monster Game!! :D </title>
<script>
var canvas=null;
var context=null;
var score =0;
var monsterdimen={x:300-31
y:0
w:62
h:87.7
vx:0
vy:0};

y:300
w:63.2
h:63.2
vx:500
vy:0};

var dummycircle={cx:300, cy:31, r:31};
var dummycircle2={cx:31.6, cy:330, r:31.6};

var acc=600;

var d=1;
function distance(a,b,c,d){

return Math.sqrt((c-a)*(c-a)+(d-b)*(d-b));

}

function collision(){

if(distance(dummycircle.cx,dummycircl… < (dummycircle.r +dummycircle2.r))
return true;
else
return false;

}
function draw(){

context.fillText(score, 10, 20);
context.fill();
context.stroke();

}

function update(){

monsterdimen.vy += acc * 33 /1000;

var dist= monsterdimen.vy * 33 /1000;

monsterdimen.y+=dist ;

dummycircle.cy+=dist;

}
function update2(){

var dist= cookiedimen.vx * 33 /1000;

dummycircle2.cx+=dist *d ;

d*=-1;
}
d*=-1;
}
}
function animate(){

context.clearImg(0,0,canvas.width, canvas.height);
context.beginPath();

update();
draw();

if(collision()){

score++;

clearInterval(timer);
clearInterval(timer2);

}

if(monsterdimen.y>=(canvas.height-mons…

clearInterval(timer);
rect1.y=canvas.height-monsterdimen.h;
draw();
}

}

function animate2(){

context.clearRect(0,0,canvas.width, canvas.height);
context.beginPath();

update2();
draw();

}

{
canvas=document.getElementById("canv")…
context=canvas.getContext("2d");
context.linewidth=2;

context.strokeStyle="blue";
context.fillStyle="red";
context.linewidth=2;

draw();

var monster = new Image();

context.drawImage(this, monsterdimen.x, monsterdimen.y);
};

};

timer2=setInterval("animate2()", 33);

}

function start(){

var x=event.offsetX;
var y=event.offsetY;

if( ((x >= 270)&&(x<=330)) &&((y>=0) && (y<=50))){

timer=setInterval("animate()", 33);
}

var dis= distance(x, y, dummycircle.cx, dummycircle.cy);
if(dis <= dummycircle.r){
timer=setInterval("animate()", 33);

}

}

</script>

<body>

<canvas id="canv" width="585px" height="600px" style="border:2px solid red; background:url(Background1.jpg)" onclick="start()" >
<img src="monster1.jpg" width="62" height="87.7"/>
</canvas>

</body>
</html>

Good Day Mr.tala !

Possible reasons for the images not appearing on webpage includes the following.

1. Please make sure the image(s) were in the folder where your .html file resides. If not, you should mention the full path of the image (ex. C:/pictures/monster1.jpg)

2. Make sure the extension of the original image is .jpg and neither .JPG nor .JPEG (ex. monster1.jpg neither monster1.JPG nor monster1.JPEG) To check, open my computer and goto tools -> folder options. Now goto "Views" tab. And uncheck "Hide extensions for known file types". Now the image extension will be visible to you. You may change it to .jpg (if it is like .JPG or .JPEG)

If your problem has not been fixed up, please write back to me.

Am more than happy to assist further.

Dreamweaver

Volunteer

#### Vimal Abraham

##### Expertise

I have worked with HTML, PHP and MySQL from 2005. I can be able to solve HTML, PHP, and MySQL related issues.

##### Experience

I have worked under various domains of web development including file sharing, social community, wallpaper management, image hosting, web hosting automation, shopping cart and payment gateway integration. My portfolios include, http://www.4kwallpapers.in http://www.wallpicz.com

Education/Credentials
I have completed Bachelor of Engineering in Computer Science.

Awards and Honors
Have a Total of nine certificates in Inter and Intra College Competitions that includes technical quiz, program debugging and paper presentation (State Level).