|
App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Curso de App inventor 2 en español - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
___________________________
169G.- Rompecabezas. Puzzle.
 p169G_rompecabezas.aia
- A este juego antes se le llamaba "Rompecabezas" ahora muchos lo llaman "Puzzle".
- Se trata de construir un rompecabezas.
- Pero en esta ocasión, nuestra aplicación tiene truco... la mayor parte del código estará en una página web HTML5.
____________________________________________________________________
- Vamos a empezar a ver el código de App inventor, muy simple.
_________________
- Diseño.
- Un VisorWeb que ocupe la pantalla a tamaño completo.
- Subimos los archivos puzzle.htm y callejon_arco.jpg
_________________
- Bloques.
- Cuando arranca la pantalla de inicio, se carga la página puzzle.htm que realiza todo el código del rompecabezas.
- Cambia la dirección url por http://localhost/puzzle.htm
- Fíjate que he puesto 3 posibilidades la primera es para hacer las pruebas con App Inventor, la segunda si vamos a Generar la aplicación para instalarla y la tercera, la página se encontrará en un servidor web.
______________________________
- Página web HTML5. Puzzle.htm.
- Se trata de modificar una página web HTML5 que realiza el puzzle.
- Esta es la página, pulsa sobre ella y te saldrá el puzzle que vamos a realizar en la aplicación:
http://kio4.com/appinventor/puzzle.htm
- Cada vez que pulses las piezas estarán en una nueva posición.
- Para cambiar la pieza pulsa en su posición y luego en la nueva posición. - Esta es la página, que debemos modificar.
- El código es una modificación de...
http://rhuno.com/flashblog/2012/08/01/tutorial-puzzle-game-basics-with-html5-and-javascript/
- La imagen es una foto del Callejón del Arco.
- Es muy importante el tamaño de la imagen.
- En mi caso mide 300 x 400
- El código la troceará en 3 columnas y 4 filas, por eso las dimensiones son 300 x 400. |
300x400 |
puzzle.htm |
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Puzzle</title>
<script type="text/javascript">
/* Modificaciones por Juan A. Villalpando */
/* KIO4.COM */
window.onload = onReady;
var can;
var ctx;
var img;
var blockSize = 100; /* Divide el ancho de la imagen entre las columnas: 300 / 3 = 100 */
var clickX;
var clickY;
var selected1;
var selected2;
var piecesArray = new Array();
var correctOrder = new Array();
function onReady()
{
can = document.getElementById('myCanvas');
if(navigator.userAgent.toLowerCase().indexOf('firefox') >= 0 || !can.getContext)
{
can.style.display = 'none';
document.getElementById('sorry').style.display = 'inline';
document.getElementById('support').innerHTML = "Tu navegador no admite este código.";
}
/**/
ctx = can.getContext('2d');
img = new Image();
img.onload = onImage1Load;
img.src = "callejon_arco.jpg"; /* Pongo la imagen, en mi caso está en la carpeta imagenes */
}
function onImage1Load()
{
var r;
for(var i = 0; i < 3; i++) /* Voy a poner 3 columnas */
{
for(var j = 0; j < 4; j++) /* Voy a poner 4 filas */
{
r = new Rectangle(i * blockSize, j * blockSize, i*blockSize + blockSize, j * blockSize + blockSize);
piecesArray.push(r);
correctOrder.push(r);
}
}
scrambleArray(piecesArray, 30);
drawImage();
}
function onCanvasClick(evt)
{
clickX = evt.offsetX;
clickY = evt.offsetY;
var drawX = Math.floor(clickX / blockSize);
var drawY = Math.floor(clickY / blockSize);
var index = drawX * 4 + drawY; /* 4 filas */
var targetRect = piecesArray[index];
var drawHighlight = true;
drawX *= blockSize;
drawY *= blockSize;
ctx.clearRect(0, 0, 300, 400); /* Dimensiones de la imagen 300x400 */
if(selected1 != undefined && selected2 != undefined)
{
selected1 = selected2 = undefined;
}
if(selected1 == undefined)
{
selected1 = targetRect;
}
else
{
selected2 = targetRect;
swapRects(selected1, selected2);
drawHighlight = false;
}
drawImage();
if(drawHighlight)
highlightRect(drawX, drawY);
}
function highlightRect(drawX, drawY)
{
console.log(drawX, drawY);
ctx.beginPath();
ctx.moveTo(drawX, drawY);
ctx.lineTo(drawX + blockSize, drawY);
ctx.lineTo(drawX + blockSize, drawY + blockSize);
ctx.lineTo(drawX, drawY + blockSize);
ctx.lineTo(drawX, drawY);
ctx.lineWidth = 2;
// set line color
ctx.strokeStyle = "#ff0000";
ctx.stroke();
}
function swapRects(r1, r2)
{
var index1;
var index2;
var temp = r1;
index1 = piecesArray.indexOf(r1);
index2 = piecesArray.indexOf(r2);
piecesArray[index1] = r2;
piecesArray[index2] = temp;
checkWinner();
}
function checkWinner()
{
var match = true;
for(var i = 0; i < piecesArray.length; i++)
{
if(piecesArray[i] != correctOrder[i])
{
match = false;
}
}
if(match)
{
console.log('completado');
}
else
{
console.log('no completado');
}
}
function drawImage()
{
for(var k = 0; k < 3; k++) /* Voy a poner 3 columnas */
{
for(var l = 0; l < 4; l++) /* Voy a poner 4 filas */
{
r = piecesArray[k*4+l]; /* 4 filas */
ctx.drawImage(img, r.left, r.top, r.width, r.height, k*blockSize, l*blockSize, blockSize, blockSize);
}
}
}
function scrambleArray(ar, times)
{
var count = 0;
var temp;
var index1;
var index2;
while(count < times)
{
index1 = Math.floor(Math.random()*piecesArray.length);
index2 = Math.floor(Math.random()*piecesArray.length);
temp = piecesArray[index1];
piecesArray[index1] = piecesArray[index2];
piecesArray[index2] = temp;
count++;
}
}
function Rectangle(left, top, right, bottom)
{
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
this.width = right - left;
this.height = bottom - top;
}
function isCanvasSupported()
{
var elem = document.createElement('canvas');
return (elem.getContext && elem.getContext('2d'));
}
</script>
<head>
<body style="background-color:#fbfbfb;">
<!-- Dimensiones width: 300 px y hight: 400px -->
<div style="margin:0 auto; width:300px; text-align:center;">
<p id="support" style="color:#bb0000;"></p>
</div>
<div style="margin-left:auto; margin-right:auto; width:300px; height:400px; border: 4px solid #cc6699;">
<img id="sorry" src="sorry.jpg" style="display:none;"/>
<canvas id="myCanvas" width="300" height="400" onclick="onCanvasClick(event);">
</canvas>
</div>
<body>
</html>
|
- También he puesto esa página en mi servidor web:
http://kio4.com/appinventor/puzzle.htm
_____________________________________
2.- Indica cuando se ha completado.
- Vamos a modificar un poco el código para que cuando se complete el puzzle salga en la barra de Título de la pantalla la palabra "COMPLETADO"
- Añadimos el bloque VisorWeb1.WebViewStringChange como indica la siguiente imagen:
- Cambia la dirección url por http://localhost/puzzle.htm
- Cambiamos estas líneas del código del archivo puzzle.htm
if(match)
{
console.log('completado');
window.AppInventor.setWebViewString("" + "COMPLETADO"); // Respuesta a CadenaDeWebView
}
else
{
console.log('no completado');
window.AppInventor.setWebViewString("" + "No"); // Respuesta a CadenaDeWebView
}
}
_____________________________________
3.- Otro código.
p169G2_rompecabezas.aia
- Código:
https://www.emanueleferonato.com/2018/03/13/build-a-html5-jigsaw-puzzle-game-with-zim-framework/
- Solo he cambiado esta línea:
frame.loadAssets([ "brave.jpg" ], "assets/" );
por
frame.loadAssets(["brave.jpg"], "");
__________________________________
|
