HTML_Graphics_ArrowKeys

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<!-- AdFender script begin --><script type='text/javascript' src='http://local.adfender.com/adfender/elemhide.js'></script><!-- AdFender script end -->
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Basic HTML5 Game Demo</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        canvas.width = 800;
        canvas.height = 600;

        var mySprite = {
            x: 200,
            y: 200,
            width: 50,
            height: 50,
            speed: 200,
            color: '#c00'
        };

        var keysDown = {};
        window.addEventListener('keydown', function(e) {
            keysDown[e.keyCode] = true;
        });
        window.addEventListener('keyup', function(e) {
            delete keysDown[e.keyCode];
        });

        function update(mod) {
            if (37 in keysDown) {
                mySprite.x -= mySprite.speed * mod;
            }
            if (38 in keysDown) {
                mySprite.y -= mySprite.speed * mod;
            }
            if (39 in keysDown) {
                mySprite.x += mySprite.speed * mod;
            }
            if (40 in keysDown) {
                mySprite.y += mySprite.speed * mod;
            }
        }

        function render() {
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = mySprite.color;
            ctx.fillRect(mySprite.x, mySprite.y, mySprite.width, mySprite.height);
        }

        function run() {
            update((Date.now() - time) / 1000);
            render();
            time = Date.now();
        }

        var time = Date.now();
        setInterval(run, 10);

    </script>
</body>
</html>