-1

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>
1
Contributor
1
Reply
16
Views
1 Year
Discussion Span
Last Post by ardywijaya1997
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.