使用jQuery創建圖像益智遊戲

我正在嘗試使用jquery創建圖像益智遊戲。使用此代碼使用jQuery創建圖像益智遊戲

var img_one=$("img[src$='one.jpg'][name='a']"); 

var atrval_one=img_one.attr("src"); 
var img_two=$("img[src$='blank.jpg'][name='b']"); 

var atrval_two=img_two.attr("src"); 


$('#one').click(function() 
{ 
    if(atrval_two == "images/img/blank.jpg"){ 
     $("img", '#one').attr("src", atrval_nine); 
     $("img", '#two').attr("src", "images/img/one.jpg"); 
    } 
});

和HTML

<div id="one" class="1" style="background-repeat:no-repeat;position:absolute;"><img id="1" name="a" src="images/img/one.jpg" /></div> 
<div id="two" class="2" style="background-repeat:no-repeat; position:absolute;"><img id="2" name="b" src="images/img/blank.jpg" /></div>

它是一個示例代碼。我有9個div，這是一個3/3的安排。我的問題是當我點擊最近的空白圖像的div它只改變圖像，所以請幫我找到解決方案。請理解我的處境感謝

來源

2013-08-26 Arunraj S

你可以發佈更多的代碼請鏈接到jsfiddle.com的例子嗎？或者說明你使用這段代碼遇到了什麼問題？ – robrich

上面給出的代碼不涉及9個div。這裏只有2個div。如果您可以重新創建整個「情境」，那將是非常好的 –

@robrich問題是我無法更改div的屬性值。它只會改變背景圖像。所以我想改變圖像的屬性值，當我點擊該div請幫助我... –

沒必要用你可以把它在一個簡單的jQuery或js的任何東西我只是向您發送這種類型的遊戲在我的答案檢查它並像那樣做。這是簡單的0-9益智遊戲讓你的圖像在數字的地方改變它與你的圖像作爲按鈕的背景圖像。 GUD陸先生

<!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>

它與CSS，JS和HTML全益智遊戲代碼。

來源

2013-10-18 11:13:20 Anup

謝謝你... –

你的歡迎.. gud運氣 – Anup

@Anup這是否意味着你申請它是這樣嗎？ – seus

這裏亞去：

$("#one").attr("player","one");

來源

2013-08-26 13:23:41 robrich

與@Anup給出的答案相同。只需將背景按鈕設置爲圖像即可對其進行修改。只需複製並粘貼此代碼，不要忘了，從下面的鏈接http://code.jquery.com/jquery-1.8.2.min.js

<!DOCTYPE html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Puzzle</title> 
<script src="jquery-1.8.2.min.js"></script> 
<style> 
.main-container{background:#fff; width:950px; height:950px; text-align:center;} 
button{width:300px; height:228px; background:#CCC; float:left; margin:0px; color:#fff; font-size:18px; } 
button:hover{background:#9CF;} 
span{width:100%; color:#900; font-family:"Comic Sans MS", cursive;} 
</style> 
</head> 
<body> 
<h3>Image Puzzle...</h3> 
<div class="main-container">  
    <button alt="" name="1" value="1" id="1" style="background: url(dahlia-red-blossom-bloom-60597_01.jpg) no-repeat;">1</button> 
    <button alt="" name="2" value="2" id="2" style="background: url(dahlia-red-blossom-bloom-60597_02.jpg) no-repeat;">2</button> 
    <button alt="" name="3" value="3" id="3" style="background: url(dahlia-red-blossom-bloom-60597_03.jpg) no-repeat;">3</button> 
    <button alt="" name="4" value="4" id="4" style="background: url(dahlia-red-blossom-bloom-60597_04.jpg) no-repeat;">4</button> 
    <button alt="" name="5" value="5" id="5" style="background: url(dahlia-red-blossom-bloom-60597_05.jpg) no-repeat;">5</button> 
    <button alt="" name="6" value="6" id="6" style="background: url(dahlia-red-blossom-bloom-60597_06.jpg) no-repeat;">6</button> 
    <button alt="" name="7" value="7" id="7" style="background: url(dahlia-red-blossom-bloom-60597_07.jpg) no-repeat;">7</button> 
    <button alt="" name="8" value="8" id="8"></button> 
    <button alt="" name="9" value="9" id="9" style="background: url(dahlia-red-blossom-bloom-60597_08.jpg) no-repeat;">8</button> 
</div> 
<span>TEST</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));   
      console.log(bVal+'- 3 = '+upval); 
      var upTxt = $("#"+upval).text(); 
      if(upTxt == ""){    
       $("#"+upval).text(txt); 
       $(this).text(""); 
       $(this).css({'background': ''}); 
       $("#"+upval).css({'background': 'url(dahlia-red-blossom-bloom-60597_0'+txt+'.jpg)'}); 
      } 
     } 
     if((bVal != 7) && (bVal != 8) &&(bVal != 9)){ 
      downval = eval(eval(bVal)+ eval(3));    
      console.log(bVal+'+3 = '+downval); 
      var downTxt = $("#"+downval).text(); 
      if(downTxt == ""){   
       $("#"+downval).text(txt); 
       $(this).text(""); 
       $(this).css({'background': ''}); 
       $("#"+downval).css({'background': 'url(dahlia-red-blossom-bloom-60597_0'+txt+'.jpg)'}); 
      } 
     } 
     if((bVal != 1) && (bVal != 4) &&(bVal != 7)){ 
      leftval = eval(eval(bVal)-eval(1)); 
      console.log(bVal+'-1 = '+leftval);   
      var leftTxt = $("#"+leftval).text(); 
      if(leftTxt == ""){   
       $("#"+leftval).text(txt); 
       $(this).text(""); 
       $(this).css({'background': ''}); 
       $("#"+leftval).css({'background': 'url(dahlia-red-blossom-bloom-60597_0'+txt+'.jpg)'}); 
      } 
     } 
     if((bVal != 3) && (bVal != 6) &&(bVal != 9)){ 
      rightval = eval(eval(bVal)+ eval(1)); 
      console.log(bVal+'+1 = '+rightval);   
      var rightTxt = $("#"+rightval).text();   
      if(rightTxt == ""){     
       $("#"+rightval).text(txt); 
       $(this).text(""); 
       $(this).css({'background': ''}); 
       $("#"+rightval).css({'background': 'url(dahlia-red-blossom-bloom-60597_0'+txt+'.jpg)'}); 
      } 
     } 
     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("Success"); 
      $("button").attr("disabled", "disabled"); 
     }    
    } 
}); 

}); 


</script>

希望這個答案將有助於太下載jQuery的1.8.2.min.js！

來源

2017-05-22 13:50:49

使用jQuery創建圖像益智遊戲

回答

相關問題