Question

我正在尝试使用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/

这是我到目前为止所拥有的

然而，在这个小提琴我使用背景颜色来证明我的期望的结果。

Answer 1

解决方案按照给定的方式工作。 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");
      }
    }
  })
})();

jquery图像拼图

1 个答案: