Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Proiect Multimedia

    Încărcat de

    Cristina Apostu
    12K vizualizări4 pagini
    Cod sursa -lucru cu SVG

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    TXT, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Cod sursa -lucru cu SVG

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca TXT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    12K vizualizări4 pagini

    Proiect Multimedia

    Încărcat de

    Cristina Apostu
    Cod sursa -lucru cu SVG

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca TXT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 4

    <!

    DOCTYPE HTML>

    <html>

    <head>

    <title>HTML5 Puzzle Game</title>

    <script type="text/javascript">

    window.onload = onReady;

    var can;
    var ctx;
    var img;
    var clickX;
    var clickY;
    var selected1;
    var selected2;
    var blockSize = 160;
    var piecesArray = 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';
    return;
    }

    ctx = can.getContext('2d');
    img = new Image();
    img.onload = onImage1Load;
    img.src = "cat.jpg";
    }

    function onImage1Load()
    {
    var r;
    for(var i = 0; i < 4; i++)
    {
    for(var j = 0; j < 3; j++)
    {
    r = new Rectangle(i * blockSize, j * blockSize, i*blockSize +
    blockSize, j * blockSize + blockSize);
    piecesArray.push(r);
    }
    }

    scrambleArray(piecesArray, 30);
    drawImage();
    }
    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 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 drawImage()
    {
    var r;
    for(var i = 0; i < 4; i++)
    {
    for(var j = 0; j < 3; j++)
    {
    r = piecesArray[i*3+j];
    ctx.drawImage(img, r.left, r.top, r.width, r.height, i*blockSize,
    j*blockSize, blockSize, blockSize);
    }
    }
    }

    function highlightRect(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;
    }

    function onCanvasClick(evt)
    {
    clickX = evt.offsetX;
    clickY = evt.offsetY;

    var drawX = Math.floor(clickX / blockSize);


    var drawY = Math.floor(clickY / blockSize);
    var index = drawX * 3 + drawY;
    var targetRect = piecesArray[index];
    var drawHighlight = true;

    drawX *= blockSize;
    drawY *= blockSize;

    ctx.clearRect(0, 0, 640, 480);

    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);
    }

    </script>

    </head>

    <body style="background-color:#fbfbfb;" >

    <div style="margin:0 auto; width:640px; height:480px; border: 4px solid


    #cc6699;">

    <img id="sorry" src="sorry.jpg" style="display:none;"/>

    <canvas id="myCanvas" width="640" height="480"


    onclick="onCanvasClick(event);">
    </canvas>

    </div>

    </body>

    </html>

    S-ar putea să vă placă și