• 判断类型JS写怀旧小游戏系列(七)吃方块


    新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正

        每日一道理
    冰心说道:“爱在左,同情在右,走在性命的两旁,随时撒种,随时开花,将这一径长途,点缀得香花弥漫,使穿枝拂叶的行人,踏着荆棘,不觉得痛苦,有泪可落,却不是悲凉。”
    <!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>
            <title>dush</title>
            <script type="text/javascript">
                var xyNum=20; //敌方数量
                var arrXY=new Array(); //用组数录记敌方
                var myObjII;  //我自己表面的div
                var myObjI; //我自己
                var mapobj; //舆图对象
     
                //制控窗体置位
                function formPosition()
                {
                    var w=getMapObj().style.width.replace("px","")-0;
                    var clientw=document.body.clientWidth;
             
                    getMapObj().style.left=(clientw-w)/2+"px";
                    document.getElementById("fbid").style.left=(clientw-w)/2+"px";
                    document.getElementById("gzid").style.left=(clientw-w)/2+"px";
                }
                 
                function getMapObj()
                {
                    if(mapobj==null)
                        mapobj=document.getElementById("mapid");
                    return mapobj;
                }
                 
                //建创敌方
                function createYu()
                {
                    for(var i=0;i<xyNum;i++)
                    {
                        var xyObj=document.createElement("div");
                        arrXY[i]=xyObj;
                         
                        var sx=randomZL().split("*");
                         
                        xyObj.qdy=0; //当朋友比我壮大时,朋友向我近靠
                        xyObj.tp=sx[3]; //朋友类型
                        xyObj.sdx=getRandom(10); //朋友向左动移的速度
                        xyObj.sdy=0; //朋友向上动移的速度
                        xyObj.style.position="absolute";
                        xyObj.style.left=getMapWidth()+"px";
                        xyObj.style.top=getRandom(getMapHeight())+"px";
                        xyObj.style.width=sx[0];
                        xyObj.style.height=sx[1];
                        xyObj.style.border="white solid 1px";
                        xyObj.style.filter="alpha(opacity=80)";
                        xyObj.style.opacity=0.8;
                        xyObj.style.backgroundColor=sx[2];
                     
                        getMapObj().appendChild(xyObj);
                    }
                     
                    createMyYu();
                    moveYu();
                }
     
                //随机朋友类型
                function randomZL()
                {
                    var zl=getRandom(10);
     
                    var w=""; //朋友的宽
                    var h=""; //高
                    var color=""; //颜色
                    var tp=""; //类型
     
                    if(zl>=1 && zl<=3)
                    {
                        w="20px";
                        h="20px";
                        color="cyan";
                        tp="1"; //朋友类型,1最小,顺次类推
                    }
                    else if(zl==4 || zl==5)
                    {
                        w="40px";
                        h="40px";
                        color="yellow";
                        tp="2";
                    }
                    else if(zl==6 || zl==7)
                    {
                        w="60px";
                        h="60px";
                        color="gray";
                        tp="3";
                    }
                    else if(zl==8)
                    {
                        w="80px";
                        h="80px";
                        color="black";
                        tp="4";
                    }
                    else 
                    {
                        w="20px";
                        h="20px";
                        color="red";
                        tp="5";  //tp=5 为补性命值
                    }
     
                    return w+"*"+h+"*"+color+"*"+tp;
                }
     
                //建创我自己
                function createMyYu()
                {   
                    //建创我自己表面的div,用于判断朋友是不是在我近附
                    myObjII=document.createElement("div");
                         
                    myObjII.style.position="absolute";
                    myObjII.style.left="0px";
                    myObjII.style.top="0px";
                    myObjII.style.width="120px";
                    myObjII.style.height="120px";
                    myObjII.style.backgroundColor="";//
                     
                    getMapObj().appendChild(myObjII);
                     
                    //建创我自己追随标鼠动移的div
                    myObjI=document.createElement("div");
                         
                    myObjI.style.position="absolute";
                    myObjI.style.left="0px";
                    myObjI.style.top="0px";
                    myObjI.style.width="20px";
                    myObjI.style.height="20px";
                    myObjI.tp="1";
                    myObjI.style.backgroundColor="blue";
                    myObjI.style.border="white solid 1px";
                     
                    getMapObj().appendChild(myObjI);
                }
                 
                //取获某个值下的随机数
                function getRandom(maxval)
                {
                    var sj=parseInt(Math.random()*maxval);
                    if(sj==0)
                        sj=1;
     
                    return sj;
                }
     
                //朋友动移
                function moveYu()
                {
                    for(var i=0;i<arrXY.length;i++)
                    {
                        //朋友向左动移
                        arrXY[i].style.left=getObjWaH(arrXY[i],"left")-arrXY[i].sdx+"px";
                         
                        //朋友向上动移
                        if(getObjWaH(arrXY[i],"top")<=getMapHeight()/2)
                            arrXY[i].style.top=getObjWaH(arrXY[i],"top")-arrXY[i].sdy+"px";
                        else
                            arrXY[i].style.top=getObjWaH(arrXY[i],"top")+arrXY[i].sdy+"px";
                         
                        //当朋友比我壮大时,朋友向我近靠
                        arrXY[i].style.top=getObjWaH(arrXY[i],"top")+arrXY[i].qdy+"px";
                         
                        //朋友从舆图中消逝
                        if(getObjWaH(arrXY[i],"left")<0 || getObjWaH(arrXY[i],"top")<0 || getObjWaH(arrXY[i],"top")>getMapHeight())
                        {
                            resetMove(arrXY[i]);
                        }
                         
                        //判断朋友是不是在我近附
                        if(isChongDie(myObjII,arrXY[i]))
                        {
                            if(myObjI.tp-0>=arrXY[i].tp-0) //比对方壮大时,朋友逃跑
                                arrXY[i].sdy=10; 
                            else if(arrXY[i].tp-0!=5) //比对方弱小时,朋友向我近靠
                            {
                                if(getObjWaH(myObjI,"top")<getObjWaH(arrXY[i],"top"))
                                {
                                    if(arrXY[i].qdy==0) 
                                        arrXY[i].qdy=-10; //向上近靠
                                }
                                else
                                {
                                    if(arrXY[i].qdy==0)
                                        arrXY[i].qdy=10; //向下近靠
                                }
                            }
                        }
                        else //不在我近附时,还原值
                            arrXY[i].qdy=0;
                         
                        //判断是不是吃掉对方,或被对方吃掉
                        if(isChongDie(myObjI,arrXY[i]))
                        {
                            //吃掉对方
                            if(myObjI.tp-0>=arrXY[i].tp-0) 
                            {
                                 
                                var _szz=0;
                                if(arrXY[i].tp=="1")
                                    _szz=10;
                                else if(arrXY[i].tp=="2")
                                    _szz=15;
                                else if(arrXY[i].tp=="3")
                                    _szz=20;
                                else if(arrXY[i].tp=="4")
                                    _szz=25;
     
                                var nowszz=getObjWaH(document.getElementById("szz"),"width")+_szz;
                                if(nowszz>=500) //长大一级
                                {
                                    if(myObjI.tp-0<5)
                                    {
                                        myObjI.tp=myObjI.tp-0+1;
                                        myObjI.style.width=getObjWaH(myObjI,"width")+20+"px"
                                        myObjI.style.height=getObjWaH(myObjI,"height")+20+"px"
                                         
                                        document.getElementById("szz").style.width="10px";
                                    }
                                    else
                                    {
                                        alert("哈哈...顺我者昌逆我者亡!");
                                        window.location.href=window.location.href;
                                    }
                                }
                                else
                                {
                                    document.getElementById("szz").style.width=nowszz+"px";
                                    document.getElementById("szz").innerHTML=nowszz;
                                }
     
                                resetMove(arrXY[i]);
                            }
                            else if(arrXY[i].tp-0==5)//吃到性命值
                            {
                                var nowsmz=getObjWaH(document.getElementById("smz"),"width")+50;
                                if(nowsmz>=500)
                                    document.getElementById("smz").style.width="500px";
                                else
                                    document.getElementById("smz").style.width=nowsmz+"px";
                                 
                                document.getElementById("smz").innerHTML=document.getElementById("smz").style.width.replace("px","");
     
                                resetMove(arrXY[i]);
                            }
                            else //被对方吃掉
                            {
                                var _smz=0;
                                if(arrXY[i].tp=="1")
                                    _smz=10;
                                else if(arrXY[i].tp=="2")
                                    _smz=20;
                                else if(arrXY[i].tp=="3")
                                    _smz=50;
                                else if(arrXY[i].tp=="4")
                                    _smz=100;
     
                                var nowsmz=getObjWaH(document.getElementById("smz"),"width")-_smz;
                                if(nowsmz<=0) //
                                {   
                                    document.getElementById("smz").style.width="0px";
                                    document.getElementById("smz").innerHTML="0";
     
                                    alert("over");
                                    window.location.href=window.location.href;
                                }
                                else
                                {
                                    document.getElementById("smz").style.width=nowsmz+"px";
                                    document.getElementById("smz").innerHTML=nowsmz;
                                }
                            }
                        }
                    }
     
                    setTimeout(moveYu,50);
                }
     
                //朋友从舆图中消逝时重置
                function resetMove(yuobj)
                {
                    var sx=randomZL().split("*");
     
                    yuobj.tp=sx[3];
                    yuobj.sdx=getRandom(10);
                    yuobj.sdy=0;
                    yuobj.style.width=sx[0];
                    yuobj.style.height=sx[1];
                    yuobj.style.backgroundColor=sx[2];
                    yuobj.style.left=getMapWidth()+"px";
                    yuobj.style.top=getRandom(getMapHeight())+"px";
                }
             
                function getMapWidth()
                {
                    return getMapObj().style.width.replace("px","")-0;
                }
                function getMapHeight()
                {
                    return getMapObj().style.height.replace("px","")-0;
                }
                function getMapTop()
                {
                    return getMapObj().style.top.replace("px","")-0;
                }
                function getMapLeft()
                {
                    return getMapObj().style.left.replace("px","")-0;
                }
     
                function getObjWaH(obj,wah)
                {
                    return obj.style[wah].replace("px","")-0;
                }
     
                //追随标鼠动移的div(我自己)
                function mouseMove(e)
                {
                    var myObjIleft=e.clientX-getMapLeft()-getObjWaH(myObjI,"width")/2;
                    if(myObjIleft<0)
                        myObjIleft=0;
                    if(myObjIleft>getMapWidth()-getObjWaH(myObjI,"width"))
                        myObjIleft=getMapWidth()-getObjWaH(myObjI,"width");
     
                    myObjI.style.left=myObjIleft+"px";
     
                    var myObjIIleft=e.clientX-getMapLeft()-getObjWaH(myObjII,"width")/2;
                    if(myObjIIleft<0)
                        myObjIIleft=0;
                    if(myObjIIleft>getMapWidth()-getObjWaH(myObjII,"width"))
                        myObjIIleft=getMapWidth()-getObjWaH(myObjII,"width");
     
                    myObjII.style.left=myObjIIleft+"px";
                     
                    var myObjItop=e.clientY-getMapTop()-getObjWaH(myObjI,"height")/2;
                    if(myObjItop<0)
                        myObjItop=0;
                    if(myObjItop>getMapHeight()-getObjWaH(myObjI,"height"))
                        myObjItop=getMapHeight()-getObjWaH(myObjI,"height");
     
                    myObjI.style.top=myObjItop+"px";
     
                    var myObjIItop=e.clientY-getMapTop()-getObjWaH(myObjII,"height")/2;
                    if(myObjIItop<0)
                        myObjIItop=0;
                    if(myObjIItop>getMapHeight()-getObjWaH(myObjII,"height"))
                        myObjIItop=getMapHeight()-getObjWaH(myObjII,"height");
     
                    myObjII.style.top=myObjIItop+"px";
                }
                 
                //判断敌我方双是不是撞碰在一起,道理:利用两个圆的圆心距离之和是不是小于两个圆的半径之和
                function isChongDie(obj1,obj2)
                {
                    var obj1left=getObjWaH(obj1,"left")+getObjWaH(obj1,"width")/2;
                    var obj2left=getObjWaH(obj2,"left")+getObjWaH(obj2,"width")/2;
     
                    var obj1top=getObjWaH(obj1,"top")+getObjWaH(obj1,"width")/2;
                    var obj2top=getObjWaH(obj2,"top")+getObjWaH(obj2,"width")/2;
     
                    var jl=Math.sqrt(Math.abs(obj1left-obj2left)*Math.abs(obj1left-obj2left)+Math.abs(obj1top-obj2top)*Math.abs(obj1top-obj2top));
     
                    if(jl<=getObjWaH(obj1,"width")/2+getObjWaH(obj2,"width")/2)
                        return true;//重叠
                    else
                        return false;
                }
     
            </script>
        </head>
    <body onload="formPosition(),createYu()" onresize="formPosition()" style="font-size:10pt">
            <div id="fbid" style="position:absolute;left:0px;top:10px;795px;height:45px;background-color:rgb(223,223,223);padding-left:5px;border:black solid 1px">
                <table>
                    <tr>
                        <td>性命值:</td>
                        <td><div id="smz" style="500px;height:15px;background-color:red;color:white;font-weight:bold" align="center">500</div></td>
                    </tr>
                    <tr>
                        <td>长生值:</td>
                        <td><div id="szz" style="10px;height:15px;background-color:blue;color:white;font-weight:bold" align="center">0</div></td>
                    </tr>
                </table>
            </div>
            <div id="mapid" style="position:absolute;left:0px;top:60px;800px;height:400px;background-color:rgb(223,223,223);overflow:hidden;border:black solid 1px" 
    
    onmousemove="mouseMove(event)">
            </div>
            <div id="gzid" style="position:absolute;left:0px;top:465px;795px;height:45px;background-color:rgb(223,223,223);padding-left:5px;padding-top:5px;border:black solid 
    
    1px;color:red;line-height:20px">
                *游戏规则:动移标鼠吃方块,你只能吃跟你样同小大或比你小的方块,当你的长生值达到500时,你自己的方块会变大一级,<br>
                当性命值成变0时,Game Over!游戏中的色红小方块就是给你补性命值的。
            </div>
        </body>
    </html>

    文章结束给大家分享下程序员的一些笑话语录: Bphone之你们聊,我先走了!移动说:我在phone前加o,我叫o缝;苹果说:我在phone前i,我是i缝;微软说:我在phone前加w,我叫w缝;三星说:你们聊,我先走了!
    将来王建宙写回忆录的时候,一定要有一句“常小兵为中国移动的发展做出了不可磨灭的贡献”。

  • 相关阅读:
    Spring4+SpringMVC+MyBatis登录注册详细
    Spring MVC登录注册以及转换json数据
    MyBatis+mysql查询和添加数据
    html5中的选择器
    倒影(转)
    bi包
    函数作用域
    节点开始
    window.onload中失效的问题
    Node.js简介
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3047708.html
Copyright © 2020-2023  润新知