Untitled

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <style>
         #canvas{
           width:600px;
           height:600px;
           border:solid red 1px;
         }
      </style>
    </head>
    <body>
        <canvas id='canvas'>
        </canvas>
        <script>

          var programm={
               condition:'menu',
               clearDevice: function(){

               },

               menu: function(){
                 this .condition = 'menu';//обновили состояние программы
                 this .clearDevice();//очистка экрана

               },

               game: function(){

                 var example = document .getElementById('canvas') ,
                     canvas = example .getContext('2d'),//настройка канвас
                     cWidth = 600, //длинна канвас
                     cHeight = 600;//высота канвас

                 this .condition = 'game';//обновили состояние программы
                 this .clearDevice();//очистка экрана


                 function GameData(map){
                     this.map = map;
                 }

                 function Character(x,y){//персонаж
                   this .x = x;
                   this .y = y;
                   this .health = 100;
                   this .up = function(){
                     this .y = this .y-1;
                   }
                   this .down = function(){
                     this .y = this .y+1;
                   }
                   this .left = function(){
                     this .x = this .x-1;
                   }
                   this .right = function(){
                     this .x = this .x+1;
                   }
                 }

                 var map = [[1,1,1,1,1],[1,2,1,1,1],[1,1,1,1,1],[1,1,1,1,1],[1,1,1,1,1],[1,1,1,1,1]];//карта
                 var data = new GameData(map);
                 var x=1,y=1;
                 var player = new Character(x,y);
                 var userInput = {//обьект для записи ввода с клавиатуры
                      up:   false,
                      down: false,
                      left: false,
                      right:false
                 };

                 addEventListener('keydown',function(event){//ввод с клавиатуры
                   switch (event .keyCode){
                     case 87: //W
                          userInput .up = true;
                       break
                     case 65: //A
                          userInput .left = true;
                       break
                     case 83: //S
                          userInput .down = true;
                       break
                     case 68: //D
                          userInput .right = true;
                       break

                   }
                 });

                 function inputProcessing(){
                     if (userInput.up){
                         player .up();
                         userInput .up = false;
                     }

                     if (userInput.down){
                         player .down();
                         userInput .down = false;
                     }

                     if (userInput.left){
                         player .left();
                         userInput .left = false;
                     }

                     if (userInput .right){
                         player .right();
                         userInput .right = false;
                     }
                 };

                 function update(){
                   inputProcessing();
                 };

                 function render(){
                   canvas.clearRect(0, 0, 600, 600); //чистим поле
                   var i = 0,j = 0,f = true;
                   for (i ;i<5;i++){
                     j=0;
                     for (j ;j<5; j++){
                       if (f){canvas .fillRect(i*10, j*10, 10, 10);}
                       if (f){
                          f = false;
                       }
                       else f = true;
                     }
                   }                                        //рисуем карту
                 };

                 var fps = 15;//частота обновления экрана
                 function step(){//игровой цикл
                    update();
                    render();
                    setTimeout(function(){
                    requestAnimationFrame(step);
                    },1000/fps);

                 };
                render();

               }
          }
          programm .game();
        </script>
    </body>
  </html>