我正在尝试使用 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 时，它只会更改图片，所以请帮助我找到解决方案。
最佳答案
不需要使用任何你可以在简单的 jquery 或 js 中制作的东西我在我的回答中向你发送这种类型的游戏只需检查它并像那样制作。这是一款简单的 0-9 益智游戏，将您的图像保留在数字位置，将其更改为您的图像作为按钮的背景图像。咕噜咕噜
<!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的完整益智游戏代码。
关于javascript - 使用 jQuery 创建图像益智游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18437007/