Check out some similar questions!

talabarghouthi · Jan 6, 2013, 01:55 PM

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

Thanks in Advance :D

<!DOCTYPE html>
<html>
<head>
<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};

var cookiedimen={x: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;
/*no change*/ function distance(a,b,c,d){

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

}

/*no change*/ 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;

cookiedimen.x+=dist *d ;
dummycircle2.cx+=dist *d ;

if(cookiedimen.x>=(canvas.width-distX…
d*=-1;
}
if(cookiedimen.x<0){
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();

}

window.onload=function()
{
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();
monster.onload = function(){

context.drawImage(this, monsterdimen.x, monsterdimen.y);
};
monster.src = "cookiemonster.png";

var cookie = new Image();
cookie.onload = function(){
context.drawImage(this, cookiedimen.x, cookiedimen.y);
};
cookie.src = "cookie transperant.png";

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

}

/*no change*/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>
</head>

<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"/>
<img src="cookie transperant.jpg" width="63.2" height="63.2"/>
</canvas>

</body>
</html>

crigby · Jan 7, 2013, 05:09 PM

Hi, Best I can tell, to start you are trying to do too much with the script. The canvas element should be defined in the body of the page where it should be assigned an ID for access to it byt the script, and the dimension attributes (width and height) of the canvas should also be assigned there. Then you have an empty canvas element to work with in the script. See:
HTML5 Canvas
Peace,
Clarke