用jq实现一个较为简单的2048

最新推荐文章于 2021-04-17 20:10:07 发布

NoByte

最新推荐文章于 2021-04-17 20:10:07 发布

阅读量381

点赞数

文章标签： html jquery

本文链接：https://blog.csdn.net/Empyrean_action/article/details/79127991

版权

由于本人写这个的时候是刚学js对意面式代码情有独钟所以写的很差，但我懒得改了φ(>ω<*)

<!DOCTYPE html>

<html>
<head>
<script src="js/jquery3.js"></script>
<script type="text/javascript">
//{0,2,2,32}-->{0,0,4,32}
//{2,0,2,32}-->{0,0,4,32}
//{0,4,0,4} -->{0,0,}
//{0,4,4,0} -->{}
//{2,4,2,4}
//{2,2,4,4}-->{0,0,4,8}
$(document).ready(function(){
for(var i=0;i<2;i++){
var a=parseInt(Math.random()*15);
$("#p"+String(a)).val(2);
$("#p"+String(a)).css("background-color","orange");
}
$("#b1").click(function(){
var a11=new Array();
for(var h=0;h<16;h++){
a11[h]=$("#p"+String(h)).val();
}
for(var i=12;i<16;i++){
var a=new Array(4);
a[0]=$("#p"+String(i)).val();
a[1]=$("#p"+String(i-4)).val();
a[2]=$("#p"+String(i-8)).val();
a[3]=$("#p"+String(i-12)).val();
for(var b=0;b<a.length;b++){
if(a[b]==""){
a.splice(b,1);
a.unshift("");
}
}
if(a[3]==a[2] && a[3]!=""&& a[2]!=""){a[3]=String(parseInt(a[3])*2);a[2]=""};
if(a[2]==a[1] && a[3]!=a[2] && a[2]!="" && a[1]!=""){a[2]=String(parseInt(a[2])*2);a[1]=""}
if(a[1]==a[0] && a[0]!="" && a[1]!=""){a[1]=String(parseInt(a[1])*2),a[0]=""};
if(a[1]==a[0] && a[3]==a[2] && a[2]!="" && a[1]!="" && a[0]!="" && a[3]!=""){
a[3]=String(parseInt(a[3])*2);
a[1]=String(parseInt(a[1])*2);
}
for(var e=0;e<a.length;e++){
if(a[e]==""){
a.splice(e,1);
a.unshift("")
}
}
$("#p"+String(i)).val(a[0]);
$("#p"+String(i-4)).val(a[1]);
$("#p"+String(i-8)).val(a[2]);
$("#p"+String(i-12)).val(a[3]);

}

var s=0;
var a1=new Array();
var a2=new Array();
for(var f=0;f<16;f++){
a1[f]=$("#p"+String(f)).val();
if(a1[f]==""){
a2[s]=f;
s++
$("#p"+String(f)).css("background-color","red");
}
if(a1[f]=="2"){
$("#p"+String(f)).css("background-color","orange");
}
if(a1[f]=="4"){
$("#p"+String(f)).css("background-color","yellow");
}
if(a1[f]=="8"){
$("#p"+String(f)).css("background-color","green");
}
if(a1[f]=="16"){
$("#p"+String(f)).css("background-color","cyan");
}
if(a1[f]=="32"){
$("#p"+String(f)).css("background-color","blue");
}
if(a1[f]=="64"){
$("#p"+String(f)).css("background-color","purple");
}
if(a1[f]=="128"){
$("#p"+String(f)).css("background-color","pink");
}
if(a1[f]=="256"){
$("#p"+String(f)).css("background-color","gray");
}
if(a1[f]=="512"){
$("#p"+String(f)).css("background-color","lime");
}
if(a1[f]=="1024"){
$("#p"+String(f)).css("background-color","orangeRed");
}
if(a1[f]=="2048"){
$("#p"+String(f)).css("background-color","cornsilk");
alert("恭喜产生2048,下个目标4096");
window.alert=function(str){return;}
}
if(a1[f]=="4096"){
$("#p"+String(f)).css("background-color","plum");
alert("恭喜产生4096,下个目标8184");
}
if(a1[f]=="8184"){
$("#p"+String(f)).css("background-color","orchid");
alert("恭喜产生4096,下个目标16368");
}
if(a1[f]=="16368"){
$("#p"+String(f)).css("background-color","orchid");
alert("恭喜产生16368,恭喜您已超神成为人生赢家,不妨尝试下我们的下一款游戏");
}
}

if(a1.toString()!=a11.toString()){
var g=parseInt(Math.random()*(a2.length-1));
$("#p"+String(a2[g])).val(2);
$("#p"+String(a2[g])).css("background-color","orange");
}
})

$("#b2").click(function(){
var a11=new Array();
for(var h=0;h<16;h++){
a11[h]=$("#p"+String(h)).val();
}
for(var i=0;i<4;i++){
var a=new Array(4);
a[0]=$("#p"+String(i)).val();
a[1]=$("#p"+String(i+4)).val();
a[2]=$("#p"+String(i+8)).val();
a[3]=$("#p"+String(i+12)).val();
var s100=a;
for(var b=0;b<a.length;b++){
if(a[b]==""){
a.splice(b,1);
a.unshift("")
}
}
if(a[3]==a[2] && a[3]!=""&& a[2]!=""){a[3]=String(parseInt(a[3])*2);a[2]=""};
if(a[2]==a[1] && a[3]!=a[2] && a[2]!="" && a[1]!=""){a[2]=String(parseInt(a[2])*2);a[1]=""}
if(a[1]==a[0] && a[0]!="" && a[1]!=""){a[1]=String(parseInt(a[1])*2),a[0]=""};
if(a[1]==a[0] && a[3]==a[2] && a[2]!="" && a[1]!="" && a[0]!="" && a[3]!=""){
a[3]=String(parseInt(a[3])*2);
a[1]=String(parseInt(a[1])*2);
}
for(var e=0;e<a.length;e++){
if(a[e]==""){
a.splice(e,1);
a.unshift("")
}
}
$("#p"+String(i)).val(a[0]);
$("#p"+String(i+4)).val(a[1]);
$("#p"+String(i+8)).val(a[2]);
$("#p"+String(i+12)).val(a[3]);
}
var s=0;
var a1=new Array();
var a2=new Array();
for(var f=0;f<16;f++){
a1[f]=$("#p"+String(f)).val();
if(a1[f]==""){
a2[s]=f;
s++;
$("#p"+String(f)).css("background-color","red");
}
if(a1[f]=="2"){
$("#p"+String(f)).css("background-color","orange");
}
if(a1[f]=="4"){
$("#p"+String(f)).css("background-color","yellow");
}
if(a1[f]=="8"){
$("#p"+String(f)).css("background-color","green");
}
if(a1[f]=="16"){
$("#p"+String(f)).css("background-color","cyan");
}
if(a1[f]=="32"){
$("#p"+String(f)).css("background-color","blue");
}
if(a1[f]=="64"){
$("#p"+String(f)).css("background-color","purple");
}
if(a1[f]=="128"){
$("#p"+String(f)).css("background-color","pink");
}
if(a1[f]=="256"){
$("#p"+String(f)).css("background-color","gray");
}
if(a1[f]=="512"){
$("#p"+String(f)).css("background-color","lime");
}
if(a1[f]=="1024"){
$("#p"+String(f)).css("background-color","orangeRed");
}
if(a1[f]=="2048"){
$("#p"+String(f)).css("background-color","cornsilk");
alert("恭喜产生2048,下个目标4096");
window.alert=function(str){return;}
}
if(a1[f]=="4096"){
$("#p"+String(f)).css("background-color","plum");
alert("恭喜产生4096,下个目标8184");
}
if(a1[f]=="8184"){
$("#p"+String(f)).css("background-color","orchid");
alert("恭喜产生4096,下个目标16368");
}
if(a1[f]=="16368"){
$("#p"+String(f)).css("background-color","orchid");
alert("恭喜产生16368,恭喜您已超神成为人生赢家,不妨尝试下我们的下一款游戏");
}
}
if(a1.toString()!=a11.toString()){
var g=parseInt(Math.random()*(a2.length-1));
$("#p"+String(a2[g])).val(2);
$("#p"+String(a2[g])).css("background-color","orange");
}
})
$("#b3").click(function(){
var a11=new Array();
for(var h=0;h<16;h++){
a11[h]=$("#p"+String(h)).val();
}
for(var i=3;i<16;i+=4){
var a=new Array(4);
a[0]=$("#p"+String(i)).val();
a[1]=$("#p"+String(i-1)).val();
a[2]=$("#p"+String(i-2)).val();
a[3]=$("#p"+String(i-3)).val();
var c=0;
for(var b=0;b<a.length;b++){
if(a[b]==""){
a.splice(b,1);
a.unshift("")
}
}
if(a[3]==a[2] && a[3]!=""&& a[2]!=""){a[3]=String(parseInt(a[3])*2);a[2]=""};
if(a[2]==a[1] && a[3]!=a[2] && a[2]!="" && a[1]!=""){a[2]=String(parseInt(a[2])*2);a[1]=""}
if(a[1]==a[0] && a[0]!="" && a[1]!=""){a[1]=String(parseInt(a[1])*2),a[0]=""};
if(a[1]==a[0] && a[3]==a[2] && a[2]!="" && a[1]!="" && a[0]!="" && a[3]!=""){
a[3]=String(parseInt(a[3])*2);
a[1]=String(parseInt(a[1])*2);
}
for(var e=0;e<a.length;e++){
if(a[e]==""){
a.splice(e,1);
a.unshift("")
}
}
$("#p"+String(i)).val(a[0]);
$("#p"+String(i-1)).val(a[1]);
$("#p"+String(i-2)).val(a[2]);
$("#p"+String(i-3)).val(a[3]);
}
var s=0;
var a1=new Array();
var a2=new Array();
for(var f=0;f<16;f++){
a1[f]=$("#p"+String(f)).val();
if(a1[f]==""){
a2[s]=f;
s++;
$("#p"+String(f)).css("background-color","red");
}
if(a1[f]=="2"){
$("#p"+String(f)).css("background-color","orange");
}
if(a1[f]=="4"){
$("#p"+String(f)).css("background-color","yellow");
}
if(a1[f]=="8"){
$("#p"+String(f)).css("background-color","green");
}
if(a1[f]=="16"){
$("#p"+String(f)).css("background-color","cyan");
}
if(a1[f]=="32"){
$("#p"+String(f)).css("background-color","blue");
}
if(a1[f]=="64"){
$("#p"+String(f)).css("background-color","purple");
}
if(a1[f]=="128"){
$("#p"+String(f)).css("background-color","pink");
}
if(a1[f]=="256"){
$("#p"+String(f)).css("background-color","gray");
}
if(a1[f]=="512"){
$("#p"+String(f)).css("background-color","lime");
}
if(a1[f]=="1024"){
$("#p"+String(f)).css("background-color","orangeRed");
}
if(a1[f]=="2048"){
$("#p"+String(f)).css("background-color","cornsilk");
alert("恭喜产生2048,下个目标4096");
window.alert=function(str){return;}
}
if(a1[f]=="4096"){
$("#p"+String(f)).css("background-color","plum");
alert("恭喜产生4096,下个目标8184");
}
if(a1[f]=="8184"){
$("#p"+String(f)).css("background-color","orchid");
alert("恭喜产生4096,下个目标16368");
}
if(a1[f]=="16368"){
$("#p"+String(f)).css("background-color","orchid");
alert("恭喜产生16368,恭喜您已超神成为人生赢家,不妨尝试下我们的下一款游戏");
}

}
if(a1.toString()!=a11.toString()){
var g=parseInt(Math.random()*(a2.length-1));
$("#p"+String(a2[g])).val(2);
$("#p"+String(a2[g])).css("background-color","orange");
}
})
$("#b4").click(function(){
var a11=new Array();
for(var h=0;h<16;h++){
a11[h]=$("#p"+String(h)).val();
}
for(var i=0;i<13;i+=4){
var a=new Array(4);
a[0]=$("#p"+String(i)).val();
a[1]=$("#p"+String(i+1)).val();
a[2]=$("#p"+String(i+2)).val();
a[3]=$("#p"+String(i+3)).val();
var c=0;
for(var b=0;b<a.length;b++){
if(a[b]==""){
a.splice(b,1);
a.unshift("")
}
}
if(a[3]==a[2] && a[3]!=""&& a[2]!=""){a[3]=String(parseInt(a[3])*2);a[2]=""};
if(a[2]==a[1] && a[3]!=a[2] && a[2]!="" && a[1]!=""){a[2]=String(parseInt(a[2])*2);a[1]=""}
if(a[1]==a[0] && a[0]!="" && a[1]!=""){a[1]=String(parseInt(a[1])*2),a[0]=""};
if(a[1]==a[0] && a[3]==a[2] && a[2]!="" && a[1]!="" && a[0]!="" && a[3]!=""){
a[3]=String(parseInt(a[3])*2);
a[1]=String(parseInt(a[1])*2);
}
for(var e=0;e<a.length;e++){
if(a[e]==""){
a.splice(e,1);
a.unshift("")
}
}
$("#p"+String(i)).val(a[0]);
$("#p"+String(i+1)).val(a[1]);
$("#p"+String(i+2)).val(a[2]);
$("#p"+String(i+3)).val(a[3]);
}
var s=0;
var a1=new Array();
var a2=new Array();
for(var f=0;f<16;f++){
a1[f]=$("#p"+String(f)).val();
if(a1[f]==""){
a2[s]=f;
s++;
$("#p"+String(f)).css("background-color","red");
}
if(a1[f]=="2"){
$("#p"+String(f)).css("background-color","orange");
}
if(a1[f]=="4"){
$("#p"+String(f)).css("background-color","yellow");
}
if(a1[f]=="8"){
$("#p"+String(f)).css("background-color","green");
}
if(a1[f]=="16"){
$("#p"+String(f)).css("background-color","cyan");
}
if(a1[f]=="32"){
$("#p"+String(f)).css("background-color","blue");
}
if(a1[f]=="64"){
$("#p"+String(f)).css("background-color","purple");
}
if(a1[f]=="128"){
$("#p"+String(f)).css("background-color","pink");
}
if(a1[f]=="256"){
$("#p"+String(f)).css("background-color","gray");
}
if(a1[f]=="512"){
$("#p"+String(f)).css("background-color","lime");
}
if(a1[f]=="1024"){
$("#p"+String(f)).css("background-color","orangeRed");
}
if(a1[f]=="2048"){
$("#p"+String(f)).css("background-color","cornsilk");
alert("恭喜产生2048,下个目标4096");
window.alert=function(str){return;}
}
if(a1[f]=="4096"){
$("#p"+String(f)).css("background-color","plum");
window.alert=function(str){}
alert("恭喜产生4096,下个目标8184");
window.alert=function(str){return;}
}
if(a1[f]=="8184"){
$("#p"+String(f)).css("background-color","orchid");
alert("恭喜产生4096,下个目标16368");
}
if(a1[f]=="16368"){
$("#p"+String(f)).css("background-color","orchid");
alert("恭喜产生16368,恭喜您已超神成为人生赢家,不妨尝试下我们的下一款游戏");

}
}
if(a1.toString()!=a11.toString()){
var g=parseInt(Math.random()*(a2.length-1));
$("#p"+String(a2[g])).val(2);
$("#p"+String(a2[g])).css("background-color","orange");
}
})
})
</script>
<style type="text/css">
#p0{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:150px;
top:100px;
}
#p1{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:200px;
top:100px;
}
#p2{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:250px;
top:100px;
}
#p3{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:300px;
top:100px;
}
#p4{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:150px;
top:150px;
}
#p5{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:200px;
top:150px;
}
#p6{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:250px;
top:150px;
}
#p7{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:300px;
top:150px;
}
#p8{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:150px;
top:200px;
}
#p9{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:200px;
top:200px;
}
#p10{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:250px;
top:200px;
}
#p11{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:300px;
top:200px;
}
#p12{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:150px;
top:250px;
}
#p13{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:200px;
top:250px;
}
#p14{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:250px;
top:250px;
}
#p15{
text-align: center;
font-size:20px;
border:1px solid white;
width:50px;
height:50px;
background-color:red;
position:absolute;
left:300px;
top:250px;
}

div{
width:500px;
height:500px;
position:relative;
top:70px;
left:170px;

}
#b1{
width:200px;
height:40px;
position:absolute;
top:55px;
left:150px;
background:white;
}
#b2{
width:200px;
height:40px;
position:absolute;
top:310px;
left:150px;
background:white;
}
#b3{
height:200px;
width:40px;
position:absolute;
top:100px;
left:105px;
background:white;
direction: ttb;
}
#b4{
height:200px;
width:40px;
position:absolute;
top:100px;
left:360px;
background:white;
}
</style>
</head>
<body>

<div style="background-color:#ff6666">
<h1 align="center">2048</h1>
<input type="button" value="向上" id="b1">
<input type="button" value="向下" id="b2">
<input type="button" value="向左" id="b3">
<input type="button" value="向右" id="b4">
<input type="text" id="p0" disabled><input type="text" id="p1" disabled><input type="text" id="p2" disabled><input type="text" id="p3" disabled>
<input type="text" id="p4" disabled><input type="text" id="p5" disabled><input type="text" id="p6" disabled><input type="text" id="p7" disabled>
<input type="text" id="p8" disabled><input type="text" id="p9" disabled><input type="text" id="p10" disabled><input type="text" id="p11" disabled>
<input type="text" id="p12" disabled><input type="text" id="p13" disabled><input type="text" id="p14" disabled><input type="text" id="p15" disabled>
</div>

</body>
</html>

NoByte

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jq实现一个较为简单的2048

由于本人写这个的时候是刚学js对意面式代码情有独钟所以写的很差，但我懒得改了φ(>ω//{0,2,2,32}-->{0,0,4,32}//{2,0,2,32}-->{0,0,4,32}//{0,4,0,4} -->{0,0,}//{0,4,4,0} -->{}//{2,4,2,4}//{2,2,4,4}-->{0,0,4,8}$(document).
复制链接

扫一扫