Untitled

<html>
  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <style type="text/css">
      #stage {
        height: 100%;
        width: auto;
        position: fixed;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
      }

      body {
        background-color: darkgrey;
      }
    </style>
  </head>
  <body>
    <canvas id="stage"></canvas>

    <script>
        var Game = {
          blocksIn: 0,
          gamewidth: 20,
          gameheight: 23,
          canvas: false,
          size: 20,

          init: function() {

            this.canvas = $('#stage');

            this.canvas.attr({
              width: this.gamewidth * this.size,
              height: this.gameheight * this.size
            });

            this.loop();
            this.bindings();

          },

          loop: function() {

            // this.clearCanvas(); // wipe the canvas

            // position of painter
            var posx = 0;
            var posy = 0;

            //looping through the stage to paint canvas
            this.stage.forEach(function(row) {
              //looping through each letter in stage for rows
              row.split("").forEach(function(cell) {
                this.paint(posx, posy, cell);
                posx = posx + 1;
              }.bind(this));

              // reset for next loop
              posx = 0;
              posy = posy + 1;
            }.bind(this));
          },

          clearCanvas: function() { // might not be needed
            var c = document.getElementById("stage");
            c.getContext("2d").clearRect(0, 0, c.width, c.height);
          },

          paint: function(x, y, what) {
            var c = document.getElementById("stage");
            var ctx = c.getContext("2d");
            ctx.fillStyle = this.sprites[what];
            ctx.fillRect(x * this.size, y * this.size, this.size, this.size);
          },

          getChar: function(x, y) {
            return this.stage[y].charAt(x);
          },

          setChar: function(char, x, y) {
            var row = this.stage[y];
            this.stage[y] = row.substr(0, x) + char + row.substr(x + 1);
          },

          getPosition: function(char) {
            // position of painter
            var x = 0;
            var y = 0;
            var pos = {};

            //looping through the stage to determine position
            this.stage.forEach(function(row) {
              row.split("").forEach(function(cell) {
                if (cell == char) pos = {
                  x, y
                };
                x = x + 1;
              }.bind(this));
              x = 0;
              y = y + 1;
            }.bind(this));
            return pos;
          },

          bindings: function() {
            document.addEventListener('keyup', function(e) {

              var pos = this.getPosition('p');
              var check = this.getPosition('p');

              var key = e.key;

              if (key == "w") check.y--;
              if (key == "s") check.y++;
              if (key == "a") check.x--;
              if (key == "d") check.x++;

              if (this.getChar(check.x, check.y) == "o") {
                // perform the character movement
                this.setChar('p', check.x, check.y);
                this.setChar('o', pos.x, pos.y);
              }

              // boulder detection
              if (this.getChar(check.x, check.y) == "b") {

                // if player bumps into boulder, let's see if we can push it
                var rock = {
                  x: check.x,
                  y: check.y
                }

                if (key == "w") check.y--;
                if (key == "s") check.y++;
                if (key == "a") check.x--;
                if (key == "d") check.x++;

                if (this.getChar(check.x, check.y) == "o") {
                  this.setChar('b', check.x, check.y);
                  this.setChar('p', rock.x, rock.y);
                  this.setChar('o', pos.x, pos.y);
                }

                if (this.getChar(check.x, check.y) == "e") {
                  this.setChar('e', check.x, check.y);
                  this.setChar('p', rock.x, rock.y);
                  this.setChar('o', pos.x, pos.y);
                  this.BlocksIn++;
                }

              }
              this.loop();
            }.bind(this), false);
          },

          stage: ['wwwwwwwwwwwwwwwwwwww',
            'woooooooooooooooooow',
            'wooooooowwwwwoooooow',
            'wooooooowooowoooooow',
            'wooooooowoeowoooooow',
            'wooooooowooowoooooow',
            'wooooooowooowoooooow',
            'wooooooowooowoooooow',
            'wooooooowooowoooooow',
            'wooooooowooowoooooow',
            'wooooooowooowoooooow',
            'wooooooowooowoooooow',
            'wooooooowooowoooooow',
            'wooooooowooowoooooow',
            'wooooooowooowoooooow',
            'wooooooowooowoooooow',
            'wooooooowobowoooooow',
            'wooooooowooowoooooow',
            'wooooooowopowoooooow',
            'wooooooowooowoooooow',
            'woooooooooooooooooow',
            'woooooooooooooooooow',
            'wwwwwwwwwwwwwwwwwwww',
          ],

          sprites: {
            p: "blue",
            w: "darkgrey",
            o: "beige",
            b: "green",
            e: "black"
          }
        }

        var game = $.extend({}, Game).init();
    </script>
  </body>
</html>