Dungeon Crawler

Developer
Adam Grayson
Size
3,644 Kb
Views
70,840
  1. Dungeon Crawler Previews
  2. Dungeon Crawler HTML Codes
  3. Dungeon Crawler CSS Codes
  4. Dungeon Crawler JS Codes

How do I make an dungeon crawler?

Explore the dungeon by clicking tiles that are lit up. Create your own path through the dungeon as you encounter monsters and collect items. Keep a careful eye on your exploration tokens though, you don't want to get stuck in there forever!. What is a dungeon crawler? How do you make a dungeon crawler? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.

Dungeon Crawler Previews
IQ Test

Dungeon Crawler - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dungeon Crawler</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="dungeon"></div>
<div class="tokenCounter"></div>
<ul> <li class="monstersEncountered"></li> <li class="hpFound"></li> <li class="mpFound"></li> <li class="coinsFound"></li>
</ul>
<div class="reset">Reset</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dungeon Crawler - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
*	{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none;
}
html, body { background:#606060; font:400 16px/24px 'Lato', sans-serif; color:#ffffff;
}
.dungeon { width:320px; height:320px; position:relative; margin:30px auto 0 auto; background:#000; -webkit-border-radius:8px; -moz-border-radius:8px; -ms-border-radius:8px; -o-border-radius:8px; border-radius:8px; overflow:hidden;
}
.tokenCounter { width:320px; margin:15px auto 0 auto; text-align:center;
}
ul { width:320px; margin:15px auto 0 auto; text-align:center;
}
.reset { width:150px; padding:15px; background:#EC7547; text-align:center; margin:15px auto 0 auto; -webkit-border-radius:8px; -moz-border-radius:8px; -ms-border-radius:8px; -o-border-radius:8px; border-radius:8px; cursor:pointer;
}
.room { background-color:#222222;
/* border-bottom:1px solid #000000; border-left:1px solid #000000;*/ position:absolute; left:0; top:0;
}
.room.active { background-color:#444444; -webkit-transition: all 0.3s ease;	-moz-transition:	all 0.3s ease; -ms-transition:	all 0.3s ease;	-o-transition: all 0.3s ease;	transition: all 0.3s ease;
}
.room.active:hover { background-color:#ffffff;
}
.room.active:hover { cursor:pointer;
}
.room.unactive { background-color:#000000;
}
.collectable { width:20px; height:20px; margin:10px auto 0 auto; cursor:pointer; -webkit-transition: all 0.3s ease;	-moz-transition:	all 0.3s ease; -ms-transition:	all 0.3s ease;	-o-transition: all 0.3s ease;	transition: all 0.3s ease; -webkit-border-radius:50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;
}
.collectable:hover { opacity:0.5;
}
.coins { background-color:#FFD728;
}
.coins:before { display:block; width:20px; height:20px; line-height:18px; font-size:12px; content: "c"; text-align:center;
}
.monster { background:#60DB5C;
}
.monster:before { display:block; width:20px; height:20px; line-height:18px; font-size:12px; content: "m"; text-align:center;
}
.healthPotion	{ background:#DC3964;
}
.healthPotion:before { display:block; width:20px; height:20px; line-height:20px; font-size:12px; content: "h"; text-align:center;
}
.manaPotion	{ background:#33CBE0;
}
.manaPotion:before { display:block; width:20px; height:20px; line-height:18px; font-size:12px; content: "m"; text-align:center;
}

Dungeon Crawler - Script Codes JS Codes

$(document).ready(function() {	var publicColumns = 0, tokens = 25, monsters = 0, healthPotions = 0, manaPotions = 0, coins = 0;	$('.tokenCounter').text('Exploration Tokens Remaining: ' + tokens); $('.coinsFound').text('Coins: ' + coins); $('.monstersEncountered').text('Monsters Encountered: ' + monsters); $('.hpFound').text('Health Potions: ' + healthPotions); $('.mpFound').text('Mana Potions: ' + manaPotions);	createDungeon('.dungeon', 8, 8);
/************ create dungeon function ************/	function createDungeon(parent, columns, rows){	//declare vars	var roomWidth = $(parent).width() / columns;	var roomHeight = $(parent).height() / rows;	var roomCount = columns * rows;	var roomTop = 0;	var roomLeft = 0;	var startingRoom = Math.floor(Math.random() * roomCount);	//generate rooms based on roomCount	for(i = 0; i < roomCount; i++){	//generate room	$(parent).append('<div class="room"></div>');	//set its top and left	$('.room').eq(i).css('top', roomTop + 'px');	$('.room').eq(i).css('left', roomLeft + 'px');	//generate top and left for each room	if(roomLeft < $(parent).width() - roomWidth){	roomLeft += roomWidth;	}else{	roomLeft = 0;	roomTop += roomHeight;	}	}	//generate room size	$('.room').css('width', roomWidth + 'px');	$('.room').css('height', roomHeight + 'px');	//create public access to column count	publicColumns = columns;	//generate starting room	$('.room').eq(startingRoom).addClass('active');	uncoverRooms(startingRoom, $('.room').eq(startingRoom));	}
/************ room click function ************/	$(document).on('touchstart click', '.room' ,function(){	var currIndex = $(this).index();	if(tokens > 0){	if($(this).hasClass('active')){	uncoverRooms(currIndex, this);	generateContents(this);	tokens --;	$('.tokenCounter').text('Exploration Tokens Remaining: ' + tokens);	if(tokens <= 0){	$('.room').removeClass('active');	}	}	}	});
/************ uncover rooms function ************/	function uncoverRooms(roomIndex, target){	//make right active	if($('.room').eq(roomIndex + 1).css('top') == $(target).css('top')){	if($('.room').eq(roomIndex + 1).hasClass('unactive')){	//Do nothing	}else{	$('.room').eq(roomIndex + 1).addClass('active');	}	}	//make left active	if($('.room').eq(roomIndex - 1).css('top') == $(target).css('top')){	if($('.room').eq(roomIndex - 1).hasClass('unactive')){	//Do nothing	}else{	$('.room').eq(roomIndex - 1).addClass('active');	}	}	//make top active	if($('.room').eq(roomIndex - publicColumns).css('left') == $(target).css('left')){	if(roomIndex - publicColumns < 0){	//Do nothing	}else{	if($('.room').eq(roomIndex - publicColumns).hasClass('unactive')){	//Do nothing	}else{	$('.room').eq(roomIndex - publicColumns).addClass('active');	}	}	}	//make bottom active	if($('.room').eq(roomIndex + publicColumns).css('left') == $(target).css('left')){	if($('.room').eq(roomIndex + publicColumns).hasClass('unactive')){	//Do nothing	}else{	$('.room').eq(roomIndex + publicColumns).addClass('active');	}	}	//make room unactive	$(target).removeClass('active');	$(target).addClass('unactive');	}
/************ function to generate room contents ************/	function generateContents(target){	var outcome = 'coins';	var randomNumber = Math.floor(Math.random() * 6);	switch(randomNumber){	case 0:	outcome = 'coins'; coins++; $('.coinsFound').text('Coins: ' + coins);	break;	case 1:	outcome = 'monster'; monsters++; $('.monstersEncountered').text('Monsters Encountered: ' + monsters);	break;	case 2:	outcome = 'healthPotion'; healthPotions++; $('.hpFound').text('Health Potions: ' + healthPotions);	break;	case 3:	outcome = 'manaPotion'; manaPotions++; $('.mpFound').text('Mana Potions: ' + manaPotions);	break;	default:	outcome = 'nothing';	break;	}	$(target).append('<div class="' + outcome + ' collectable"></div>');	}
/************ function to pick up items ************/	$(document).on('touchstart click', '.collectable', function(){	$(this).remove();	});
/************ function to reset the dungeon ************/	$(document).on('touchstart click', '.reset', function(){	$('.dungeon').empty(); createDungeon('.dungeon', 8, 8); tokens = 25; $('.tokenCounter').text('Exploration Tokens Remaining: ' + tokens);	});
}); //CLOSE DOC READY
Dungeon Crawler - Script Codes
Dungeon Crawler - Script Codes
Home Page Home
Developer Adam Grayson
Username agrayson
Uploaded November 10, 2022
Rating 3
Size 3,644 Kb
Views 70,840
Do you need developer help for Dungeon Crawler?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam Grayson (agrayson) Script Codes
Name
Simple Accordion
Minimal Solar System
Playing Animations on Scroll
HTML5 GeoLocation Example
Custom Select Element
Responsive square grid in pure CSS
Centered background Image with hot spots
Sliding Lines Animation
Circle Progression Plugin
Multi-Column Responsive Carousel
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!