i'm trying to create a image puzzle game using jquery. using this code
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");
}
});
and 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>
it is a sample code. i have 9 divs and it's a 3/3 arrangement. my problem is when i click on the nearest div of the blank image it only change the image so please help me to find the solution.
i'm trying to create a image puzzle game using jquery. using this code
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");
}
});
and 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>
it is a sample code. i have 9 divs and it's a 3/3 arrangement. my problem is when i click on the nearest div of the blank image it only change the image so please help me to find the solution.
Share Improve this question edited Nov 29, 2022 at 11:05 Arunraj S asked Aug 26, 2013 at 5:08 Arunraj SArunraj S 7788 silver badges26 bronze badges 3- 3 Can you post more code please or a link to a jsfiddle. example? Or clarify what problem you're having with this code? – robrich Commented Aug 26, 2013 at 5:13
-
1
This code given above does not deal with 9 divs. There are only 2 divs here. It would be great if you can recreate the
situationin its entirety – Hanky Panky Commented Aug 26, 2013 at 5:15 - @robrich the problem is i can't change the attribute value of the div. it only change the background image. so i want to change the attribute value of the image when i click the div please help me... – Arunraj S Commented Aug 26, 2013 at 5:54
3 Answers
Reset to default 3No need to use any thing you can make it in a simple jquery or js i am sending you this type of game in my answer just check it and make like that one. It is simple 0-9 puzzle game keep your images at the place of numbers change it with your images as a background images of buttons. gud luk
<!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>
It is full puzzle game code with css,js and html.
Here ya go:
$("#one").attr("player","one");
Same answer as given by @Anup . Just modified it with backround button set as image. Just copy and paste this code and don't forget to download jquery-1.8.2.min.js from following link http://code.jquery./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>
Hope this answer will help too!