jquery图像拼图

我想用jQuery制作拼图。我跟了这码jquery图像拼图

Create an image puzzle game using jQuery

<!DOCTYPE html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>AnupPuzzle</title> 
<script src="jquery-1.8.2.min.js"></script> 
<style> 
.main-container{background:#600; width:270px; height:270px; text-align:center;} 
button{width:80px; height:80px; background:#CCC; float:left; margin:5px; color:#600; font-size:18px; } 
button:hover{background:#9CF;} 
span{width:100%; color:#900; font-family:"Comic Sans MS", cursive;} 
</style> 
</head> 
<body> 
<h3>Are you want to try your brain logics...</h3> 
<div class="main-container">  
    <button alt="" name="1" value="1" id="1">5</button> 
    <button alt="" name="2" value="2" id="2">6</button> 
    <button alt="" name="3" value="3" id="3">8</button> 
    <button alt="" name="4" value="4" id="4">3</button> 
    <button alt="" name="5" value="5" id="5"></button> 
    <button alt="" name="6" value="6" id="6">7</button> 
    <button alt="" name="7" value="7" id="7">1</button> 
    <button alt="" name="8" value="8" id="8">2</button> 
    <button alt="" name="9" value="9" id="9">4</button> 
</div> 
<span>Anup</span> 
</body> 
</html> 
<script> 
$(document).ready(function(){ 
var upval, downval, leftval, rightval, txt, bVal; 
$("button").click(function(){ 
    txt = $(this).text(); 
    bVal = $(this).val(); 
    if(txt != ""){ 
     if((bVal != 1) && (bVal != 2) &&(bVal != 3)){ 
      upval = eval(eval(bVal)-eval(3));   
      var upTxt = $("#"+upval).text();    
      if(upTxt == ""){    
       $("#"+upval).text(txt); 
       $(this).text(""); 
      } 
     } 
     if((bVal != 7) && (bVal != 8) &&(bVal != 9)){ 
      downval = eval(eval(bVal)+ eval(3));    
      var downTxt = $("#"+downval).text(); 
      if(downTxt == ""){   
       $("#"+downval).text(txt); 
       $(this).text(""); 
      } 
     } 
     if((bVal != 1) && (bVal != 4) &&(bVal != 7)){ 
      leftval = eval(eval(bVal)-eval(1));   
      var leftTxt = $("#"+leftval).text(); 
      if(leftTxt == ""){   
       $("#"+leftval).text(txt); 
       $(this).text(""); 
      } 
     } 
     if((bVal != 3) && (bVal != 6) &&(bVal != 9)){ 
      rightval = eval(eval(bVal)+ eval(1));   
      var rightTxt = $("#"+rightval).text();   
      if(rightTxt == ""){     
       $("#"+rightval).text(txt); 
       $(this).text(""); 
      } 
     } 
     var one = $("#1").text(); 
     var two = $("#2").text(); 
     var three = $("#3").text(); 
     var four = $("#4").text(); 
     var five = $("#5").text(); 
     var six = $("#6").text(); 
     var seven = $("#7").text(); 
     var eight = $("#8").text(); 
     var nine = $("#9").text(); 

     if((one == "1")&&(two == "2")&&(three == "3")&&(four == "4")&&(five == "5")&&(six == "6")&&(seven == "7")&&(eight == "8")&&(nine == "")){   
      alert("Congratulations You Won The Game..."); 
      $("button").attr("disabled", "disabled"); 
     }    
    } 
}); 

}); 


</script>

我试图让这个而不是移动号码的，按钮的背景图片做如果有人能帮找到一个解决方案，这将是不胜感激

https://jsfiddle.net/24jjwdxj/

这是我所含有S o far

但是在这个小提琴中，我使用背景颜色来演示我的所需的结果。

来源

2016-06-07 seus

解决方案按照给定的方式工作。 Here it is in a JSFiddle，我已经分开了外部jQuery资源，HTML，CSS和JS。下面是JavaScript部分：

(function() { 
    var upval, downval, leftval, rightval, txt, bVal; 
    $("button").click(function() { 
    txt = $(this).text(); 
    bVal = $(this).val(); 
    if (txt != "") { 
     if ((bVal != 1) && (bVal != 2) && (bVal != 3)) { 
     upval = eval(eval(bVal) - eval(3)); 
     var upTxt = $("#" + upval).text(); 
     if (upTxt == "") { 
      $("#" + upval).text(txt); 
      $(this).text(""); 
     } 
     } 
     if ((bVal != 7) && (bVal != 8) && (bVal != 9)) { 
     downval = eval(eval(bVal) + eval(3)); 
     var downTxt = $("#" + downval).text(); 
     if (downTxt == "") { 
      $("#" + downval).text(txt); 
      $(this).text(""); 
     } 
     } 
     if ((bVal != 1) && (bVal != 4) && (bVal != 7)) { 
     leftval = eval(eval(bVal) - eval(1)); 
     var leftTxt = $("#" + leftval).text(); 
     if (leftTxt == "") { 
      $("#" + leftval).text(txt); 
      $(this).text(""); 
     } 
     } 
     if ((bVal != 3) && (bVal != 6) && (bVal != 9)) { 
     rightval = eval(eval(bVal) + eval(1)); 
     var rightTxt = $("#" + rightval).text(); 
     if (rightTxt == "") { 
      $("#" + rightval).text(txt); 
      $(this).text(""); 
     } 
     } 
     var one = $("#1").text(); 
     var two = $("#2").text(); 
     var three = $("#3").text(); 
     var four = $("#4").text(); 
     var five = $("#5").text(); 
     var six = $("#6").text(); 
     var seven = $("#7").text(); 
     var eight = $("#8").text(); 
     var nine = $("#9").text(); 

     if ((one == "1") && (two == "2") && (three == "3") && (four == "4") && (five == "5") && (six == "6") && (seven == "7") && (eight == "8") && (nine == "")) { 
     alert("Congratulations You Won The Game..."); 
     $("button").attr("disabled", "disabled"); 
     } 
    } 
    }) 
})();

来源

2016-06-07 03:58:08 Adriano

嗨，如果你读了代码和我的问题。我试图改变它，以便我可以设置每个瓷砖的背景图像。并使背景图像移动不是值/号码 – seus

https://jsfiddle.net/24jjwdxj/这是我迄今为止 – seus

jquery图像拼图

回答

相关问题