• 2009-09-25

    js带音效移动拼图游戏(兼容ie&ff&op) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/47137754.html

    写了个送给小侄的拼图游戏,音效的调试费了一番功夫。
    游戏地址:http://www.shemr.cn/bin/puzzle.htm
    欢迎大家试玩,并在此留下分数,呵呵。
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
    welcome to BINBIN's game home
    </title>
    <script>
    //v1.0正式发布于09-09-25 21:00:00
    //written by lily
    //just a gift to BINBIN, my lovely nephew.
    //拟增加:时间加分钟显示;难度划分,原图消失;记录保存。
    ifsplit=false;
    num=0;
    begin=0;
    blackgrid=null;
    showtime=null;
    direction=new Array(new Array(0,-1),new Array(1,0),new Array(0,1),new Array(-1,0));
    function win()
    {
    for(i=0;i<num;i++)
    for(j=0;j<num;j++)
    {
    if(i==0&&j==num-1)
    {
    if(document.getElementById("grid"+(i+1)+""+(j+1))!=blackgrid)return false;
    continue;
    }
    if(document.getElementById("grid"+(i+1)+""+(j+1)).style.backgroundPosition!=document.getElementById("ogrid"+(i+1)+""+(j+1)).style.backgroundPosition)return false;
    }
    clearTimeout(showtime);
    showtime=null;
    if(document.all)
    try{document.getElementById("winner").play();}catch(e){}
    else
    {
    pobj=document.getElementById("winner").parentNode;
    pobj.removeChild(document.getElementById("winner"));
    emb=document.createElement('embed');
    emb.src="win.wav";
    emb.style.height=0;
    emb.style.width=0;
    emb.autostart=true;
    emb.id="winner";
    pobj.appendChild(emb);
    }
    alert("Congratulations You Win!!!\nyour score is "+document.getElementById("speed").value+"'s!");
    return true;
    }
    function move(e)
    {
    if(showtime==null)return;
    if(document.all)
    obj=event.srcElement;
    else
    obj=e.target;
    if(obj==blackgrid)return;
    for(i=0;i<direction.length;i++)
    if(document.getElementById("grid"+(parseInt(obj.id.substring(4,5))+parseInt(direction[i][0]))+""+(parseInt(obj.id.substring(5,6))+parseInt(direction[i][1]))))
    {
    if(document.getElementById("grid"+(parseInt(obj.id.substring(4,5))+parseInt(direction[i][0]))+""+(parseInt(obj.id.substring(5,6))+parseInt(direction[i][1])))==blackgrid)
    {
    if(document.all)
    try{document.getElementById("music").play();}catch(e){}
    else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)
    {
    if(document.getElementById("bgmusic").value!="")
    document.getElementById("music").src=document.getElementById("bgmusic").value;
    }
    else
    setmusic();
    blackgrid.style.backgroundImage=document.getElementById("old").style.backgroundImage;
    blackgrid.style.backgroundPosition=obj.style.backgroundPosition;
    blackgrid.style.backgroundColor="";
    obj.style.backgroundImage="url()";
    obj.style.backgroundColor="black";
    blackgrid=obj;
    document.getElementById("count").value=parseInt(document.getElementById("count").value)+1;
    return win();
    }
    }
    }
    function clock()
    {
    current=new Date();
    current=Math.round(current.getTime()/1000);
    document.getElementById("speed").value=current-begin;
    }
    function clear()
    {
    clearInterval(showtime);
    showtime=null;
    document.getElementById("speed").value=0;
    document.getElementById("count").value=0;
    }
    function mix()
    {
    if(!ifsplit)
    {
    alert("split first pls!");
    return;
    }
    clear();
    times=0;
    while(times<1000)
    {
    rand=Math.floor(Math.random()*4);
    if(document.getElementById("grid"+(parseInt(blackgrid.id.substring(4,5))+parseInt(direction[rand][0]))+""+(parseInt(blackgrid.id.substring(5,6))+parseInt(direction[rand][1]))))
    {
    blackgrid.style.backgroundImage=document.getElementById("old").style.backgroundImage;
    blackgrid.style.backgroundPosition=document.getElementById("grid"+(parseInt(blackgrid.id.substring(4,5))+parseInt(direction[rand][0]))+""+(parseInt(blackgrid.id.substring(5,6))+parseInt(direction[rand][1]))).style.backgroundPosition;
    blackgrid.style.backgroundColor="";
    document.getElementById("grid"+(parseInt(blackgrid.id.substring(4,5))+parseInt(direction[rand][0]))+""+(parseInt(blackgrid.id.substring(5,6))+parseInt(direction[rand][1]))).style.backgroundImage="url()";
    document.getElementById("grid"+(parseInt(blackgrid.id.substring(4,5))+parseInt(direction[rand][0]))+""+(parseInt(blackgrid.id.substring(5,6))+parseInt(direction[rand][1]))).style.backgroundColor="black";
    blackgrid=document.getElementById("grid"+(parseInt(blackgrid.id.substring(4,5))+parseInt(direction[rand][0]))+""+(parseInt(blackgrid.id.substring(5,6))+parseInt(direction[rand][1])));
    times++;
    }
    }
    begin=new Date();
    begin=Math.round(begin.getTime()/1000);
    showtime=setInterval("clock()",1000);
    }
    function setmusic()
    {
    pobj=document.getElementById("music").parentNode;
    pobj.removeChild(document.getElementById("music"));
    emb=document.createElement('embed');
    if(document.getElementById("bgmusic").value!="")
    emb.src=document.getElementById("bgmusic").value;
    emb.style.height=0;
    emb.style.width=0;
    emb.autostart=false;
    emb.id="music";
    pobj.appendChild(emb);
    }
    function setgrid(name,obj)
    {
    grid=document.createElement("div");
    grid.id=name+(i+1)+""+(j+1);
    grid.style.border=border+"px solid "+mycolor;
    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)
    grid.style.cssFloat="left";
    else
    grid.style.styleFloat="left";
    grid.style.width=allwidth/num+"px";
    grid.style.height=allheight/num+"px";
    grid.style.backgroundImage=document.getElementById("old").style.backgroundImage;
    //grid.style.backgroundPosition=pos*j+"% "+pos*i+"%";
    grid.style.backgroundPosition=-j*allwidth/num+"px -"+i*allheight/num+"px";
    if(name=="grid")
    grid.onclick=move;
    obj.appendChild(grid);
    }
    function mysplit()
    {
    clear();
    document.getElementById("new").style.backgroundImage="url()";
    document.getElementById("new").innerHTML="";
    document.getElementById("old").innerHTML="";
    num=document.getElementById("mysize").value;
    border=document.getElementById("myborder").value;
    mycolor=document.getElementById("bcolor").value;
    for(i=0;i<num;i++)
    for(j=0;j<num;j++)
    {
    //pos=Math.round(100/(num-1));
    setgrid("grid",document.getElementById("new"));
    setgrid("ogrid",document.getElementById("old"));
    }
    if(!document.all)
    {
    document.getElementById("new").style.width=allwidth+border*2*num+"px";
    document.getElementById("new").style.height=allheight+border*2*num+"px";
    document.getElementById("old").style.width=allwidth+border*2*num+"px";
    document.getElementById("old").style.height=allheight+border*2*num+"px";
    //document.getElementById("old").style.OBackgroundSize="100% 100%";
    }
    document.getElementById("grid"+1+""+num).style.backgroundImage="url()";
    document.getElementById("grid"+1+""+num).style.backgroundColor="black";
    blackgrid=document.getElementById("grid"+1+""+num);
    ifsplit=true;
    setmusic();
    }
    function selpic(obj)
    {
    if(obj.src=='http://www.shemr.cn/bin/dot.jpg')
    return false;
    if(obj.offsetWidth<300||obj.offsetHeight<300)
    {
    alert("choice 300*300 pic pls");
    obj.src='http://www.shemr.cn/bin/dot.jpg'
    return false;
    }
    clear();
    ifsplit=false;
    obj.src='http://www.shemr.cn/bin/dot.jpg'
    document.getElementById("new").innerHTML="";
    document.getElementById("old").innerHTML="";
    document.getElementById("new").style.backgroundImage="url("+document.getElementById("picurl").value+")";
    document.getElementById("old").style.backgroundImage="url("+document.getElementById("picurl").value+")";
    }
    </script>
    300*300 pic's url:<input type=text size=50 id=picurl /><input type=button id='getbtn' style='cursor:pointer' value=getpic onclick='document.getElementById("checkpic").src=document.getElementById("picurl").value' /><br><br>
    size:<select id=mysize><option value=2>2*2<option value=3 selected="selected">3*3<option value=4>4*4<option value=5>5*5<option value=6>6*6</select> border:<select id=myborder><option value=1>1<option value=2>2<option value=3>3<option value=4>4</select> bordercolor:<select id=bcolor><option value=white>white<option value=black>black<option value=green>green<option value=red>red<option value=blue>blue<option value=orange>orange<option value=gray>gray<option value=pink>pink<option value=yellow>yellow</select> sound:<select id=bgmusic><option value=w1.wav>wav1<option value=w2.wav>wav2<option value=w3.wav>wav3<option value=w4.wav>wav4<option value=w5.wav>wav5<option value=w6.wav>wav6<option value="">none</select> <input type=button value=split onclick=mysplit() style='cursor:pointer' > <input type=button value=mix&begin onclick=mix() style='cursor:pointer' > seconds:<input type="text" id=speed value=0 readOnly /> steps:<input type="text" id=count value=0 readOnly /><br><br>
    <div id=new style="width:300px;height:300px;border:10px dashed orange;*width:320px;*height:320px;background-image:url(baby.jpg);float:left"></div>
    <img src=globe.jpg style="width:100px;height:100px;border:7px solid gray;margin-left:20px;cursor:pointer" onmouseover='this.style.border="10px solid gray"' onmouseout='this.style.border="7px solid gray"' onClick="document.getElementById('picurl').value=this.src;document.getElementById('getbtn').click()" />
    <img src=way.png style="width:100px;height:100px;border:7px solid gray;margin-left:20px;cursor:pointer" onmouseover='this.style.border="10px solid gray"' onmouseout='this.style.border="7px solid gray"' onClick="document.getElementById('picurl').value=this.src;document.getElementById('getbtn').click()" />
    <img src=baby.jpg style="width:100px;height:100px;border:7px solid gray;margin-left:20px;cursor:pointer" onmouseover='this.style.border="10px solid gray"' onmouseout='this.style.border="7px solid gray"' onClick="document.getElementById('picurl').value=this.src;document.getElementById('getbtn').click()" />
    <img src=ball.png style="width:100px;height:100px;border:7px solid gray;margin-left:20px;cursor:pointer" onmouseover='this.style.border="10px solid gray"' onmouseout='this.style.border="7px solid gray"' onClick="document.getElementById('picurl').value=this.src;document.getElementById('getbtn').click()" />
    <img src=doctor.jpg style="width:100px;height:100px;border:7px solid gray;margin-left:20px;cursor:pointer" onmouseover='this.style.border="10px solid gray"' onmouseout='this.style.border="7px solid gray"' onClick="document.getElementById('picurl').value=this.src;document.getElementById('getbtn').click()" />
    <div style="clear:both"></div>
    <br>like this:<br>
    <div id=old style="width:300px;height:300px;border:10px dashed orange;*width:320px;*height:320px;background-image:url(baby.jpg);"></div>
    <img id=checkpic src="http://www.shemr.cn/bin/dot.jpg" onload=selpic(this) />
    <script>
    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)
    document.write('<embed src="w1.wav" height="0" width="0" autostart="false" id=music></embed>');
    else
    document.write('<embed src="" height="0" width="0" autostart="false" id=music></embed>');
    if(navigator.userAgent.indexOf('Opera') >= 0)
    document.write('<embed src="" height="0" width="0" autostart="false" id=winner></embed>');
    else
    document.write('<embed src="win.wav" height="0" width="0" autostart="false" id=winner></embed>');
    allwidth=document.getElementById("old").offsetWidth-20;
    allheight=document.getElementById("old").offsetHeight-20;
    document.all&&document.execCommand("BackgroundImageCache", false, true);
    </script>

    分享到:

    历史上的今天: