albertochiwas/adivina-1.html

## adivina-1.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Juego Adivina (v4)</title>
<style>
    body {
        width:320px; font:bold large Helvetica;
        background-color: grey; color: yellow;
    }

    .bar {
            color:black;
            line-height: 44px;
            font-size: 20px;
            text-align: center;
            margin: 0;
            text-shadow:0 1px 0 white;
            background-color: #C9C9C9;
            background-image: -webkit-gradient(linear,left top,left bottom,from(#C9C9C9), to(#848484),color-stop(0.6,#a1a1a1));
            border-bottom: 1px solid #555;
        }
</style>

<script>
    // Variables Globales para Nodos DOM
 var cuenta, valor, oculto, fondo, display, imagen;
 var max_intento = 10; // Cte configuracion

function init() {
   cuenta = 1;
   oculto = Math.floor(Math.random()*1001);
   valor = document.getElementById("num");
   fondo = document.getElementById("fondo");
   display = document.getElementById("txt");
   imagen = document.getElementById("imagen");
   valor.focus();
   valor.value = ""; // RESET
}

function print(str) {
    nodo = document.createTextNode(str);
    display.replaceChild(nodo,display.firstChild);
}

function procesa( num ) {
    if ( cuenta <= max_intento )
    {
        if ( num < oculto ) {
            print(cuenta+') Anota núm. MAYOR ');
            fondo.style.backgroundColor="#004400";
            imagen.src="up.gif";
        }
        else if ( num > oculto ) {
            print(cuenta+') Anota núm. menor ');
            fondo.style.backgroundColor="#440000";
            imagen.src="down.gif";
        }
        else {
            print('GANASTE!!');
            fondo.style.backgroundColor="#000044";
            init(); // REINICIAR
        }
        cuenta++;
        valor.value = ""; // RESET
        valor.focus();
    }
    else {
        print (cuenta+') P E R D I S T E');
        alert('El Juego Inicia otra vez');
        init();
    }
}

</script>
</head>
<body id="fondo" onload="init();">
    <div class="bar">
            Adivina Número
    </div>
    <br/>
    <div id="txt">Adivina un número del 1 al 1000</div>
    <form>
         Número: <input id="num" type="number" maxlength="4" value="" />
        <br/>
        <input type="button" onclick="procesa(num.value);" value="Aceptar" />
    </form>
    <img id="imagen" src="adivina.jpg" />
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Juego Adivina (v4)</title>
	<style>
	body {
	width:320px; font:bold large Helvetica;
	background-color: grey; color: yellow;
	}

	.bar {
	color:black;
	line-height: 44px;
	font-size: 20px;
	text-align: center;
	margin: 0;
	text-shadow:0 1px 0 white;
	background-color: #C9C9C9;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#C9C9C9), to(#848484),color-stop(0.6,#a1a1a1));
	border-bottom: 1px solid #555;
	}
	</style>

	<script>
	// Variables Globales para Nodos DOM
	var cuenta, valor, oculto, fondo, display, imagen;
	var max_intento = 10; // Cte configuracion

	function init() {
	cuenta = 1;
	oculto = Math.floor(Math.random()*1001);
	valor = document.getElementById("num");
	fondo = document.getElementById("fondo");
	display = document.getElementById("txt");
	imagen = document.getElementById("imagen");
	valor.focus();
	valor.value = ""; // RESET
	}

	function print(str) {
	nodo = document.createTextNode(str);
	display.replaceChild(nodo,display.firstChild);
	}

	function procesa( num ) {
	if ( cuenta <= max_intento )
	{
	if ( num < oculto ) {
	print(cuenta+') Anota núm. MAYOR ');
	fondo.style.backgroundColor="#004400";
	imagen.src="up.gif";
	}
	else if ( num > oculto ) {
	print(cuenta+') Anota núm. menor ');
	fondo.style.backgroundColor="#440000";
	imagen.src="down.gif";
	}
	else {
	print('GANASTE!!');
	fondo.style.backgroundColor="#000044";
	init(); // REINICIAR
	}
	cuenta++;
	valor.value = ""; // RESET
	valor.focus();
	}
	else {
	print (cuenta+') P E R D I S T E');
	alert('El Juego Inicia otra vez');
	init();
	}
	}

	</script>
	</head>
	<body id="fondo" onload="init();">
	<div class="bar">
	Adivina Número
	</div>
	<br/>
	<div id="txt">Adivina un número del 1 al 1000</div>
	<form>
	Número: <input id="num" type="number" maxlength="4" value="" />
	<br/>
	<input type="button" onclick="procesa(num.value);" value="Aceptar" />
	</form>
	<img id="imagen" src="adivina.jpg" />
	</body>
	</html>