Fatal编程技术网
  • javascript/
  • Javascript 使用jQuery创建图像益智游戏

Javascript 使用jQuery创建图像益智游戏

javascript jquery html css

Javascript 使用jQuery创建图像益智游戏,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用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_t

我正在尝试使用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空白图像时，它只会改变图像，所以请帮我找到解决方案。请试着了解我的情况谢谢

给你：

$("#one").attr("player","one");
不需要使用任何东西，你可以在一个简单的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>


阿努普兹尔
.main容器{背景：#600；宽度：270px；高度：270px；文本对齐：中间；}
按钮{宽度：80px；高度：80px；背景：#CCC；浮动：左；边距：5px；颜色：#600；字体大小：18px；}
按钮：悬停{背景：#9CF；}
span{宽度：100%；颜色：#900；字体系列：“漫画无MS”，草书；}
你想试试你的大脑逻辑吗。。。
5.
6.
8.
3.
7.
1.
2.
4.
阿努普
$（文档）.ready（函数（）{
变量upval、downval、leftval、rightval、txt、bVal；
$（“按钮”）。单击（函数（）{
txt=$（this.text（）；
bVal=$（this.val（）；
如果（txt！=“”）{
如果（（bVal！=1）和&（bVal！=2）和&（bVal！=3））{
upval=eval（eval（bVal）-eval（3））；
var uptext=$（“#”+upval）.text（）；
如果（uptext==“”）{
$（“#”+upval）.text（txt）；
$（此）.text（“”）；
}
}
如果（（bVal！=7）和&（bVal！=8）和&（bVal！=9））{
downval=eval（eval（bVal）+eval（3））；
var downTxt=$（“#”+downval）.text（）；
如果（downTxt==“”）{
$（“#”+downval）.text（txt）；
$（此）.text（“”）；
}
}
如果（（bVal！=1）和&（bVal！=4）和&（bVal！=7））{
leftval=eval（eval（bVal）-eval（1））；
var leftTxt=$（“#”+leftval）.text（）；
如果（leftTxt==“”）{
$（“#”+leftval）.text（txt）；
$（此）.text（“”）；
}
}
如果（（bVal！=3）和&（bVal！=6）和&（bVal！=9））{
rightval=评估（评估（bVal）+评估（1））；
var rightTxt=$（“#”+rightval）.text（）；
如果（rightTxt==“”）{
$（“#”+rightval）.text（txt）；
$（此）.text（“”）；
}
}
var one=$（“#1”）.text（）；
var two=$（“#2”）.text（）；
变量三=$（“#3”）.text（）；
var-four=$（“#4”）.text（）；
变量五=$（“#5”）.text（）；
变量六=$（“#6”）.text（）；
var seven=$（“#7”）.text（）；
var八=$（“#8”）.text（）；
var nine=$（“#9”）.text（）；
如果（（一=“1”）&（（二=“2”）&（（三=“3”）&（（四=“4”）&（（五=“5”）&（（六=“6”）&（（七=“7”）&（（八=“8”）&（（九=“）{
警惕（“祝贺你赢得了比赛…”）；
$（“按钮”）.attr（“禁用”、“禁用”）；
}               
}   
});
});
这是包含css、js和html的完整益智游戏代码。

与@Anup给出的答案相同。只是修改了设置为图像的backround按钮。只要复制并粘贴这段代码，别忘了从下面的链接下载jquery-1.8.2.min.js


令人费解的事
.main容器{背景：#fff；宽度：950px；高度：950px；文本对齐：中间；}
按钮{宽度：300px；高度：228px；背景：#CCC；浮动：左；边距：0px；颜色：#fff；字体大小：18px；}
按钮：悬停{背景：#9CF；}
span{宽度：100%；颜色：#900；字体系列：“漫画无MS”，草书；}
图像拼图。。。
1.
2.
3.
4.
5.
6.
7.
8.
试验
$（文档）.ready（函数（）{
变量upval、downval、leftval、rightval、txt、bVal；
$（“按钮”）。单击（函数（）{
txt=$（this.text（）；
bVal=$（this.val（）；
如果（txt！=“”）{
如果（（bVal！=1）和&（bVal！=2）和&（bVal！=3））{
upval=eval（eval（bVal）-eval（3））；
log（bVal+'-3='+upval）；
var uptext=$（“#”+upval）.text（）；
如果（uptext==“”）{
$（“#”+upval）.text（txt）；
$（此）.text（“”）；
$（this.css（{'background'：''}）；
$（“#”+upval）.css（{'background'：'url（dahlia-red-blooms-bloom-60597_0'+txt+'.jpg）}）；
}
}
如果（（bVal！=7）和&（bVal！=8）和&（bVal！=9））{
downval=eval（eval（bVal）+eval（3））；
log（bVal+'+3='+downval）；
var downTxt=$（“#”+downval）.text（）；
如果（downTxt==“”）{
$（“#”+downval）.text（txt）；
$（此）.text（“”）；
$（this.css（{'background'：''}）；
$（“#”+downval）.css（{'background'：'url（dahlia-red-blooms-bloom-60597_0'+txt+'.jpg）}）；
}
}
如果（（bVal！=1）和&（bVal！=4）和&（bVal！=7））{
leftval=eval（eval（bVal）-eval（1））；
log（bVal+'-1='+leftval）；
var leftTxt=$（“#”+leftval）.text（）；
如果（leftTxt==“”）{
$（“#”+leftval）.text（txt）；
$（此）.text（“”）；
$（this.css（{'background'：''}）；
$（“#”+leftval）.css（{'background'：'url（dahlia-red-blossom-bloom-60597_0'+txt+'.jpg）}）；
}
}
如果（（bVal！=3）和&（bVal！=6）和&（bVal！=9））{
rightval=评估（评估（bVal）+评估（1））；
log（bVal+'+1='+rightval）；
var rightTxt=$（“#”+rightval）.text（）；
如果（rightTxt==“”）{
$（“#”+rightval）.text（txt）；
$（此）.text（“”）；
$（this.css（{'background'：''}）；
$（“#”+rightval）.css（{'background'：'url（dahlia-red-blooms-bloom-60597_0'+txt+'.jpg）}）；

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