Instantly share code, notes, and snippets.

Embed
What would you like to do?
a homage to a bulldozer game I used to play
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment