|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
T Búsqueda en este sitio:


.

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.

- 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

__________________________________

 

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información