I'm triying to create a game that generates a random dungeon in a map; I'm having trouble generating the rooms and having them connect between themselves.
I'm triying to create an algorithm that generates a room once a player has passed through a door; I have created a variable size map using and I have created the first room; but i've got no idea on how to start generating new rooms using the first room as a reference and how to solve the various problems random dungeon generators have (having rooms collide with the map limit or another room, checking if there is enough space for a room (and not creating a door if there isn't enough), having rooms reuse the doors that another room has placed, etc.). The idea I had in mind for creating the rooms is that once the player steps on a door; the algorythm runs a function to calculate the distance between the player and the closest wall (from a room or the map limit); once the generator knows the maximum size a room can have in that space; it rolls a random number to determine the width and heigth the room will have (under some parameters); when the room generates, it will have 4 doors; one in each direction, by doing that i can eliminate the possibiliy of having an unaccesible room. I'll leave the code I have developed below; any help or ideas you can give me on how to do this will be great. Thanks for your attention :) .
<html lang="es">
<head>
<title>Mi primera página</title>
<meta charset="utf-8"/>
<script type="text/javascript">
let mapa = [];
let ancho;
let alto;
let zoom;
function crearMapa(){
var color='';
var cuadro=zoom;
zoom.oninput=cuadro;
document.getElementById('pantalla').innerHTML = '';
mapa = [];
let div = document.createElement('div');
div.id = 'mesa';
div.style.width = ancho*cuadro + 'px';
div.style.height = alto*cuadro + 'px';
for (var j=0;j<alto;j++){
let fila = [];
for(var i=0;i<ancho;i++){
if((i+j)%2==0) color='#ffffff'; else color='#cccccc';
let casilla = document.createElement('div');
casilla.id = 'cuadro-x-y';
casilla.style.width = cuadro + 'px';
casilla.style.height = cuadro + 'px';
casilla.style.float = 'left';
casilla.style.backgroundColor = color;
fila.push(casilla);
div.appendChild(casilla);
}
mapa.push(fila);
}
document.getElementById('pantalla').appendChild(div);
}
function pintaMapa(){
ancho=parseInt(document.getElementById('ancho').value);
alto=parseInt(document.getElementById('alto').value);
zoom=document.getElementById('slider').value;
crearMapa();
generaSalaInicial();
}
const MAX_ALTURA = 10;
const MAX_ANCHURA = 10;
const MIN_ALTURA = 5;
const MIN_ANCHURA = 5;
const MURO = 'red';
const MURO2 = 'green';
const MURO3 = 'blue';
function generaAltura() {
return Math.floor(Math.random() * MAX_ALTURA + MIN_ALTURA);
}
function generaAnchura() {
return Math.floor(Math.random() * MAX_ANCHURA + MIN_ANCHURA);
}
let altura;
let anchura;
function generaSalaInicial() {
altura = generaAltura();
anchura = generaAnchura();
let anchura0 = 0;
let altura0 = 0;
let mitadAltura = Math.trunc(altura / 2);
let mitadAnchura = Math.trunc(anchura / 2);
for (let i = 0; i <= anchura; i++) {
mapa[anchura0][i].style.backgroundColor = MURO;
if (i != mitadAnchura) {
mapa[altura][i].style.backgroundColor = MURO;
}
}
for (let i = 0; i <= altura; i++) {
mapa[i][altura0].style.backgroundColor = MURO;
if (i != mitadAltura) {
mapa[i][anchura].style.backgroundColor = MURO;
}
}
}
var disDer;
var disIzq;
var disArr;
var disAbj;
function distDer(){
disDer = ancho - anchura - 1 ;
}
function distIzq(){//broken
disIzq = anchura + 1;
}
function distArr(){//broken
disArr = altura + 1;
}
function distAbj(){
disAbj = alto - altura - 1;
}
function genHabDer(){//broken
distDer()
alert(disDer)
let anchura0 = anchura +1;
let altura0 = altura +1;
altura = generaAltura();
anchura = generaAnchura();
let mitadAltura = Math.trunc(altura / 2);
let mitadAnchura = Math.trunc(anchura / 2);
for (let i = 0; i <= anchura; i++) {
mapa[anchura0][i].style.backgroundColor = MURO2;
if (i != mitadAnchura) {
mapa[altura][i].style.backgroundColor = MURO2;
}
}
for (let i = 0; i <= altura; i++) {
mapa[i][altura0].style.backgroundColor = MURO2;
if (i != mitadAltura) {
mapa[i][anchura].style.backgroundColor = MURO2;
}
}
}
</script>
</head>
<body onkeypress="mover(event)">
AnchoMapa (en cuadritos): <input type="text" id="ancho" value="40"><br>
AltoMapa (en cuadritos): <input type="text" id="alto" value="40"><br>
Tamaño de la cuadricula (zoom) (se mide en pixels):<input type="range" id="slider" min="1" max="50" value="10" onchange="pintaMapa()">
<br>
<input type="button" value="Crear Mapa" onclick="pintaMapa()"><br>
<div id="pantalla"></div>
</body>
</html>```
My java-script Code for on-load event is running successfully in chrome and not working in IE 11. Don't know why its happening .Please help me, i searched a lot and not found the correct solutions.i am working the java-script for dynamics crm 2011 but not able to get the job done.Any changes is not showing in IE 11 but showing in chrome.I am adding my code below.
function calculateManHour() {
debugger;
var advantageManHourCost = 0;
var engageManHourCost = 0;
var advantageManDayCost = 0;//new
var engageManDayCost = 0;//new
var advantageManHour = 0;
var engageManHour = 0;
var advantageManDay = 0;//new
var engageManDay = 0;//new
var currentQuoteProductId = Xrm.Page.data.entity.getId().toString().split("{")[1].split("}")[0];
var costPricePerUnit = parseFloat(Xrm.Page.getAttribute("costprice").getValue());
var serviceProvider = Xrm.Page.getAttribute("serviceprovider").getValue()[0].name;
var quoteProductType = Xrm.Page.getAttribute("quoteproducttype").getValue();
var quoteProductElem = Xrm.Page.getAttribute("quoteproducttype");
var config = getRecord("manhourcostconfigSet", "2A7F8D4D-10C4-E911-943A-00155D1E13EA");
var currentQuoteProduct = getRecord("QuoteDetailSet", currentQuoteProductId);
advantageManHourCost = parseFloat(config.ManHourCost.Value);
engageManHourCost = parseFloat(config.EngageManhourcost.Value);
advantageManDayCost = parseFloat(config.AdvantageMandaycost.Value);//new
engageManDayCost = parseFloat(config.EngageMandaycost.Value);//new
if (quoteProductType == false) {
Xrm.Page.getAttribute("valueoffering").setValue(true);
if (serviceProvider == "Services_ADVANTAGE") {
advantageManHour = costPricePerUnit / advantageManHourCost;
advantageManDay = costPricePerUnit / advantageManDayCost;
engageManHour = null;
engageManDay = null;
Xrm.Page.getControl("engagebudgetedmanhours").setVisible(false);
Xrm.Page.getControl("engagemandaycost").setVisible(false);
setTooltip("advantagemandaycost", advantageManDayCost, "advantagebudgetedmanhours", advantageManHourCost);
}
if (serviceProvider == "Services_ENGAGE") {
engageManHour = costPricePerUnit / engageManHourCost;
engageManDay = costPricePerUnit / engageManDayCost;
advantageManHour = null;
advantageManDay = null;
Xrm.Page.getControl("advantagebudgetedmanhours").setVisible(false);
Xrm.Page.getControl("advantagemandaycost").setVisible(false);
setTooltip("engagemandaycost", engageManDayCost, "engagebudgetedmanhours", engageManHourCost);
}
var data = {
"engagebudgetedmanhours": engageManHour,
"advantagebudgetedmanhours": advantageManHour,
"engagemandaycost": engageManDay,
"advantagemandaycost": advantageManDay
}
Xrm.Page.getAttribute("advantagebudgetedmanhours").setValue(advantageManHour);
Xrm.Page.getAttribute("engagebudgetedmanhours").setValue(engageManHour);
Xrm.Page.getAttribute("advantagemandaycost").setValue(advantageManDay);//new
Xrm.Page.getAttribute("engagemandaycost").setValue(engageManDay);//new
Xrm.Page.getAttribute("engagebudgetedmanhours").setSubmitMode("always");
Xrm.Page.getAttribute("advantagebudgetedmanhours").setSubmitMode("always")
Xrm.Page.getAttribute("engagemandaycost").setSubmitMode("always");//new
Xrm.Page.getAttribute("advantagemandaycost").setSubmitMode("always")//new
Xrm.Page.data.entity.save();
}
}
function setTooltip(attribute1, tip1, attribute2, tip2) {
debugger;
try {
if (!attribute1 || !tip1 && !attribute2 || !tip2) {
return;
}
var control1 = Xrm.Page.getControl(attribute1);
var control2 = Xrm.Page.getControl(attribute2);
if (!control1 || !control2) {
return;
}
var element1 = document.getElementById(attribute1 + "_d");
var element2 = document.getElementById(attribute2 + "_d");
if (!element1 || !element2) {
return;
}
var tooltipSpan1 = document.createElement("span");
tooltipSpan1.id = attribute1 + "_tooltip";
tooltipSpan1.textContent = "Man Day Cost is = " + tip1;
tooltipSpan1.setAttribute(
"style",
"display: none; width: 120px; background-color: #fdfafa; color: ; rgb(23, 22, 22): center; padding: 5px 5px; border-radius: 3px;" +
"border: 1px solid black;z-index: 1;"
);
var tooltipSpan2 = document.createElement("span");
tooltipSpan2.id = attribute1 + "_tooltip";
tooltipSpan2.textContent = "Man Hour Cost is = " + tip2;
tooltipSpan2.setAttribute(
"style",
"display: none; width: 120px; background-color: #fdfafa; color: ; rgb(23, 22, 22): center; padding: 5px 5px; border-radius: 3px;" +
"border: 1px solid black;z-index: 1;"
);
element1.appendChild(tooltipSpan1);
element2.appendChild(tooltipSpan2);
document.getElementById(attribute1 + "_c").setAttribute("title", "Man Day Cost is = " + tip1);
document.getElementById(attribute2 + "_c").setAttribute("title", "Man Hour Cost is = " + tip2);
element1.addEventListener("mouseover", (e) => {
tooltipSpan1.style.display = "inline";
tooltipSpan1.style.top = (e.clientX + 20) + 'px';
tooltipSpan1.style.left = (e.clientY + 20) + 'px';
});
element1.addEventListener("mouseout", (e) => {
tooltipSpan1.style.display = "none";
});
element2.addEventListener("mouseover", (e) => {
tooltipSpan2.style.display = "inline";
tooltipSpan2.style.top = (e.clientX + 20) + 'px';
tooltipSpan2.style.left = (e.clientY + 20) + 'px';
});
element2.addEventListener("mouseout", (e) => {
tooltipSpan2.style.display = "none";
});
} catch (e) {
console.log(e);
}
}
You're using arrow => functions. IE11 doesn't support them. Arrow function come under ES6 which is not yet supported by IE11.
There are lot of online tools which will help you convert ES6 to Es5
Convert below function
element1.addEventListener("mouseover", (e) => {
tooltipSpan1.style.display = "inline";
tooltipSpan1.style.top = (e.clientX + 20) + 'px';
tooltipSpan1.style.left = (e.clientY + 20) + 'px';
});
to something like below
element1.addEventListener("mouseover", function(e) {
tooltipSpan1.style.display = "inline";
tooltipSpan1.style.top = (e.clientX + 20) + 'px';
tooltipSpan1.style.left = (e.clientY + 20) + 'px';
});
guys, I want to ask how could I update x and y coordinate of moving element so when this moving element hits another element it fades out. Thanks for the help in advance.
if ($(element1[counter]).position().top >= $("#element2Id").position().top &&
$(element1[counter]).position().top <= $("#element2Id").position().top + $("#element2Id").height() &&
$(element1[counter]).position().left == $("#element2Id").position().left) {
$("#bubble1Id").fadeOut();
}
counter++;
if (counter == 11)
counter = 0;
You can use the following script that has an improved version of the post I commented on OP see below.
var is_colliding = function($div1, $div2) {
// Div 1 data
var d1_offset = $div1.offset();
var d1_height = $div1.outerHeight(true);
var d1_width = $div1.outerWidth(true);
var d1_distance_from_top = d1_offset.top + d1_height;
var d1_distance_from_left = d1_offset.left + d1_width;
// Div 2 data
var d2_offset = $div2.offset();
var d2_height = $div2.outerHeight(true);
var d2_width = $div2.outerWidth(true);
var d2_distance_from_top = d2_offset.top + d2_height;
var d2_distance_from_left = d2_offset.left + d2_width;
var not_colliding = (d1_distance_from_top < d2_offset.top || d1_offset.top > d2_distance_from_top || d1_distance_from_left < d2_offset.left || d1_offset.left > d2_distance_from_left);
// Return whether it IS colliding
return !not_colliding;
};
you can call it like
var is_colliding = function($div1, $div2) {
// Div 1 data
var d1_offset = $div1.offset();
var d1_height = $div1.outerHeight(true);
var d1_width = $div1.outerWidth(true);
var d1_distance_from_top = d1_offset.top + d1_height;
var d1_distance_from_left = d1_offset.left + d1_width;
// Div 2 data
var d2_offset = $div2.offset();
var d2_height = $div2.outerHeight(true);
var d2_width = $div2.outerWidth(true);
var d2_distance_from_top = d2_offset.top + d2_height;
var d2_distance_from_left = d2_offset.left + d2_width;
var not_colliding = (d1_distance_from_top < d2_offset.top || d1_offset.top > d2_distance_from_top || d1_distance_from_left < d2_offset.left || d1_offset.left > d2_distance_from_left);
// Return whether it IS colliding
return !not_colliding;
};
console.log(is_colliding($("#div1"), $("#div2")));
#div1,
#div2 {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">DIV 1</div>
<div id="div2" style="margin-top:10px;">DIV 2</div>
Change/remove the margin-top to detect collision
I have an assignment and I am a bit stuck. The assignment states:
Modify the game so that the time is tracked and a best time (or time to beat) is stored and displayed at the end of the game and at the beginning of the next game that is played. This functionality assumes the browser is not closed and that each successive game is begun through the "Play Again?" link. The display of the time to beat is shown below.
I have all files necessary, but I am stuck in this part. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Recipe: Drawing a square</title>
<script src="easel.js"></script>
<script type="text/javascript">
var canvas;
var stage;
var placementArray = [];
var tileClicked;
var timeAllowable;
var totalMatchesPossible;
var matchesFound;
var txt;
var matchesFoundText;
var tileHeight = 30;
var tileWidth = 45;
var border = 1;
var globalPadding = 10;
var margin = 10;
var padding = 5;
var textTiles;
var flashcards = [
["a", "\u3042"],
["i", "\u3044"],
["u", "\u3046"],
["e", "\u3048"],
["o", "\u304A"],
["ka", "\u304B"],
["ki", "\u304D"],
["ku", "\u304F"],
["ke", "\u3051"],
["ko", "\u3053"],
["sa", "\u3055"],
["shi", "\u3057"],
["su", "\u3059"],
["se", "\u305B"],
["so", "\u305D"],
["ta", "\u305F"],
["chi", "\u3061"],
["tsu", "\u3064"],
["te", "\u3066"],
["to", "\u3068"],
["na", "\u306A"],
["ni", "\u306B"],
["nu", "\u306C"],
["ne", "\u306D"],
["no", "\u306E"],
["ha", "\u306F"],
["hi", "\u3072"],
["fu", "\u3075"],
["he", "\u3078"],
["ho", "\u307B"],
["ma", "\u307E"],
["mi", "\u307F"],
["mu", "\u3080"],
["me", "\u3081"],
["mo", "\u3082"],
["ya", "\u3084"],
["yu", "\u3086"],
["yo", "\u3088"],
["ra", "\u3089"],
["ri", "\u308A"],
["ru", "\u308B"],
["re", "\u308C"],
["ro", "\u308D"],
["wa", "\u308F"],
["wo", "\u3092"],
["n", "\u3093"]
];
function init() {
canvas = document.getElementById('myCanvas');
stage = new Stage(canvas);
totalMatchesPossible = flashcards.length;
var numberOfTiles = totalMatchesPossible * 2;
matchesFound = 0;
var columns = 12;
timeAllowable = 500;
txt = new Text(timeAllowable, "30px Monospace", "#000");
txt.textBaseline = "top";
txt.x = 700;
txt.y = 0;
stage.addChild(txt);
textTiles = [];
matchesFoundText = new Text(matchesFound + "/" + totalMatchesPossible, "30px Monospace", "#000");
matchesFoundText.textBaseline = "top";
matchesFoundText.x = 700;
matchesFoundText.y = 40;
stage.addChild(matchesFoundText);
Ticker.init();
Ticker.addListener(window);
Ticker.setPaused(false);
setPlacementArray(numberOfTiles);
for (var i = 0; i < numberOfTiles; i++) {
var placement = getRandomPlacement(placementArray);
var pairIndex = Math.floor(i / 2);
text = flashcards[pairIndex][i % 2];
var textTile = drawTextTile(text, pairIndex);
textTile.x = (tileWidth + margin) * (placement % columns) + globalPadding;
textTile.y = (tileHeight + margin) * Math.floor(placement / columns) + globalPadding;
stage.addChild(textTile);
background = new Shape();
background.x = textTile.x - padding;
background.y = textTile.y - padding;
background.graphics.setStrokeStyle(border).beginStroke("#000").beginFill('#eee').drawRect(0, 0, tileWidth, tileHeight);
textTiles.push(background);
stage.addChildAt(background);
background.text = textTile;
background.onPress = handleOnPress;
stage.update();
};
}
function drawTextTile(text, pairIndex) {
textTile = new Text(text, "20px Monospace", "#000");
textTile.pairIndex = pairIndex;
textTile.textBaseline = "top";
return textTile;
}
function randomColor() {
var color = Math.floor(Math.random() * 255);
var color2 = Math.floor(Math.random() * 255);
var color3 = Math.floor(Math.random() * 255);
return Graphics.getRGB(color, color2, color3)
}
function setPlacementArray(numberOfTiles) {
for (var i = 0; i < numberOfTiles; i++) {
placementArray.push(i);
}
}
function getRandomPlacement(placementArray) {
randomNumber = Math.floor(Math.random() * placementArray.length);
return placementArray.splice(randomNumber, 1)[0];
}
function handleOnPress(event) {
var tile = event.target;
if (!!tileClicked === false || tileClicked === tile) {
tileClicked = tile;
} else {
tileClicked.graphics.beginFill('#eee').drawRect(0, 0, tileWidth, tileHeight);
tile.graphics.beginFill('#aae').drawRect(0, 0, tileWidth, tileHeight);
if (tileClicked.text.pairIndex === tile.text.pairIndex && tileClicked.id != tile.id) {
tileClicked.visible = false;
tile.visible = false;
matchesFound++;
matchesFoundText.text = matchesFound + "/" + totalMatchesPossible;
if (matchesFound === totalMatchesPossible) {
gameOver(true);
}
}
tileClicked = tile;
}
stage.update();
}
function tick() {
secondsLeft = Math.floor((timeAllowable - Ticker.getTime() / 1000));
txt.text = secondsLeft;
if (secondsLeft <= 0) {
gameOver(false);
}
stage.update();
}
function gameOver(win) {
Ticker.setPaused(true);
var replayParagraph = document.getElementById("replay");
replayParagraph.innerHTML = "<a href='#' onClick='history.go(0);'>Play Again?</a>";
for (var i = 0; i < textTiles.length; i++) {
textTiles[i].onPress = null;
}
if (win === true) {
matchesFoundText.text = "You win!"
} else {
txt.text = secondsLeft + "... Game Over";
}
}
function replay() {
init();
}
</script>
</head>
<body onload="init()">
<header id="header">
<p id="replay"></p>
</header>
<canvas id="myCanvas" width="960" height="400"></canvas>
</body>
</html>
I give you 1 option for this, though you can do it also in other ways,
we declare global variables which are
var prev_time;
var best_time;
add that to your global variable declarations, then give it a value when you compute the time i guess we had that here:
function tick() {
secondsLeft = Math.floor((timeAllowable - Ticker.getTime() / 1000));
txt.text = secondsLeft;
if (secondsLeft <= 0) {
gameOver(false);
}
//compute here the total time player had and give it to prev_time
//var totalTimePlayerplayed = some computation here which should be allowed time per player - secondsLeft
prev_time = totalTimePlayerplayed;
stage.update();
}
function gameOver(win) {
Ticker.setPaused(true);
var replayParagraph = document.getElementById("replay");
replayParagraph.innerHTML = "<a href='#' onClick='history.go(0);'>Play A
gain?</a>";
for (var i = 0; i < textTiles.length; i++) {
textTiles[i].onPress = null;
}
if (win === true) {
matchesFoundText.text = "You win!"
if(best_time !== NULL){
best_time = prev_time;
//WE assume that the last player is the best scorer
}
} else {
//if there is already existing top scorer
if(best_time < prev_time){
best_time = prev_time
}
txt.text = secondsLeft + "... Game Over";
}
}
then give that time of the first player to the prev_time. Upon Game over or Game ended we validate here if the best_time has a value if not, then we give it a value of the value of prev_time, else we validate if the score is higher that the previous best_time and here's a tip, now when the player would trigger the "Play again" which I can't seem find right now, you get the variable best_time's value and display it as the score to beat. Hope you get the concept and somehow it helped you accomplished what you're intended to do, but like i said before you also have some other options to do this.
So here's my code:
function drawGridSquare(tableText)
{
gridSquare = document.getElementById('square');
gridSquare.innerHTML = tableText;
document.body.appendChild(gridSquare);
gridSquare.style.display = 'block';
gridSquare.style.top = e.pageY - gridSquare.offsetHeight + 1;
gridSquare.style.left = e.pageX - gridSquare.offsetWidth/2;
gridSquare.focus();
}
This function is called on mousedown from a td element:
<td onmousedown="drawGridSquare('textData');">
This generates a pretty little square which uses jQuery draggable/droppable function. All I want to do is while the user's mouse is STILL pressed down, the focus would revert to the gridSquare that was created.
What are my options for this?
Seeing as how I couldn't find a clear way to do this, my work around is as follows:
function drawGridSquare(tableText, cellPosition)
{
gridSquare = document.getElementById('square');
gridSquare.innerHTML = tableText;
document.body.appendChild(gridSquare);
gridSquare.style.display = 'block';
startPositionX = endPositionX = cellPosition;
gridSquare.style.top = mouseY(event) - gridSquare.offsetHeight + 1;
gridSquare.style.left = mouseX(event) - gridSquare.offsetWidth/2;
squareReady = true;
}
function moveGridSquare()
{
if (squareReady)
{
squareIsMoving = true;
characterWidth = 1;
gridSquare = document.getElementById('square');
gridSquare.style.top = mouseY(event) - gridSquare.offsetHeight + 1;
gridSquare.style.left = mouseX(event) - gridSquare.offsetWidth/2;
}
}
function selectionEnd() {
if (squareIsMoving)
{
//Code to DROP INTO THE GRID
var dataStart = (Math.round((startPositionX) / characterWidth)) + 1;
var dataLength = Math.abs((Math.round((endPositionX)/characterWidth)) - (Math.round((startPositionX) / characterWidth)));
var data = dataStart + "," + dataLength + "," + theSelectedText;
dropDone(data);
//Set square to false
squareIsMoving = false;
squareReady=false;
//Destroy the square
document.getElementById('square').innerHTML = "";
document.getElementById('square').style.display = 'none';
}
}
<body onmousemove="moveGridSquare();">
<div id="square" onmousedown="squareReady=true;moveTheSquare();" onmouseup="selectionEnd();" style="display:none;" ></div>