/*
创建子弹
*/
    if(%5==0){
            bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+31,parseInt(selfplan.imagenode.style.top)-10));
    }/*
移动子弹
*/
    var bulletslen=bullets.length;
    for(var i=0;i<bulletslen;i++){
        bullets[i].bulletmove();
/*
如果子弹超出边界,删除子弹
*/
        if(bullets[i].bulletimage.offsetTop<0){
            mainDiv.removeChild(bullets[i].bulletimage);
            bullets.splice(i,1);
            bulletslen--;
        }
    }/*
碰撞判断
*/
    for(var k=0;k<bulletslen;k++){
        for(var j=0;j<enemyslen;j++){
            //判断碰撞本方飞机
            if(enemys[j].planisdie==false){
                if(enemys[j].imagenode.offsetLeft+enemys[j].plansizeX>=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){
                  if(enemys[j].imagenode.offsetTop+enemys[j].plansizeY>=selfplan.imagenode.offsetTop+40&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-20+selfplan.plansizeY){
                      //碰撞本方飞机,游戏结束,统计分数
                      selfplan.imagenode.src="image/本方飞机爆炸.gif";
                      enddiv.style.display="block";
                      planscore.innerHTML=scores;
                      if(document.removeEventListener){
                          mainDiv.removeEventListener("mousemove",yidong,true);
                          bodyobj.removeEventListener("mousemove",bianjie,true);
                      }
                      else if(document.detachEvent){
                          mainDiv.detachEvent("onmousemove",yidong);
                          bodyobj.removeEventListener("mousemove",bianjie,true);
                      }
                      clearInterval(set);
                  }
                }
                //判断子弹与敌机碰撞
                if((bullets[k].bulletimage.offsetLeft+bullets[k].bulletsizeX>enemys[j].imagenode.offsetLeft)&&(bullets[k].bulletimage.offsetLeft<enemys[j].imagenode.offsetLeft+enemys[j].plansizeX)){
                    if(bullets[k].bulletimage.offsetTop<=enemys[j].imagenode.offsetTop+enemys[j].plansizeY&&bullets[k].bulletimage.offsetTop+bullets[k].bulletsizeY>=enemys[j].imagenode.offsetTop){
                        //敌机血量减子弹攻击力
                        enemys[j].planhp=enemys[j].planhp-bullets[k].bulletattach;
                        //敌机血量为0,敌机图片换为爆炸图片,死亡标记为true,计分
                        if(enemys[j].planhp==0){
                            scores=scores+enemys[j].planscore;
                            scorelabel.innerHTML=scores;
                            enemys[j].imagenode.src=enemys[j].planboomimage;
                            enemys[j].planisdie=true;
                        }
                        //删除子弹
                        mainDiv.removeChild(bullets[k].bulletimage);
                            bullets.splice(k,1);
                            bulletslen--;
                            break;
                    }
                }
            }
        }
    }
}
/*
开始游戏按钮点击事件
 */
var set;
function begin(){    startdiv.style.display="none";
    mainDiv.style.display="block";
    selfplan.imagenode.style.display="block";
    scorediv.style.display="block";
    /*
     调用开始函数
     */
    set=setInterval(start,20);
}
//游戏结束后点击继续按钮事件
function jixu(){
    location.reload(true);
}/*
    完成界面的初始化
    敌方小飞机一个
    我方飞机一个
 */

解决方案 »

  1.   

    <!DOCTYPE HTML>
    <html>
    <head><meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />    <title>打灰机</title>
        <meta http-equiv="content" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
    </head><body>
    <div id="contentdiv" >
        <div id="startdiv">
            <button onclick="begin()">开始游戏</button>
        </div>
        <div id="maindiv">
            <div id="scorediv">
                <label>分数:</label>
                <label id="label">0</label>
            </div>
            <div id="suspenddiv">
                <button>继续</button><br/>
                <button>重新开始</button><br/>
                <button>回到主页</button>
            </div>
            <div id="enddiv">
                <p class="plantext">您打灰机分数</p>
                <p id="planscore">0</p>
                <div><button onclick="jixu()">继续</button></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
    </body>
    </html>
      

  2.   

    css 里的    #contentdiv      left: 500px;  才可以玩  
    我非常的不理解
    left: 500px;了就在屏幕中间
    我用手机访问 就画面变的好小了,没有办法 手机触摸玩如果把  left: 0px;  就电脑上也没有办法玩
      

  3.   


    *{
        margin:auto 0;
        padding: 0;
    color:#FFF
    }
    #contentdiv{
        position: absolute;
        margin:auto 0;
     height: 568px;
    }
    #startdiv{
        width: 320px;
        height: 568px;
    margin:auto 0;
        background-image: url(../image/开始背景.png);
    }
    button{
        outline: none;
    margin:auto 0;
    }
    #startdiv button{
        position: absolute;
        top: 450px;
        left: 82px;
        width: 150px;
        height: 30px;
        border: 1px solid black;
        border-radius: 30px;
        background-color: #ff0000;
    }
    #maindiv{
        width: 320px;
        height: 568px;
        background-image:url(../image/background_1.png) ;
        display: none;
    }
    #maindiv img{
        position: absolute;
        z-index: 1;
    }
    #scorediv{
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        top: 10px;
        left: 10px;
        display: none;
    }
    #scorediv{
        font-size: 18px;
        font-weight: bold;
    }
    #suspenddiv{
        position: absolute;
        top: 210px;
        left: 82px;
        display: none;
        z-index: 2;
    }
    #suspenddiv button{
        width: 150px;
        height: 30px;
        margin-bottom: 20px;
        border: 1px solid black;
        border-radius: 30px;
        background-color: #000;
    }
    #enddiv{
        position: absolute;
        top: 210px;
        left: 75px;
        border: 1px solid gray;
        border-radius: 5px;
        text-align: center;
        background-color:#ff0000;
        display: none;
        z-index: 2;
    }
    .plantext{
        width: 160px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        font-weight: bold;
    }
    #planscore{
        width: 160px;
        height: 80px;
        line-height: 80px;
        border-top: 1px solid gray;
        border-bottom: 1px solid gray;
        font-size: 16px;
        font-weight: bold;
    }
    #enddiv div{
        width: 160px;
        height: 50px;
    }
    #enddiv div button{
        margin-top:10px ;
        width: 90px;
        height: 30px;
        border: 1px solid gray;
        border-radius: 30px;
    }