Question

编辑包含整个代码我在[这里] [1]找到了这个很酷的图像拼图创建者，但我无法弄清楚如何调整它以便点击“新拼图按钮”它改变了图像以开始一个新的谜题？我的第一个想法是创建一个数组???不确定，对JS来说还是一个新手。任何帮助表示赞赏。

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

<html>  
  
<head>  
  
    <title>HTML5 Puzzle Game</title>  
  
    <script type="text/javascript">  
  
    </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>

Answer 1

1）从if条件块navigator.userAgent.toLowerCase().indexOf('firefox') >= 0中删除它，它被卡在了Firefox上。所以如果条件不需要写这个。

2）如你想要一个按钮“新建拼图按钮”来替换新图像

<button id="some id here">New Puzzle button</button>将这个放在画布下面的html中（或者你想要的任何地方）。
使用按钮的ID document.getElementById("some ID here").onclick = somefunction(){ onReady() };
正如您在上面看到的onReady()按钮onclick功能。
现在最后一件事使用图像数组，并在math.random之前for loop内使用onReady function或img.src，并指定imagearray[somenumber here]之类的值。

图像益智游戏

1 个答案: