纯javascript实现的八格码拼图游戏yp.zip资源-CSDN文库

共18个文件

jpg：13个

wav：1个

png：1个

需积分: 5 65 浏览量 2024-08-14 10:02:07 上传评论收藏 7.77MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

纯javascript实现的八格码拼图游戏 yp.zip （18个子文件）

DSjavascript

sounds

ButtonSound.wav 59KB

Folder.jpg 21KB

Dreamer.mp3 6.22MB

AlbumArtSmall.jpg 6KB

.gitattributes 378B

ypGameV1.0(IE9,FF27).html 13KB

images

Dreamer

all_small.jpg 119KB

2.jpg 67KB

6.jpg 53KB

1.jpg 68KB

all.jpg 287KB

5.jpg 48KB

0.jpg 55KB

8.jpg 34KB

3.jpg 43KB

7.jpg 43KB

4.jpg 67KB

程序截图.png 893KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ypGame</title> </head> <style> div{ position:absolute;} </style> <body style=" background-color:#39F;" >  <div id="Pic_All" style="width:540px; height:540px; border-style:solid; border-color:#000; left:120px; top:20px; "> <div id="pic0" onclick="movePic('pic0')" style="background-image:url(images/Dreamer/0.jpg); width:180px; height:180px; float:left; left:0px; top:0px; z-index:2;"> </div> <div id="pic1" onclick="movePic('pic1')" style="background-image:url(images/Dreamer/1.jpg); width:180px; height:180px; float:left; left:180px; top:0px;"> </div> <div id="pic2" onclick="movePic('pic2')" style="background-image:url(images/Dreamer/2.jpg); width:180px; height:180px; float:left; left:360px; top:0px;"> </div> <div id="pic3" onclick="movePic('pic3')" style="background-image:url(images/Dreamer/3.jpg); width:180px; height:180px; float:left; left:0px; top:180px; "> </div> <div id="pic4" onclick="movePic('pic4')" style="background-image:url(images/Dreamer/4.jpg); width:180px; height:180px; float:left; left:180px; top:180px;"> </div> <div id="pic5" onclick="movePic('pic5')" style="background-image:url(images/Dreamer/5.jpg); width:180px; height:180px; float:left; left:360px; top:180px;"> </div> <div id="pic6" onclick="movePic('pic6')" style="background-image:url(images/Dreamer/6.jpg); width:180px; height:180px; float:left; left:0px; top:360px;"> </div> <div id="pic7" onclick="movePic('pic7')" style="background-image:url(images/Dreamer/7.jpg); width:180px; height:180px; float:left; left:180px; top:360px;"> </div> <div id="pic_08" onclick="movePic('pic_08')" style="background-image:url(images/Dreamer/8.jpg); width:180px; height:180px; float:left; top:100px; left:100px; position:absolute; left:360px; top:360px;"> </div> </div> </div> <div id="" style="position:absolute; top:220px; left:980px; background-image:url(images/Dreamer/all_small.jpg); width:280px; height:280px; border:solid;"> </div> <span style=" color:#FFF; font-size:56px; font-weight:220; position:absolute; left:750px; top:60px;">---Dreamer---</span> <span id="startGame" onmouseover="larger()" onmouseout="smaller()" onclick="chuShiHua()" style=" color:#FFF; font-size:30px; font-weight:200; position:absolute; left:720px; top:240px;"><|Start Game|></span> <span id="" style=" color:#FFF; font-size:26px;; font-weight:300; position:absolute; left:720px; top:320px;">Final Result</span> <span id="useTime" style=" color:#FFF; font-size:24px; ; font-weight:100; position:absolute; left:720px; top:400px;">time：</span> <span id="moveStep" style=" color:#FFF; font-size:24px; ; font-weight:100; position:absolute; left:720px; top:450px;">step：</span> <span id="extend" style=" display:none; color:#FFF; font-size:18px ; font-weight:100; position:absolute; left:690px; top:520px;">同学，不错不错哦，可以再快些哦~~~</span> <bgsound id="backgroundMusic" src="sounds/Dreamer.mp3" volume="-10000" loop="-1" /> <bgsound id="buttonMusic" src="" volume="-800" loop="1" /> <script> var getNum=new Array(); var rightPic=new Array(); var minute=0; var time=0; var second=0; var step=0; rightPic[0]=[0,0,false]; rightPic[1]=[180,0,false]; rightPic[2]=[360,0,false]; rightPic[3]=[0,180,false]; rightPic[4]=[180,180,false]; rightPic[5]=[360,180,false]; rightPic[6]=[0,360,false]; rightPic[7]=[180,360,false]; var rightNum=0; var pic_08X=0; var pic_08Y=0; var idName0; var uniqueLock=false; var TimeInterval; function playMusic(){ document.getElementById("backgroundMusic").setAttribute("volume","-780"); } function playButton(){ document.getElementById("buttonMusic").setAttribute("src","sounds/ButtonSound.wav"); } function larger(){ document.getElementById("startGame").style.fontSize="38px"; document.getElementById("startGame").style.left="705px"; } function smaller(){ document.getElementById("startGame").style.fontSize="30px"; document.getElementById("startGame").style.left="720px"; } function getRightNum(){ for(var i=0;i<8;i++){ var divPic=document.getElementById("pic"+i).style.backgroundImage; var objectX=parseInt(document.getElementById("pic"+i).style.left); var objectY=parseInt(document.getElementById("pic"+i).style.top); var charNum=parseInt(divPic.charAt(20)); if(rightPic[charNum][0]==objectX&&rightPic[charNum][1]==objectY){ rightPic[charNum][2]=true; rightNum++; }else{ } } }  function getRandomPic(){ var rNum=new Array(); var temp=0; rNum[0]=0; rNum[1]=1; rNum[2]=2; rNum[3]=3; rNum[4]=4; rNum[5]=5; rNum[6]=6; rNum[7]=7; for(var i=0;i<rNum.length;i++){ var num=parseInt(Math.random()*(8-i)); for(var j=0;j<rNum.length;j++){ if(j==num){ getNum[i]=rNum[j]; temp=rNum[7-i]; rNum[7-i]=rNum[j]; rNum[j]=temp; continue; } } } for(var i=0;i<getNum.length;i++){ } var niXuHe=0; for(var i=1;i<getNum.length;i++){ for(var j=0;j<i;j++){ if(getNum[j]>getNum[i]){ niXuHe++; } } } if(niXuHe%2==1){ var t=getNum[1]; getNum[1]=getNum[0]; getNum[0]=t; } niXuHe=0; for(var i=1;i<getNum.length;i++){ for(var j=0;j<i;j++){ if(getNum[j]>getNum[i]){ niXuHe++; } } } } function putPicture(){ <!-- var panelPic = document.getElementById("Pic_All"); <!-- var pics=panelPic.childNodes; <!-- alert("getNum[]个数："+pics.length); <!-- for(var i=0;i<pics.length;i++){ <!-- pics.item(i).style.backgroundImage="url(images/Dreamer/"+getNum[i]+".jpg)"; <!-- } document.getElementById("pic0").style.backgroundImage="url(images/Dreamer/"+getNum[0]+".jpg)"; document.getElementById("pic1").style.backgroundImage="url(images/Dreamer/"+getNum[1]+".jpg)"; document.getElementById("pic2").style.backgroundImage="url(images/Dreamer/"+getNum[2]+".jpg)"; document.getElementById("pic3").style.backgroundImage="url(images/Dreamer/"+getNum[3]+".jpg)"; document.getElementById("pic4").style.backgroundImage="url(images/Dreamer/"+getNum[4]+".jpg)"; document.getElementById("pic5").style.backgroundImage="url(images/Dreamer/"+getNum[5]+".jpg)"; document.getElementById("pic6").style.backgroundImage="url(images/Dreamer/"+getNum[6]+".jpg)"; document.getElementById("pic7").style.backgroundImage="url(images/Dreamer/"+getNum[7]+".jpg)"; document.getElementById("pic_08").style.backgroundImage=""; } function getPic_08Position(){ var pic_08=document.getElementById("pic_08"); pic_08X=parseInt(pic_08.style.left); pic_08Y=parseInt(pic_08.style.top); } function toUp(idName){ var object=document.getElementById(idName0); if(parseInt(object.style.top)>pic_08Y){ object.style.top=(parseInt(object.style.top)-20)+"px"; }else{ uniqueLock=true; window.clearInterval(TimeInterval); getPic_08Position(); } } function toDown(idName){ var object=document.getElementById(idName0); if(parseInt(object.style.top)<pic_08Y){ object.style.top=(parseInt(object.style.top)+20)+"px"; }else{ uniqueLock=true; window.clearInterval(TimeInterval); getPic_08Position(); } } function toRight(){ var object=document.getElementById(idName0); if(parseInt(object.style.left)<pic_08X){ object.style.left=(parseInt(object.style.left)+20)+"px"; }else{ uniqueLock=true; window.clearInterval(TimeInterval); getPic_08Position(); } } function toLeft(idName){ var object=document.getElementById(idName0); if(parseInt(object.style.left)>pic_08X){ object.style.left=(parseInt(object.style.left)-20)+"px"; }else{ window.clearInterval(TimeInterval); uniqueLock=true; getPic_08Position(); } } function movePic(idName

评论收藏

内容反馈