You are here:

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

Advertisement


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

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;
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;

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);


}






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>

Answer
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

All Answers


Answers by Expert:


Ask Experts

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).

©2016 About.com. All rights reserved.