Skip to content

Instantly share code, notes, and snippets.

@Kanol

Kanol/BomberMan.html

Last active December 27, 2015 08:04
Show Gist options
  • Save Kanol/1e701a269f93a4b5b065 to your computer and use it in GitHub Desktop.
Save Kanol/1e701a269f93a4b5b065 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
BomberMan.html
<head>
<meta charset=utf-8>
<style>
.block_wall {
background: rgb(192,192,192);
width: 20px;
height: 20px;
}
.block_air {
background: rgba(255,255,255, 0.1);
width: 20px;
height: 20px;
}
.block_box{
background : rgb(153,76,0);
width: 20px;
height: 20px;
}
.unit_player {
background: #1122aa;
width: 20px;
height: 20px;
}
.block_bomb{
background: black;
border-radius: 50px;
width: 20px;
height: 20px;
}
.block_fire{
background: yellow;
width: 20px;
height: 20px;
.map {
position: absolute;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div class="map"></div>
<div class="units"></div>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function Random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function drawUnits(units) {
$('.units').empty();
var $units = $('.units');
var $unit;
for (var uid in units) {
var unit = units[uid];
var x = unit['x'];
var y = unit['y'];
console.log('unit', unit);
$unit = $('<div class="unit"></div>');
$unit.addClass("unit_" + unit['type']);
$unit.css({'position':'absolute', 'left': (x * width) + 'px', 'top': (y * height) + 'px', 'width': width + 'px', 'height': height + 'px'});
$units.append($unit);
}
}
function DrawMap(map){
$('.map').empty();
var WindowMaxX =$(window).width();
var WindowMaxY =$(window).height();
var cssMap = $('.map');
var x=0;
var $block;
var drawblock;
cssMap.css('width', WindowMaxX);
cssMap.css('height', WindowMaxY);
$(document.body).append(cssMap);
for (var indexX in map ){
var y =0;
var row = map[indexX];
for (var indexY in row){
drawblock = row[indexY]['type'];
$block=$('<div class="block_'+drawblock+'"></div>');
$block.css({'position':'absolute', 'left': x + 'px', 'top': y + 'px'});
cssMap.append($block);
y+=20;
}
x+= 20;
}
}
function BombExplosion(Bomb_X, Bomb_Y){
setTimeout(function(){map[Bomb_X][Bomb_Y]['type']='fire';
if(map[Bomb_X+1][Bomb_Y]['isDestroyable']==true){
map[Bomb_X+1][Bomb_Y]['type']='fire';
}
if(map[Bomb_X-1][Bomb_Y]['isDestroyable']==true){
map[Bomb_X-1][Bomb_Y]['type']='fire';
}
if(map[Bomb_X][Bomb_Y+1]['isDestroyable']==true){
map[Bomb_X][Bomb_Y+1]['type']='fire';
}
if(map[Bomb_X][Bomb_Y-1]['isDestroyable']==true){
map[Bomb_X][Bomb_Y-1]['type']='fire';
}
DrawMap(map);
BombCount=+1;
},2000);
setTimeout(function(){
if(map[Bomb_X+1][Bomb_Y]['isDestroyable']==true){
map[Bomb_X+1][Bomb_Y]['type']='air';
}
if(map[Bomb_X-1][Bomb_Y]['isDestroyable']==true){
map[Bomb_X-1][Bomb_Y]['type']='air';
}
if(map[Bomb_X][Bomb_Y+1]['isDestroyable']==true){
map[Bomb_X][Bomb_Y+1]['type']='air';
}
if(map[Bomb_X][Bomb_Y-1]['isDestroyable']==true){
map[Bomb_X][Bomb_Y-1]['type']='air';
}
map[Bomb_X][Bomb_Y]['type']='air';
DrawMap(map);
},2200);
}
function SpawnBomb(){
var bombX, BombY;
if(BombCount>0){
BombX=player['x'];
BombY=player['y'];
map[BombX][BombY]['type']='bomb';
DrawMap(map);
BombCount=-1;
BombExplosion(BombX, BombY);
}
}
function makeRandomMap() {
var x=31;
var y=31;
for (var i = 0; i < x; i++) {
var row = [];
var IsDestroyable;
for (var j = 0; j < y; j++) {
var t = Random(0, BlockTypes.length - 1);
row.push({'type': BlockTypes[t], 'playerdamage': 'none', 'isDestroyable': true});
}
map.push(row);
}
for(var z=0; z < x; z++) {
for (var h = 0; h < y; h++) {
if((z==0)||(z==30)){
map[z][h]['type']=('wall');
map[z][h]['isDestroyable']=false;
}
if((h==0)||(h==30)){
map[z][h]['type']=('wall');
map[z][h]['isDestroyable']=false;
}
if((h%2==0)&&(z%2==0)){
map[z][h]['type']=('wall');
map[z][h]['isDestroyable']=false;
}
}
}
map[1][1]['type']='air';
map[2][1]['type']='air';
map[1][2]['type']='air';
return map
}
$(document.body).keydown(function(e) {
console.log('key', e.keyCode);
var key = e.keyCode;
var next_x=player['x'];
var next_y=player['y'];
if (key == 65) { // A
next_x = player['x'] - 1;
} else if (key == 83) { // S
next_y = player['y'] + 1;
} else if (key == 68) { // D
next_x = player['x'] + 1;
} else if (key == 87) { // W
next_y = player['y'] - 1;
} else if (key==17){ //ctrl
SpawnBomb();
} else {
return
}
if (map[next_x][next_y]['type']== 'air') {
player['y'] = next_y;
player['x'] = next_x;
drawUnits(units);
}
});
var width = 20;
var height = 20;
var map = [];
var BombCount=1;
var BlockTypes = ['box', 'air'];
var block ={'type': 'block', 'playerdamage': 'none', 'isDestroyable':'false'};
var player = {'x': 1, 'y': 1, 'type': 'player', 'name': 'Tolik'};
var units = [
player,
];
DrawMap(makeRandomMap());
drawUnits(units);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment