Historias

Publicado por dixon, Noviembre 22, 2021, 03:17:23 AM

Tema anterior - Siguiente tema

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

dixon

Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.

dixon

#1
Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.

dixon

#2
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=sharing

Para 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.
Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.

dixon

#3
Hola, ¡saludos camaradas!.

No es un juego por lo tanto no tiene game play, solo es un contenido muy corto sobre la carga de imágenes.



Más información:

El archivo index.html empleado contiene el siguiente código:
<!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>


El objetivo del proyecto es optimizar la presentación de contenidos. Esto pudiese ser aplicado a la hora de desarrollar juegos html5.
Aquí dejo el editable para que puedas modificarlo y crear tu propia historia.
https://drive.google.com/file/d/1TCYrV-_WbclsEdQqm7jyfEwQ7f7GB0JG/view?usp=sharing

Para publicarlo como página web solo tienes que subir la carpeta de tu proyecto a google drive y colocarlo dentro de una carpeta publica, luego tendrás que abrir la web drv.tw para obtener el enlace a tu proyecto web. Más información aquí: https://tecnolikeplus.com/tutoriales/como-obtener-alojamiento-gratis-para-tu-pagina-web-con-solo-5-clics-y-usando-google-drive/


Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.

Powered by EzPortal
SMF spam blocked by CleanTalk