Hola gusto en saludarlos.
No es un juego solo es una historia corta sin game play en donde contaré un poco sobre mí y los video juegos.
Más detalles:
El sistema en donde se presenta la historia fue creado con lo básico de Html, css y javascript. El código del index html es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Crear Video Juegos</title>
</head>
<body onload="funcionPaginaCargada();">
<!..Código html..>
<h2 id="titulo"></h2>
<img id="imagen" src="imagenes/imagen00.jpg">
<p id="texto"></p>
<!..Código Css..>
<style>
body{
background: black;
color: white;
text-align: center;
margin: 2vw;
}
h2, img, p{
width: 40vw;
max-width: 80vh;
margin: 0px auto;
padding: 5px;
}
p{
font-size: 21px;
}
@media (orientation: portrait) {
h2, img, p{
width: 90vw;
}}
</style>
<!..Código JavaScript..>
<script src="textos.js"></script>
<script>
var diapositivas = textos.diapositivas;
var diapositivaActual = 0;
var titulo = document.getElementById("titulo");
titulo.innerHTML="Cargando...";
var texto = document.getElementById("texto");
var imagen=document.getElementById("imagen");
imagen.addEventListener("click", function() {
funcionBoton();
});
//Precarga de imagenes
var img = [];
for(var i=0; i<=diapositivas; i+=1)
{
var numero = i;
var numeroString = numero+"";
if(numero<10){numeroString="0"+numeroString}
var urlString="imagenes/imagen"+numeroString+".jpg";
img[i] = new Image();
img[i].src = urlString;
}
//Página cargada
var paginaCargada = 0;
function funcionPaginaCargada(){
paginaCargada = 1;
titulo.innerHTML=textos.titulo;
texto.innerHTML=textos["texto00"];
}
function funcionBoton(){
if(paginaCargada==1)
{
diapositivaActual+=1;
if(diapositivaActual>diapositivas){diapositivaActual=0}
var numero = diapositivaActual;
var numeroString = numero+"";
if(numero<10){numeroString="0"+numeroString}
texto.innerHTML=textos["texto"+numeroString];
imagen.src=img[diapositivaActual].src;
}
}
</script>
</body>
</html>
Mi objetivo principal es comprender un poco sobre la presentación de contenido html5. Estas son algunas características del sistema:
1. Para facilitar la accesibilidad reduje el proyecto final a menos de 512Kb.
2. La mayoría de las imágenes tiene resolución de 128x128.
3. Puede ser modificado fácilmente para contar otra historia.
Editable html5:
https://drive.google.com/file/d/1FLFXs2xaRIuTEbTZlQcwCGgv9_OaTo79/view?usp=sharingPara modificar el contenido y contar tu propia historia deberás hacer lo siguiente:
1. Las imágenes que quieras mostrar deberán ser llamadas imagen00.jpg, imagen01.jpg. y se mostrarán una después de la otra en el orden correcto. Son imágenes JPG, por lo tanto no emplear PNG ni mucho menos BMP.
2. Para agregar los textos deberás modificar el archivo textos.js.
3. El archivo textos.js guarda un objeto javascript donde tendrás que modificar sus propiedades fácilmente para adaptarla a tu historia.
Las propiedades son las siguientes:
titulo: "Crear video juegos",
diapositivas: 30,
texto00: "Click en la imagen",
En título deberás colocar el título de tu juego.
En diapositivas deberás colocar la cantidad de imágenes de tu juego.
En texto00 colocar el texto que aparecerá debajo de la imagen.
Las imágenes y los textos van juntos por eso todos terminan en 00, 01, 02.
Recomendaciones:
Para acelerar la carga del sistema y evitar que los usuarios esperen mucho es recomendable emplear imágenes pequeñas y preferiblemente opacas las cuales no deben pesar más de 20Kb.
