superterran/dozer.html

## dozer.html
<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>
	<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>