I hope you can help me. here is the source code:
<html>
<head>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
canvas {
border: 1px solid #d3d3d3;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body id="main1" background="Background.jpg" onload="startGame()">
<p id="text1">TIME: </p><div id="timer"></div>
<script type="text/javascript">
function countdown (minutes){
var seconds = 60;
var mins = minutes;
function tick(){
var counter = document.getElementById("timer");
var current_minutes = mins-1;
seconds--;
counter.innerHTML = "0" + current_minutes.toString() + ":" + (seconds < 10 ? "0":"") + String(seconds);
if(seconds > 0){
setTimeout(tick,1000);//time will countdown every 1 second
}else{
if(mins > 1){
setTimeout(function(){countdown(mins-1);},1000);
}
}
}
tick();//to execute or run the function tick()
}
countdown(3);//declare the time in 3 minutes
</script>
<p id="score">SCORE: </p>
<script>
//to display avatar and background when start game
var myAvatar;
var myBackground;
var score = 0;
// var myFruit = ["Apple.jpg", "Banana.jpg", "Grape.jpg", "Pineapple.jpg", "Strawberry.jpg"];
function startGame() {
myAvatar = new component(80, 80, "Avatar1.jpg", 240, 560, "image");
myBackground = new component(560, 640, "Forest.jpg", 0 , 0 , "image");
//myFruit = new component(50,50,"Grape.jpg", 280, 0, "image");
myGameArea.start();
fall();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 560;
this.canvas.height = 640;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
// this.frameNo = 0;
this.interval = setInterval(updateGameArea, 5);// to repeat execution of function updateGameArea every 20 milliseconds
//function for movement
window.addEventListener("keydown", function(e){
myGameArea.key = e.keyCode;
})
window.addEventListener("keyup", function(e){
myGameArea.key = false;
})
},
clear : function() {//to clear the game area from avatar so there is no duplicated avatar
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
//declare the image
picture = new Array(5)
Image0 = new Image();
Image0.src = picture[0] = "Apple.jpg";
Image1 = new Image();
Image1.src = picture[1] = "Banana.jpg";
Image2 = new Image();
Image2.src = picture[2] = "Grape.jpg";
Image3 = new Image();
Image3.src = picture[3] = "Pineapple.jpg";
Image4 = new Image();
Image4.src = picture[4] = "Strawberry.jpg";
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
var Stop=false;
//render the picture
for(i=0;i<picture.length;i++)
{
var x = Math.floor(Math.random()*picture.length);
renderPic = picture[x];
document.write('<img id ="pic'+ i +'" src="'+ renderPic +'"style="position:absolute;top:10px;left:397px;width:50px;height:50px">');
}
winHeight = document.body.clientHeight;//height of the body
winWidth = document.body.clientWidth;// width of the body
//for the speed and the position of x and y of image
for(i=0;i<picture.length;i++){
Ypos[i] = Math.round(Math.random()*winHeight);
Xpos[i] = Math.round(Math.random()*winWidth);
Speed[i] = Math.random()*5 + 3;
}
//Falling the fruits
function fall(){
if(Stop){
clear();
return;
}
var winHeight = document.body.clientHeight - 110;
var winWidth = document.body.clientWidth - 200;
for(i=0;i<picture.length;i++){
speedY = Speed[i]*Math.sin(90*Math.PI/180);
Ypos[i]+= speedY;
if(Ypos[i] > winHeight){
Ypos[i] = 0; // back to 0 for Y position
Xpos[i] = Math.round(Math.random()*winWidth);
Speed[i] = Math.random()*5 + 3;
}
else{
document.getElementById("pic"+i).style.left = Math.min(winWidth,Xpos[i])-200;
document.getElementById("pic"+i).style.top = Ypos[i];
}
}
setTimeout('fall()',20);//function fall will execute every 20 miliseconds
}
setTimeout("Stop=true",180000);
//clear the image
function clear(){
for(i=0;i<picture.length;i++){
document.getElementById("pic"+i).style.display = 'none';
}
}
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
// this.gravity = 0.05;
// this.gravitySpeed = 0;
// this.bounce = 0;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
function updateGameArea() {
myGameArea.clear();
myBackground.newPos();
myBackground.update();
myAvatar.speedX = 0;
Score = 0;
if(myGameArea.key == 37){
myAvatar.speedX = -2;
if(myAvatar.x < 0){
myAvatar.x = 0;
}
}//left button
if(myGameArea.key == 39){
myAvatar.speedX = 2;
if(myAvatar.x > 480){
myAvatar.x = 480;
}
}//right button
myAvatar.newPos();
myAvatar.update();
myFruit.newPos();
myFruit.update();
}
</script>
</body>
</html>