HTML – day 4

<!DOCTYPE html>

<html>
    <head>
        <title>THIS FILE IS FOR KEYPOS REFERENCE</title>
        <style type=”text/css” media=”screen”>
        #canv {border: 1px solid #ababab;}
        </style>
        <script type=”text/javascript” charset=”utf-8″>
            var c = null; // you can only get the dom element, when the html has been fully loaded
            var cx = null;   
            var xpos = null;
            var xpos2 = null;
            window.onload = function(){ // init sub-routine               
                c = document.getElementById(“canv”);
                cx = c.getContext(“2d”);
                xpos = 10;
                xpos2 = 10;
                stopDrawing = false;
                c.onclick = function(){
                    stopDrawing = !stopDrawing;               
                }
                draw();
            }
            function draw(){

                if(!stopDrawing){               
                    cx.clearRect(0,0,c.width,c.height);                   
                    if(xpos > c.width){
                        xpos = 0;
                    }else{
                        xpos++;       
                    }
                    if(xpos2 > c.width){
                        xpos2 = 0;
                    }else{
                        xpos2 += 5;;       
                    }           
                    cx.fillRect(xpos,10,40,40);
                    cx.fillRect(xpos2,40,20,20);
                }                   
                setTimeout(draw,30);
            }
        </script>       
    </head>
    <body>       
        <canvas id=”canv” width=500 height=250>
        </canvas>
    </body>

</html>

 

 

<!DOCTYPE html>

<html>
    <head>
        <title>THIS FILE IS FOR KEYPOS REFERENCE</title>
        <style type=”text/css” media=”screen”>
        #canv {border: 1px solid #ababab;}
        </style>
        <script type=”text/javascript” charset=”utf-8″>
            var c = null; // you can only get the dom element, when the html has been fully loaded
            var cx = null;   
            var s1 = null;
            var s2 = null;
            var s3 = null;
            var image = null;
            var imagefile = null;
            window.onload = function(){ // init sub-routine   

                imagefile = “singaporew.jpg”;
                image = new Image();
                image.src = imagefile;
                c = document.getElementById(“canv”);
                cx = c.getContext(“2d”);
                stopDrawing = false;
                c.onclick = function(){
                    stopDrawing = !stopDrawing;               
                }
                s1 = new Square(150,10,60,60);
                s2 = new Square(120,80,20,20);
                s3 = new Square(60,140,10,50);
                s2.setAcceleration(2);
                s1.setAcceleration(5);
                s3.setAcceleration(10);
                draw();
            }
            function draw(){
                cx.clearRect(0,0,c.width,c.height);
                //s1.x++;
                //s2.x += 4;
                s1.move2();
                s2.move3();
                s3.move3();
                cx.drawImage(image,-60,-200);
                cx.fillRect(s1.x,s1.y,s1.width,s1.height);
                cx.fillStyle =”red”;
                cx.fillRect(s2.x,s2.y,s2.width,s2.height);
                cx.fillStyle =”blue”;
                cx.fillRect(s3.x,s3.y,s3.width,s3.height);
                cx.fillStyle =”yellow”;
                setTimeout(draw,33);

            }
            function Square(x,y,width,height){
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.direction = true;
                var acceleration = 1;
                this.setAcceleration = function(accel){               
                    acceleration = accel;
                }
                this.move2 = function(){
                    if(this.direction && this.x > c.width){
                        this.x = c.width;
                        this.direction = !this.direction;
                    }
                    else if(this.direction == false && this.x < 0){
                        this.x = 0;
                        this.direction = !this.direction;
                    }
                    if(this.direction){
                            this.x += acceleration;
                    }else{
                            this.x -= acceleration;                       
                    }
                }
                this.move3 = function(){
                    if(this.direction && this.y > c.width){
                        this.y = c.width;
                        this.direction = !this.direction;
                    }
                    else if(this.direction == false && this.y < 0){
                        this.y = 0;
                        this.direction = !this.direction;
                    }
                    if(this.direction){
                            this.y += acceleration;
                    }else{
                            this.y -= acceleration;                       
                    }
                }
                this.move = function(){
                    if(this.x > c.width){
                        this.x = 0;
                    }else{
                    this.x += acceleration;
                    }
                }
            }
        </script>       
    </head>
    <body>       
                <canvas id=”canv” width=700 height=500>
                </canvas>
    </body>

</html>

Advertisements

3 thoughts on “HTML – day 4

  1. Sir Can I know what is the objective of above code? I also wants to put my own post, did you please help me to do so?

    Like

  2. I wait for your reply!!!!

    Like

  3. Hi, sorry for the late reply. Both codes are the same, the first code is just initiating the objects. The second one, animating it.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s