I am trying to make a simple game, for my University, am trying to use html canvas..
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>
