For some time I has ben tryiing to write a game in javascript on the web. Nothing fancy, something that could be written in one hour of work, and perhaps be expansible.
I have failed in epic proportions, I probably suck at life because of that, but… oh well. At least pets love me. I am not totally a bad man.
I am going to document here the history of a failure.
Episode 1
So I was tryiing to make this game for some time, and I decided that would be a strategic game, with dwarfs in it, a strategy game where you control a expedition traveling down the ground, visiting lost civilizations, hiring weird races. A strategy game, part Dwarf Fortres, part Roguelike part Webgame.
Since I am a app programmer, my first attemp was overengineer. I am too lazy to publish all the files involved, so I can’t show a whole image of the failure.
Heres the html file
<!DOCTYPE html>
<html>
<head>
<title>Expedition1</title>
<link rel="stylesheet" href="css/main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="ayudas.js"></script>
<script src="gui.js"></script>
<script src="razas.js"></script>
<script src="mundo.js"></script>
<!-- pantallas -->
<script src="reclutar.js"></script>
<!-- arrancar -->
<script src="arranquefrio.js"></script>
<meta charset=utf-8 />
</head>
<body>
<div id="lore" class="bloque">
<p id="lore_arranca"></p>
</div>
<div id="hire" class="bloque">
<table>
<thead>
<!-- <tr><td>Race</td><td>Name</td><td>Price</td><td>[hire button]</td></tr> -->
</thead>
<tbody id="listaSeresContratar">
<!-- cosas aqui -->
<tbody>
</table>
<input type=button id=reroll value=Reroll><br>
Party size: <input type=text id=partysize>
</div>
<div id="fase1" class="bloque">
</div>
</body>
</html>
Heres one of the library files
var mundo = (function() {
var fase_interface = "arranca";
function CargarLore(texto){//esta funcion es una mierda, es demasiado especializada
$.get('textos/'+texto+'.htm', function(data) {
$("#lore_"+texto).html(data);
var avanzaboton = gui.botonContinua("contratarMiembros",function(){ return true;});
$("#lore_"+texto).append(avanzaboton);
});
}
function empieza_contratarMiembros(){
$("#lore").hide();
$("#hire").show();
reclutar.generarPantalla();
}
return {
arranca:function(){
//ocultamos todos los elementos de interface, se mostraran cuando sea lo adecuado
$(".bloque").hide();
CargarLore("arranca");//cargamos este texto en lore
//CargarLore("test");//cargamos este texto en lore
$("#lore").show();
},
empiezaFase:function(fase){
switch(fase){
case "contratarMiembros":
empieza_contratarMiembros();
break;
case "fase1":
empieza_fase1();
break;
default:
alert("ERROR: fase "+fase+" no implementada");
break;
}
}
};
})();
This one failed, and I don’t learned much from it. Other that code can get quickly complex if it start complex from that start.
Episode 2
Sudently, I decided the game would be even cooler in a Victorian Era world, with a rich underground world. With all the nice characters from the victorian era and nearby.
I made the code more compact, the right thing…
var juego = (function(){
return {
rolemaster:function(){}
};
})();
juego.toggleBoton = (function(juego){
return {
start:function(boton,texto){
$(boton).val(texto);
juego.toggleBoton.set(boton,0);//empieza apagado
},
set:function(boton,encendido){
$(boton).attr("data-onoff",encendido);
if(encendido==1) {
$(boton).removeClass("botonApagado")
.addClass("botonEncendido");
} else {
$(boton).removeClass("botonEncendido")
.addClass("botonApagado");
}
},
click:function(boton){
//console.log("boton:click!");
var estado = $(boton).attr("data-onoff");
var nuevoEstado = (estado==1)?0:1;
//console.log("old:"+estado+",nuevo:"+nuevoEstado);
juego.toggleBoton.set(boton,nuevoEstado);
},
boton:function(boton,text){
juego.toggleBoton.start(boton,text);
$(boton).click(function(){
juego.toggleBoton.click(boton);
});
}
};
})(juego);
juego.rolemaster = (function(juego){
return {
contratar:function(boton){
var nombre = $(boton).attr("data-nombre");
console.log("Contratando:"+nombre);
},
turno:function(){
alert("se juega turno");
},
};
})(juego);
$(function(){
console.log("Creando enlaces");
/* Enlaces, eventos */
$(".siguientefase").click(function(){
console.log("boton:siguientefase");
juego.rolemaster.turno();
});
$("input.contratar").each(function(){
juego.toggleBoton.boton(this,"Hire");
});
});
/*
- Captain Nemo - Inventive - Freedom defender - Outlaw
- Sherlock Holmes - Deductive - Resourcefull - Drug Addict
- Otto Lidenbrock - Academic - Lucky - Curious
- Mark Twain - Pragmatical - Industrious - Unlucky
- Doctor Henry Jekyll - Inventive - Pragmatical - Bipolar
- Alice - Curious - Lucky - Logical
- Geppetto - Puppetmaster - Woodcutter - Unlucky
- Dorian Gray - Inmortal - Cursed - Evil
- Thomas Edison - Industrious - Evil - Lucky
- Nikola Tesla - Technician - Unlucky - Experimental
- Caliban - Unlucky - Inspired - Beastly
*/
Too bad, I failed for the classical trap of newbie game programmers: never start a game writting the menu. If the first thing you write is the menu, is said that will probably be the last and only thing.
Here was true.
The code that was created was no too bad, but did nothing, other than ugly interfaces. The code was doing stuff, and not being very complex, and have some room to wrong. So is not too bad a attemp.
…[CONTINUE]…