Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Пытаемся писать игру на Canvas</title>
        <meta charset="utf-8">
        <script>

            var pressed = [],
                left = 37,
                up = 38,
                right = 39,
                down = 40,
                // начальные координаты задали
                my = {x: 0, y: 0, width: 10, height: 10},
                brick = {x: 150, y: 170, width: 80, height: 40};

            function isCollide(a, b) {
                return a.x < (b.x + b.width) && a.y < (b.y + b.height)
                    && (a.x + a.width) > b.x && (a.y + a.height) > b.y;
            }

            // this === window
            this.addEventListener('load', function() {
                var cvs = document.getElementsByTagName('canvas')[0];
                var ctx = cvs.getContext('2d');
                var oldX, oldY;

                var loop = setInterval(function() {
                    ctx.clearRect(0, 0, cvs.width, cvs.height);
                    // обработка нажатия клавиш
                    oldX = my.x;
                    oldY = my.y;
                    if (pressed[left]) my.x -= 10;
                    if (pressed[up]) my.y -= 10;
                    if (pressed[right]) my.x += 10;
                    if (pressed[down]) my.y += 10;

                    if ( isCollide(my, brick) ) {
                        my.x = oldX;
                        my.y = oldY;
                    }

                    // рисуем красный квадрат, которым будем управлять
                    ctx.fillStyle = 'red';
                    ctx.fillRect(my.x, my.y, my.width, my.height);
                    // рисуем синий квадрат
                    ctx.fillStyle = 'blue';
                    ctx.fillRect(brick.x, brick.y, brick.width, brick.height);
                }, 40); // 1000 / 40 = 25 кадров
            });

            this.addEventListener('keydown', function(event) {
                pressed[event.keyCode] = 1;
            });

            this.addEventListener('keyup', function(event) {
                pressed[event.keyCode] = 0;
            });

        </script>
    </head>
    <body style="font: 14px/1.5em Arial">
        <canvas style="background: black" width="480" height="320"></canvas>
        <p>Управление стрелками.</p>
    </body>
</html>