[javascript] Crear un mapa alaeatorio (es para un juego)

Foro de elhacker.net

Programación

Programación General

[javascript] Crear un mapa alaeatorio (es para un juego)

0 Usuarios y 1 Visitante están viendo este tema.

Páginas: [1]

Autor

Tema: [javascript] Crear un mapa alaeatorio (es para un juego) (Leído 6,697 veces)

z3nth10n

Desconectado

Mensajes: 1.583

"Jack of all trades, master of none." - Zenthion

[javascript] Crear un mapa alaeatorio (es para un juego)

« en: 27 Junio 2012, 19:22 pm »

Hola amigos. Bueno, lo que quiero hacer no es muy sencillo, lo que voy a hacer va a ser tan complejo como un motor de creación de mapas (tales como Minecraft, o Terraria), lo que quiero hacer, es que el usuario pueda crear un nuevo mapa. Y poder editarlo.... :silbar:

(Claro y que se pueda guardar dentro de nuestro cliente), como esto lo voy a hacer en HTA, voy a poder mezclar de todo tipo de lenguajes, tales como ASP para el cliente, y PHP para el servidor, pero necesito saber como.

Bueno, por el juego no os preocupeis. Ya he encontrado una buena base, que es:

Gameeffect --- Contiene el Super Mario Bros 64, que de ahí, me puedo sacar bastante información. Tales como los bloques, el personaje, etc.
Box2D --- Que añade efectos de física, tales como ragdoll, cuerpos geométricos, etc.

El problema es que, necesito aprender algo de matemáticas dentro de lo que es javascript. Y bueno... necesito tutoriales.... Hice otro post, pero no me siento seguro, asi que posteo uno aquí.

Vale, os voy a contar lo que quiero hacer, el juego va atratar algo asi como de SandBox (va a ser tipo plataformas, por eso utilizo Super Mario, pero a la misma vez, el mundo va a ser aleatorio, y claro, se va a poder editar), y puñado de cosas más.

Lo que necesito, o que alguien en concreto se ponga en contacto, y me ayude a diseñar el juego. (No tengo money)
O que alguien me soporte público.

Vale, las cuestiones son las siguientes:

>> Creación de bloques tales como (Tierra, piedra, arena, madera, etc.) (Todo esto en una misma imagen)
>> Creación del personaje
>> Creación de un inventario
>> Creación aleatoria de un mundo.

PD: El mundo tiene que seguir unos patrones, que seria algo así como el de cielo y tierra, y dentro de estos, algo así como los biomas)

Bueno, esto es complicado, y espero que cada usuario que tenga conocimientos de JS me ayude y aporte su granito de arena.

Un saludo.


	En línea

---

UTA - Portando GTA San Andreas a Unity3D.

⏩ Interesados hablad por Discord.

z3nth10n

Desconectado

Mensajes: 1.583

"Jack of all trades, master of none." - Zenthion

Re: [javascript] Crear un mapa alaeatorio (es para un juego)

« Respuesta #1 en: 27 Junio 2012, 20:47 pm »

He estado viendo acerca del generador de mundo, y he encontrado esto, una apliación llamada ValueNoise, no tengo ni idea de que es. Pero igual me sirve, solo tengo que saber como se maneja. Alguien que me heche una manita? :silbar:


	En línea

---

UTA - Portando GTA San Andreas a Unity3D.

⏩ Interesados hablad por Discord.

z3nth10n

Desconectado

Mensajes: 1.583

"Jack of all trades, master of none." - Zenthion

Re: [javascript] Crear un mapa alaeatorio (es para un juego)

« Respuesta #2 en: 27 Junio 2012, 20:58 pm »

Vale ya se mas o menos lo que es, todo esta en ingles, alguien me lo puiede traducir al español, y ya de paso que me heche una manita para empezar a hacer codigo?


	En línea

---

UTA - Portando GTA San Andreas a Unity3D.

⏩ Interesados hablad por Discord.

z3nth10n

Desconectado

Mensajes: 1.583

"Jack of all trades, master of none." - Zenthion

Re: [javascript] Crear un mapa alaeatorio (es para un juego)

« Respuesta #3 en: 27 Junio 2012, 23:15 pm »

He encontrado un tema en inglés de un tal Graham Weldon, y cuenta como hacer un mapa con JS y Canvas, lo malo es que no dice el código, a ver si alguien lo encuntra.

El tema es este.

Un saludo.


	En línea

---

UTA - Portando GTA San Andreas a Unity3D.

⏩ Interesados hablad por Discord.

z3nth10n

Desconectado

Mensajes: 1.583

"Jack of all trades, master of none." - Zenthion

Re: [javascript] Crear un mapa alaeatorio (es para un juego)

« Respuesta #4 en: 28 Junio 2012, 11:44 am »

He encontrado un nuevo código, este lo que hace es asignar una ID aleatoria a un DIV, http://www.preik.net/mapper.html

Código

<html>
 
<head><title>MAPPER</title></head>
 
<body>
 
<style type="text/css">
 
	.void {background-color:black;}
 
	.plains {background-color:#ccee88;}
 
	.hills {background-color:#85bb85;}
 
	.mountain {background-color:#aaaaaa;}
 
	.peaks {background-color:#eeffff;}
 
	.forest {background-color:22ff50;}
 
	.brush {background-color:#99ee50;}
 
	.swamp {background-color:#448810;}
 
	.desert {background-color:#ffff22;}
 
	.shore {background-color:#999955;}
 
	.ocean  {background-color:#0088ff;}
 
	.lake  {background-color:#0055ff;}
 
	.abyss  {background-color:#0066bb;}
 
	.settlement {background-color:#001000;color:#aa5515;}
 
	.player {background-color:#000000;color:#ffff00;}
 
	.mapEdge {background-color:#000000;color:#000000;}
 
</style>
 
<div style="font-family:Monospace,Courier,New;font-size:18pt;">
 
<center>
 
<script language=javascript>
 
	var nTerrainTypes=10;
 
	var terrainOrderStrength=4;
 
	var gameReady=false;
 
	function TerrainType(index,name,rep,style,matrix,passable){
 
		this.index=index;
 
		this.matrix=matrix;
 
		this.name=name;
 
		this.rep=rep;
 
		this.style=style;
 
		this.passable=passable;
 
	}
 
 
 
	var terrain=new Array();
 
	terrain.push(new TerrainType(0,"VOID","x","void",[1],false));
 
	terrain.push(new TerrainType(1,"PLAINS","&#38;#8801;","plains",[1,1,1,1,1,1,1,2,2,2,5,6,6,8,8],true));
 
	terrain.push(new TerrainType(2,"HILLS","~","hills",[2,2,2,1,1,5,4,3,3,3,3,7],true));
 
	terrain.push(new TerrainType(3,"MOUNTAIN","^","mountain",[2,2,3,3,3,3,11],true));
 
	terrain.push(new TerrainType(4,"FOREST","&#38;#8225;","forest",[2,5,5,5,4,4,4,4],true));
 
	terrain.push(new TerrainType(5,"BRUSH","&#38;#8224;","brush",[5,4,2,1],true));
 
	terrain.push(new TerrainType(6,"SWAMP","&#38;#926;","swamp",[10,6,6,6,1,1],true));
 
	terrain.push(new TerrainType(7,"DESERT","&#38;#8776;","desert",[2,3,7,7,7,7,7],true));
 
	terrain.push(new TerrainType(8,"SHORE",",","shore",[1,6,8,9,9],true));
 
	terrain.push(new TerrainType(9,"OCEAN","~","ocean",[8,9,9,9,12],false));
 
	terrain.push(new TerrainType(10,"LAKE","-","lake",[8,6,10,10],false));
 
	terrain.push(new TerrainType(11,"PEAK","^","peaks",[11,3,3,3],false));
 
	terrain.push(new TerrainType(12,"Octopus Spawning Grounds","@","abyss",[9],false));
 
	terrain.push(new TerrainType(13,"SETTLEMENT","&#38;#923;","settlement",[1],true));
 
 
 
	function Tile(){
 
		this.genCheck=false;
 
		this.genIndex=500000;
 
		this.terrain=0;
 
	}
 
	var map=new Array();
 
	var mapW=20;
 
	var mapH=20;
 
	for (hc=0;hc<mapH;hc++){
 
		for (wc=0;wc<mapW;wc++){
 
			map.push(new Tile());
 
		}
 
	}
 
	var mapComplete=false;
 
	var ic=0;
 
	var icMax=50000; //Just making sure the loop finishes at some point
 
	var center=mapW*mapH/2+mapW/2;
 
 
 
	map[center].genIndex=0;
 
	map[center].terrain=13;
 
	/*
 
	var seed2=Math.floor(Math.random(map.length));
 
	map[seed2].terrain=1;
 
	map[seed2].genIndex=0;
 
 
 
	var seed3=Math.floor(Math.random(map.length));
 
	map[seed3].terrain=9;
 
	map[seed3].genIndex=0;
 
	*/
 
	var nextTile=-1;
 
 
 
	while(!mapComplete && ic<icMax){
 
		ic++;
 
		if (nextTile!=-1){
 
			w=nextTile%mapW;
 
			h=Math.floor(nextTile/mapW);
 
			var c=1;
 
			var ter=map[nextTile].terrain;
 
			//north
 
				northRef=(mapW)*(h-1)+w;
 
				if (h<=0){northRef=(mapW)*(mapH-1)+w;}
 
				SetMap(northRef,c,ter);
 
				c=Math.floor(Math.random()*terrainOrderStrength);
 
			//east
 
				eastRef=(mapW)*h+w+1;
 
				if (!(w<mapW-1)){eastRef=(mapW)*h;}
 
				SetMap(eastRef,c,ter);
 
				c=Math.floor(Math.random()*terrainOrderStrength);
 
			//south
 
				southRef=(mapW)*(h+1)+w;
 
				if (!(h<mapH-1)){southRef=w;}
 
				SetMap(southRef,c,ter);
 
				c=Math.floor(Math.random()*terrainOrderStrength);
 
			//west
 
				westRef=(mapW)*h+w-1;
 
				if (!(w>0)){westRef=(mapW)*h+mapW-1;}
 
				SetMap(westRef,c,ter);
 
				c=Math.floor(Math.random()*terrainOrderStrength);
 
			map[nextTile].genCheck=true;
 
			nextTile=-1;
 
		}
 
		nextTile=GetNextTile();
 
		if (nextTile==-1){
 
			if (nextTile==-1){mapComplete=true;}
 
		}
 
 
 
	}
 
 
 
	function SetMap(ref,gI,ter){
 
		if (ref<map.length){
 
			//if (!map[ref].genCheck && map[ref].terrain==0){
 
			if (!map[ref].genCheck && (map[ref].terrain==0)){
 
				map[ref].terrain=GenTerrain(ter);
 
				map[ref].genIndex=map[nextTile].genIndex+gI;
 
			}
 
		}
 
		else {document.write('out of bounds');}
 
	}
 
 
 
	function GenTerrain(from){
 
		var to=1;
 
		t=terrain[from];
 
		s=t.matrix.length;
 
		to=t.matrix[Math.floor(Math.random()*s)];
 
		return to;
 
 
 
	}
 
 
 
	function DrawMap(){
 
		for (hc=-winSize;hc<=winSize;hc++){
 
			//document.write('<br>');
 
			for (wc=-winSize;wc<=winSize;wc++){
 
				var c=(mapW)*(hc+cY)+wc+cX;
 
				if (hc==0 && wc==0){
 
					StatusMessage(terrain[map[c].terrain].name);
 
				}
 
				else if ((wc+cX)>0 && (wc+cX)<mapW && (hc+cY)>0 && (hc+cY)<mapH){
 
					var l=document.getElementById(wc+'by'+hc);
 
					l.className=terrain[map[c].terrain].style;
 
					l.innerHTML=terrain[map[c].terrain].rep;
 
				}
 
				else {
 
					var l=document.getElementById(wc+'by'+hc);
 
					l.className="mapEdge";
 
 
 
				}
 
			}
 
		}
 
		//var c=(mapW)*(cY)+cX;
 
		//StatusMessage(terrain[map[c].terrain].name);
 
	}
 
 
 
	function StatusMessage(text){
 
		var s=document.getElementById("status");
 
		s.innerHTML=text;
 
	}
 
 
 
	function SetDrawMap(){
 
		for (hc=-winSize;hc<=winSize;hc++){
 
			document.write('<br>');
 
			for (wc=-winSize;wc<=winSize;wc++){
 
					document.write('<span id="'+wc+'by'+hc+'" class="player">&#38;#8734;</span>');
 
			}
 
		}
 
		document.write('<br><span id="status"></span>');
 
 
 
	}
 
 
 
	function GetNextTile(){
 
		var nt=-1;
 
		var nv=100000;
 
		for (cc=0;cc<map.length;cc++){
 
			if (map[cc].genIndex<nv && (!map[cc].genCheck || map[cc].terrain==0)){
 
				nt=cc;nv=map[cc].genIndex;
 
			}
 
		}
 
		return nt;
 
	}
 
 
 
	var cX=Math.floor(mapW/2);
 
	var cY=Math.floor(mapH/2);
 
	var nX=0;
 
	var nY=0;
 
	var winSize=3;
 
	var cycleDelay=500;
 
	SetDrawMap();
 
	DrawMap();
 
	gameReady=true;
 
 
 
	function KeyCheck(){
 
		if (gameReady){
 
			var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
			if (KeyID==38){nY=cY-1;nX=cX;DoMove();}
 
			else if (KeyID==40){nY=cY+1;nX=cX;DoMove();}
 
			else if (KeyID==37){nX=cX-1;nY=cY;DoMove();}
 
			else if (KeyID==39){nX=cX+1;nY=cY;DoMove();}
 
			else if (KeyID==66){Build();}//'b'
 
		}
 
	}
 
 
 
	function Build(){
 
		var cc=(mapW)*(cY)+cX;
 
		if (map[cc].terrain!=13){
 
			map[cc].terrain=13;
 
			DrawMap();
 
		}
 
	}
 
 
 
	function DoMove(){
 
		var okay=true;
 
		if (nX<=1){nX=1;}
 
		else if (nX>=mapW){nX=mapW-1;}
 
		if (nY<=1){nY=1;}
 
		else if (nY>=mapH){nY=mapH-1;}
 
		if (nX==cX && nY==cY){okay=false;}
 
		else{
 
			var nc=(mapW)*(nY)+nX;
 
			var cc=(mapW)*(cY)+cX;
 
			if (nc<0 || nc>=map.length){StatusMessage("OUT OF BOUNDS ERROR");}
 
			else if (!terrain[map[nc].terrain].passable){
 
				okay=false;
 
				StatusMessage("BLOCKED BY "+terrain[map[nc].terrain].name);
 
			}
 
		}
 
		if (okay){cX=nX;cY=nY;DrawMap();}
 
	}
 
 
 
	document.onkeyup = KeyCheck; 
 
 
 
 
 
	//var t=setTimeout("cycle()",cycleDelay);	
 
 
 
</script>
 
</center>
 
</div>
 
</body>
 
</html>

Lo unico que hace es general un mapa de 7x7 bloques, yo necesito mas, y aparte, si voy a crear por ejemplo uno de 500x142, va air un poco lag el juego ya que tendra que cargar 71000 divs.

Necesito editarlo, para que parezca realistico el terreno. Ayuda.... :silbar:

Ya si os dejo algo mas concreto, no? :laugh:

Un saludo. :-*


	En línea

---

UTA - Portando GTA San Andreas a Unity3D.

⏩ Interesados hablad por Discord.

Anvil

Desconectado

Mensajes: 38

Re: [javascript] Crear un mapa alaeatorio (es para un juego)

« Respuesta #5 en: 30 Junio 2012, 20:46 pm »

Minecraft utiliza una tecnología que se llama vóxeles, https://es.wikipedia.org/wiki/V%C3%B3xel mientras que en Terraria al ser 2D bien puedes seguir utilizando pixeles. ¿Tu videojuego es en 2D o en 3D?. Generar un terreno procedural tiene muchas especies de reglas, yo te recomiendo que vayas por lo más fácil, es decir hacer que primero tu terreno sea una isla, si ya puedes hacer que tu terreno sea una isla entonces prueba extender tu algoritmo de generación de islas para que puedas crear archipielagos en esta isla.


	En línea

\\::_--__!!ss"1122

z3nth10n

Desconectado

Mensajes: 1.583

"Jack of all trades, master of none." - Zenthion

Re: [javascript] Crear un mapa alaeatorio (es para un juego)

« Respuesta #6 en: 2 Julio 2012, 13:30 pm »

Es un juego en 2D, y desde hace ya encontre un juego que se adecua a lo que yo estoy haciendo... Os dejo el quote de lo que escribí en forosdelweb.com:

Cita de: Seazoux;4223172

Bueno, ya he encontrado la solucion a mis dudas... He encontrado un juego de los 80, bastante parecido al mio. Solo que tengo una duda... El juego se llama: Chukie Egg, la verdad que es simple, pero es facil porque explica todo en comentarios.

Bueno, esa duda la he resuelto, porque este juego funciona a partir de arrays que crean el mapa...

Vale mi problema es el siguiente:

El juego utiliza dimensiones de 8x8 y yo las necesito de 16x16. Trasteando trasteando, encontre el motor del juego por así decirlo.. Y bueno, lo que me encontre fueron las texturas que utiliza y cosas de como se genera el mapa.

Ahora tengo ese codigo:

http://pastebin.com/ULhxPScw

El problema esta en los de negrita, ese 4, originalmente era un 3.
Este 3 me hacia que algunas imagenes (los grains, y egg), me los ponia metidos bajo el bloque de dirt. Si lo pongo a 4, se pone bien, pero miren como se ve el mapa.

----------------------------

Este es el juego original (descarga): http://marklomas.net/ch-egg/downloads/dhtml_ch-egg_source_code.zip

Como veis mi super mario, tiene las coordenadas de 8x16, y no se ponerselas a 16x16...

Ahora diréis porque tengo, ese juego,:

Funcionan con arrays, que me sirven para guardar el juego con 0,1,2,3,4,5,6,7,8 segun la Id del bloque lo que hace que pese muchísimo menos. Ahora tengo que buscar un generador aleatorio de numeros, que siga un orden o algo...

Bueno, un saludo.


« Última modificación: 2 Julio 2012, 13:34 pm por Seazoux »	En línea

---

UTA - Portando GTA San Andreas a Unity3D.

⏩ Interesados hablad por Discord.

Anvil

Desconectado

Mensajes: 38

Re: [javascript] Crear un mapa alaeatorio (es para un juego)

« Respuesta #7 en: 2 Julio 2012, 18:09 pm »

Que bien, al parecer yo me lo estaba imaginando más complejo :huh:

jejeje espero que pronto nos enseñes lo que estás haciendo


	En línea

\\::_--__!!ss"1122

z3nth10n

Desconectado

Mensajes: 1.583

"Jack of all trades, master of none." - Zenthion

Re: [javascript] Crear un mapa alaeatorio (es para un juego)

« Respuesta #8 en: 2 Julio 2012, 18:45 pm »

Estoy empezando por lo mas basico, ya que estoy aprendiendo. :rolleyes:

Bueno, la verdad que es una jodida ***** bastante complicado, porque he podido arreglar ese error, pero ahora el personaje no se mueve y las aves azules van ~~a toda hostia, folladas vivas,~~ rapidísimo. Una screen:

No tengo ganas de hacer un vídeo, por lo que os dejo este link para que veais, opineis, y si quereis dar un fix. :silbar:

http://www.mediafire.com/?6abwhruwfy6zude

Ya puedes ver lo que hago, simplemente editar un juego, ya hecho. :laugh:


« Última modificación: 2 Julio 2012, 18:47 pm por Seazoux »	En línea

---

UTA - Portando GTA San Andreas a Unity3D.

⏩ Interesados hablad por Discord.

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	Sistema de coordenadas PHP para mapa estilo RPG Desarrollo Web	Littl3	1	3,634	11 Noviembre 2012, 17:13 pm por ‭lipman
	[javascript] Probabilidades de Captura en Juego Desarrollo Web	Brian1511	7	4,038	23 Julio 2015, 20:36 pm por Brian1511
	ayuda Para crear cuentas PTC para mapa de pokemon go Dudas Generales	LUNEMESIS	0	7,556	5 Mayo 2017, 10:22 am por LUNEMESIS
	Hacer juego con javascript Desarrollo Web	Robocop8	2	1,919	19 Agosto 2017, 00:56 am por ivancea96
	javascript - Juego de fosforos Desarrollo Web	TickTack	0	1,376	26 Febrero 2019, 21:33 pm por TickTack