elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  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] Ir Abajo Respuesta Imprimir
Autor Tema: [javascript] Crear un mapa alaeatorio (es para un juego)  (Leído 5,442 veces)
z3nth10n


Desconectado Desconectado

Mensajes: 1.584


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


Ver Perfil WWW
[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


Interesados hablad por Discord.
z3nth10n


Desconectado Desconectado

Mensajes: 1.584


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


Ver Perfil WWW
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


Interesados hablad por Discord.
z3nth10n


Desconectado Desconectado

Mensajes: 1.584


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


Ver Perfil WWW
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


Interesados hablad por Discord.
z3nth10n


Desconectado Desconectado

Mensajes: 1.584


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


Ver Perfil WWW
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


Interesados hablad por Discord.
z3nth10n


Desconectado Desconectado

Mensajes: 1.584


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


Ver Perfil WWW
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
  1.  
  2. <head><title>MAPPER</title></head>
  3.  
  4.  
  5. <style type="text/css">
  6.  
  7. .void {background-color:black;}
  8.  
  9. .plains {background-color:#ccee88;}
  10.  
  11. .hills {background-color:#85bb85;}
  12.  
  13. .mountain {background-color:#aaaaaa;}
  14.  
  15. .peaks {background-color:#eeffff;}
  16.  
  17. .forest {background-color:22ff50;}
  18.  
  19. .brush {background-color:#99ee50;}
  20.  
  21. .swamp {background-color:#448810;}
  22.  
  23. .desert {background-color:#ffff22;}
  24.  
  25. .shore {background-color:#999955;}
  26.  
  27. .ocean  {background-color:#0088ff;}
  28.  
  29. .lake  {background-color:#0055ff;}
  30.  
  31. .abyss  {background-color:#0066bb;}
  32.  
  33. .settlement {background-color:#001000;color:#aa5515;}
  34.  
  35. .player {background-color:#000000;color:#ffff00;}
  36.  
  37. .mapEdge {background-color:#000000;color:#000000;}
  38.  
  39.  
  40. <div style="font-family:Monospace,Courier,New;font-size:18pt;">
  41.  
  42.  
  43. <script language=javascript>
  44.  
  45. var nTerrainTypes=10;
  46.  
  47. var terrainOrderStrength=4;
  48.  
  49. var gameReady=false;
  50.  
  51. function TerrainType(index,name,rep,style,matrix,passable){
  52.  
  53. this.index=index;
  54.  
  55. this.matrix=matrix;
  56.  
  57. this.name=name;
  58.  
  59. this.rep=rep;
  60.  
  61. this.style=style;
  62.  
  63. this.passable=passable;
  64.  
  65. }
  66.  
  67.  
  68.  
  69. var terrain=new Array();
  70.  
  71. terrain.push(new TerrainType(0,"VOID","x","void",[1],false));
  72.  
  73. 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));
  74.  
  75. terrain.push(new TerrainType(2,"HILLS","~","hills",[2,2,2,1,1,5,4,3,3,3,3,7],true));
  76.  
  77. terrain.push(new TerrainType(3,"MOUNTAIN","^","mountain",[2,2,3,3,3,3,11],true));
  78.  
  79. terrain.push(new TerrainType(4,"FOREST","&#38;#8225;","forest",[2,5,5,5,4,4,4,4],true));
  80.  
  81. terrain.push(new TerrainType(5,"BRUSH","&#38;#8224;","brush",[5,4,2,1],true));
  82.  
  83. terrain.push(new TerrainType(6,"SWAMP","&#38;#926;","swamp",[10,6,6,6,1,1],true));
  84.  
  85. terrain.push(new TerrainType(7,"DESERT","&#38;#8776;","desert",[2,3,7,7,7,7,7],true));
  86.  
  87. terrain.push(new TerrainType(8,"SHORE",",","shore",[1,6,8,9,9],true));
  88.  
  89. terrain.push(new TerrainType(9,"OCEAN","~","ocean",[8,9,9,9,12],false));
  90.  
  91. terrain.push(new TerrainType(10,"LAKE","-","lake",[8,6,10,10],false));
  92.  
  93. terrain.push(new TerrainType(11,"PEAK","^","peaks",[11,3,3,3],false));
  94.  
  95. terrain.push(new TerrainType(12,"Octopus Spawning Grounds","@","abyss",[9],false));
  96.  
  97. terrain.push(new TerrainType(13,"SETTLEMENT","&#38;#923;","settlement",[1],true));
  98.  
  99.  
  100.  
  101. function Tile(){
  102.  
  103. this.genCheck=false;
  104.  
  105. this.genIndex=500000;
  106.  
  107. this.terrain=0;
  108.  
  109. }
  110.  
  111. var map=new Array();
  112.  
  113. var mapW=20;
  114.  
  115. var mapH=20;
  116.  
  117. for (hc=0;hc<mapH;hc++){
  118.  
  119. for (wc=0;wc<mapW;wc++){
  120.  
  121. map.push(new Tile());
  122.  
  123. }
  124.  
  125. }
  126.  
  127. var mapComplete=false;
  128.  
  129. var ic=0;
  130.  
  131. var icMax=50000; //Just making sure the loop finishes at some point
  132.  
  133. var center=mapW*mapH/2+mapW/2;
  134.  
  135.  
  136.  
  137. map[center].genIndex=0;
  138.  
  139. map[center].terrain=13;
  140.  
  141. /*
  142.  
  143. var seed2=Math.floor(Math.random(map.length));
  144.  
  145. map[seed2].terrain=1;
  146.  
  147. map[seed2].genIndex=0;
  148.  
  149.  
  150.  
  151. var seed3=Math.floor(Math.random(map.length));
  152.  
  153. map[seed3].terrain=9;
  154.  
  155. map[seed3].genIndex=0;
  156.  
  157. */
  158.  
  159. var nextTile=-1;
  160.  
  161.  
  162.  
  163. while(!mapComplete && ic<icMax){
  164.  
  165. ic++;
  166.  
  167. if (nextTile!=-1){
  168.  
  169. w=nextTile%mapW;
  170.  
  171. h=Math.floor(nextTile/mapW);
  172.  
  173. var c=1;
  174.  
  175. var ter=map[nextTile].terrain;
  176.  
  177. //north
  178.  
  179. northRef=(mapW)*(h-1)+w;
  180.  
  181. if (h<=0){northRef=(mapW)*(mapH-1)+w;}
  182.  
  183. SetMap(northRef,c,ter);
  184.  
  185. c=Math.floor(Math.random()*terrainOrderStrength);
  186.  
  187. //east
  188.  
  189. eastRef=(mapW)*h+w+1;
  190.  
  191. if (!(w<mapW-1)){eastRef=(mapW)*h;}
  192.  
  193. SetMap(eastRef,c,ter);
  194.  
  195. c=Math.floor(Math.random()*terrainOrderStrength);
  196.  
  197. //south
  198.  
  199. southRef=(mapW)*(h+1)+w;
  200.  
  201. if (!(h<mapH-1)){southRef=w;}
  202.  
  203. SetMap(southRef,c,ter);
  204.  
  205. c=Math.floor(Math.random()*terrainOrderStrength);
  206.  
  207. //west
  208.  
  209. westRef=(mapW)*h+w-1;
  210.  
  211. if (!(w>0)){westRef=(mapW)*h+mapW-1;}
  212.  
  213. SetMap(westRef,c,ter);
  214.  
  215. c=Math.floor(Math.random()*terrainOrderStrength);
  216.  
  217. map[nextTile].genCheck=true;
  218.  
  219. nextTile=-1;
  220.  
  221. }
  222.  
  223. nextTile=GetNextTile();
  224.  
  225. if (nextTile==-1){
  226.  
  227. if (nextTile==-1){mapComplete=true;}
  228.  
  229. }
  230.  
  231.  
  232.  
  233. }
  234.  
  235.  
  236.  
  237. function SetMap(ref,gI,ter){
  238.  
  239. if (ref<map.length){
  240.  
  241. //if (!map[ref].genCheck && map[ref].terrain==0){
  242.  
  243. if (!map[ref].genCheck && (map[ref].terrain==0)){
  244.  
  245. map[ref].terrain=GenTerrain(ter);
  246.  
  247. map[ref].genIndex=map[nextTile].genIndex+gI;
  248.  
  249. }
  250.  
  251. }
  252.  
  253. else {document.write('out of bounds');}
  254.  
  255. }
  256.  
  257.  
  258.  
  259. function GenTerrain(from){
  260.  
  261. var to=1;
  262.  
  263. t=terrain[from];
  264.  
  265. s=t.matrix.length;
  266.  
  267. to=t.matrix[Math.floor(Math.random()*s)];
  268.  
  269. return to;
  270.  
  271.  
  272.  
  273. }
  274.  
  275.  
  276.  
  277. function DrawMap(){
  278.  
  279. for (hc=-winSize;hc<=winSize;hc++){
  280.  
  281. //document.write('<br>');
  282.  
  283. for (wc=-winSize;wc<=winSize;wc++){
  284.  
  285. var c=(mapW)*(hc+cY)+wc+cX;
  286.  
  287. if (hc==0 && wc==0){
  288.  
  289. StatusMessage(terrain[map[c].terrain].name);
  290.  
  291. }
  292.  
  293. else if ((wc+cX)>0 && (wc+cX)<mapW && (hc+cY)>0 && (hc+cY)<mapH){
  294.  
  295. var l=document.getElementById(wc+'by'+hc);
  296.  
  297. l.className=terrain[map[c].terrain].style;
  298.  
  299. l.innerHTML=terrain[map[c].terrain].rep;
  300.  
  301. }
  302.  
  303. else {
  304.  
  305. var l=document.getElementById(wc+'by'+hc);
  306.  
  307. l.className="mapEdge";
  308.  
  309.  
  310.  
  311. }
  312.  
  313. }
  314.  
  315. }
  316.  
  317. //var c=(mapW)*(cY)+cX;
  318.  
  319. //StatusMessage(terrain[map[c].terrain].name);
  320.  
  321. }
  322.  
  323.  
  324.  
  325. function StatusMessage(text){
  326.  
  327. var s=document.getElementById("status");
  328.  
  329. s.innerHTML=text;
  330.  
  331. }
  332.  
  333.  
  334.  
  335. function SetDrawMap(){
  336.  
  337. for (hc=-winSize;hc<=winSize;hc++){
  338.  
  339. document.write('<br>');
  340.  
  341. for (wc=-winSize;wc<=winSize;wc++){
  342.  
  343. document.write('<span id="'+wc+'by'+hc+'" class="player">&#38;#8734;</span>');
  344.  
  345. }
  346.  
  347. }
  348.  
  349. document.write('<br><span id="status"></span>');
  350.  
  351.  
  352.  
  353. }
  354.  
  355.  
  356.  
  357. function GetNextTile(){
  358.  
  359. var nt=-1;
  360.  
  361. var nv=100000;
  362.  
  363. for (cc=0;cc<map.length;cc++){
  364.  
  365. if (map[cc].genIndex<nv && (!map[cc].genCheck || map[cc].terrain==0)){
  366.  
  367. nt=cc;nv=map[cc].genIndex;
  368.  
  369. }
  370.  
  371. }
  372.  
  373. return nt;
  374.  
  375. }
  376.  
  377.  
  378.  
  379. var cX=Math.floor(mapW/2);
  380.  
  381. var cY=Math.floor(mapH/2);
  382.  
  383. var nX=0;
  384.  
  385. var nY=0;
  386.  
  387. var winSize=3;
  388.  
  389. var cycleDelay=500;
  390.  
  391. SetDrawMap();
  392.  
  393. DrawMap();
  394.  
  395. gameReady=true;
  396.  
  397.  
  398.  
  399. function KeyCheck(){
  400.  
  401. if (gameReady){
  402.  
  403. var KeyID = (window.event) ? event.keyCode : e.keyCode;
  404.  
  405. if (KeyID==38){nY=cY-1;nX=cX;DoMove();}
  406.  
  407. else if (KeyID==40){nY=cY+1;nX=cX;DoMove();}
  408.  
  409. else if (KeyID==37){nX=cX-1;nY=cY;DoMove();}
  410.  
  411. else if (KeyID==39){nX=cX+1;nY=cY;DoMove();}
  412.  
  413. else if (KeyID==66){Build();}//'b'
  414.  
  415. }
  416.  
  417. }
  418.  
  419.  
  420.  
  421. function Build(){
  422.  
  423. var cc=(mapW)*(cY)+cX;
  424.  
  425. if (map[cc].terrain!=13){
  426.  
  427. map[cc].terrain=13;
  428.  
  429. DrawMap();
  430.  
  431. }
  432.  
  433. }
  434.  
  435.  
  436.  
  437. function DoMove(){
  438.  
  439. var okay=true;
  440.  
  441. if (nX<=1){nX=1;}
  442.  
  443. else if (nX>=mapW){nX=mapW-1;}
  444.  
  445. if (nY<=1){nY=1;}
  446.  
  447. else if (nY>=mapH){nY=mapH-1;}
  448.  
  449. if (nX==cX && nY==cY){okay=false;}
  450.  
  451. else{
  452.  
  453. var nc=(mapW)*(nY)+nX;
  454.  
  455. var cc=(mapW)*(cY)+cX;
  456.  
  457. if (nc<0 || nc>=map.length){StatusMessage("OUT OF BOUNDS ERROR");}
  458.  
  459. else if (!terrain[map[nc].terrain].passable){
  460.  
  461. okay=false;
  462.  
  463. StatusMessage("BLOCKED BY "+terrain[map[nc].terrain].name);
  464.  
  465. }
  466.  
  467. }
  468.  
  469. if (okay){cX=nX;cY=nY;DrawMap();}
  470.  
  471. }
  472.  
  473.  
  474.  
  475. document.onkeyup = KeyCheck;
  476.  
  477.  
  478.  
  479.  
  480.  
  481. //var t=setTimeout("cycle()",cycleDelay);
  482.  
  483.  
  484.  
  485.  
  486.  
  487. </div>
  488.  
  489. </body>
  490.  
  491. </html>
  492.  

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


Interesados hablad por Discord.
Anvil

Desconectado Desconectado

Mensajes: 38



Ver Perfil
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 Desconectado

Mensajes: 1.584


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


Ver Perfil WWW
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


Interesados hablad por Discord.
Anvil

Desconectado Desconectado

Mensajes: 38



Ver Perfil
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 Desconectado

Mensajes: 1.584


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


Ver Perfil WWW
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:  :laugh:

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


Interesados hablad por Discord.
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Sistema de coordenadas PHP para mapa estilo RPG
Desarrollo Web
Littl3 1 2,807 Último mensaje 11 Noviembre 2012, 17:13 pm
por ‭lipman
[javascript] Probabilidades de Captura en Juego
Desarrollo Web
Brian1511 7 3,057 Último mensaje 23 Julio 2015, 20:36 pm
por Brian1511
ayuda Para crear cuentas PTC para mapa de pokemon go
Dudas Generales
LUNEMESIS 0 6,750 Último mensaje 5 Mayo 2017, 10:22 am
por LUNEMESIS
Hacer juego con javascript
Desarrollo Web
Robocop8 2 1,160 Último mensaje 19 Agosto 2017, 00:56 am
por ivancea96
javascript - Juego de fosforos
Desarrollo Web
TickTack 0 715 Último mensaje 26 Febrero 2019, 21:33 pm
por TickTack
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines