HTML5 – day 2

Here are the codes for day 2 of our html5 training.

<!DOCTYPE html>

<html>
    <head>
        <title>THIS FILE IS FOR KEYPOS REFERENCE</title>
        <script>
            var c = null; // you can only get the dom element, when the html has been fully loaded
            var cx = null;
            var pos = null;
            var lastpos;
            window.onload = function(){ // init sub-routine
                c = document.getElementById(“mycanvas”);
                cx = c.getContext(“2d”);
                out = document.getElementById(“output”);
                lastpos = {x:0, y:0};
                output.innerHTML = “READY”;
                c.onkeydown = function(){
                    var action = event.keyCode;
                    switch(action){
                        case 37:
                            moveLeft();
                            break;
                        case 38:
                            moveUp();
                            break;
                        case 39:
                            moveRight();
                            break;
                        case 40:
                            moveDown();
                            break;
                        default:
                        break;
                    //out.innerHTML = “KEY : ” + event.keyCode;                       
                }
             }               
            }
            function showStat(key){
                var temp =”ARROW key: ” + key + “<br/>”;
                temp = temp + “curr X: ” + lastpos.x + ” | curr Y : ” + lastpos.y;
                output.innerHTML = temp;
            }
            function draw(){               
                cx.clearRect(0,0,c.width,c.height);
                cx.fillRect(lastpos.x, lastpos.y, 40, 40);
            }
            function moveUp(){
                lastpos.y–;
                draw(lastpos);
                showStat(“Up”);
            }
            function moveDown(){
                lastpos.y++;
                draw(lastpos);
                showStat(“Down”);
            }
            function moveLeft(){
                lastpos.x–;
                draw(lastpos);
                showStat(“Left”);
            }
            function moveRight(){
                lastpos.x++;
                draw(lastpos);
                showStat(“Right”);
            }
        </script>
    </head>
    <body>
        <p>
        <canvas id=”mycanvas” width=”500″ height=”250″ style=”border:1px dotted green;” tabindex=”1″>
            Get a new browser
        </canvas>
        <div id=”output”>
        </div>
    </body>

</html>

Advertisements

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