( 最新版本 ) 飞机大战 欢迎提出建议 (原生JavaScript)为获得最好游戏效果,请选择 全屏浏览

hulan 发布于 07-30 22:38 浏览:24 类型:原创 - 随笔 分类:HTML/CSS - comment 作者原创 版权保护
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>飞机大战</title>
        <style>
            body {
                background: #ffffcc;
                pointer: none;
            }

            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            #content {
                width: 400px;
                height: 620px;
                position: absolute;
                top: 10px;
                left: 400px;
                overflow: hidden;
                box-shadow: 0 0 20px dodgerblue;
            }

            #introduce h1 {
                text-align: center;
                margin-bottom: 20px;
            }

            #introduce {
                width: 300px;
                font-size: 16px;
                line-height: 30px;
                /*  font-weight:bold;*/
                position: absolute;
                top: 50px;
                left: 50px;
            }

            #hidden {
                cursor: pointer;
                text-align: center;
                border-radius: 5px;
                width: 150px;
                height: 40px;
                font-size: 16px;
                line-height: 40px;
                box-shadow: 0 0 20px lightblue;
                background: lightgreen;
                position: absolute;
                left: 100px;
                top: 550px;
            }

            #level {
                width: 400px;
                font-size: 16px;
                line-height: 22px;
                position: absolute;
                top: 35px;
                left: 850px;
            }

            #level h1 {
                text-align: center;
                margin-bottom: 20px;
            }

            #introduce .red {
                color: red;
                font-weight: bold;
            }

            #level .red {
                color: red;
                font-weight: bold;
            }

            #startDiv {
                width: 400px;
                height: 620px;
                background-image: url("http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232009pr5aq8copo2c5722.jpg");
            }

            #startDiv #edition {
                /*margin-left:80px;*/
                width: 400px;
                height: 30px;
                font-size: 22px;
                line-height: 30px;
                position: absolute;
                top: 360px;
                left: 500px;
                color: #333;
            }

            #startDiv #toYou {
                width: 400px;
                height: 30px;
                font-size: 24px;
                line-height: 30px;
                position: absolute;
                /*margin-left:80px;*/
                top: 260px;
                left: -400px;
                color: #333333;
            }

            #startDiv #imgid1 {
                position: absolute;
                top: 660px;
                width: 400px;
                height: 124px;
            }

            #startDiv #imgid2 {
                position: absolute;
                top: 460px;
                left: 120px;
                opacity: 0;
            }

            #startDiv #imgid2:hover {
                border-radius: 5px;
                cursor: pointer;
                box-shadow: 0 0 20px #FF0000;
            }

            #loading {
                background: url("http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232009pr5aq8copo2c5722.jpg");
                width: 400px;
                height: 620px;
                position: absolute;
                color: #333;
            }

            #loading h1 {
                position: absolute;
                left: 100px;
                top: 450px;
            }

            #loading #bar {
                width: 0px;
                height: 10px;
                position: absolute;
                left: 50px;
                top: 550px;
                background: red;
                border-radius: 5px;
            }

            #mainDiv {
                width: 400px;
                height: 620px;
                background-image: url("http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232034ryxb72t7gyt4bgqg.jpg");
                display: none;
                position: absolute;
                /*opacity: 0;*/
            }

            #mainDiv #hp {
                z-index: 10;
                position: absolute;
                top: 10px;
                left: 10px;
                width: 57px;
                height: 34px;
                background: url("http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231855b5grottg8j5t8888.png") no-repeat -602px -223px;
            }

            #mainDiv #wrap {
                z-index: 10;
                width: 148px;
                height: 10px;
                border: 1px solid red;
                box-shadow: 0 0 20px red;
                position: absolute;
                /*border-radius: 3px;*/
                left: 10px;
                top: 50px;
            }

            #mainDiv #hpBar {
                z-index: 10;
                width: 150px;
                height: 10px;
                background: red;
                /*border-radius: 3px;*/
            }

            #mainDiv #score {
                z-index: 10;
                position: absolute;
                top: 15px;
                right: 15px;
                /*-webkit-animation: neon3 1.5s ease-in-out infinite alternate;
                -moz-animation: neon3 1.5s ease-in-out infinite alternate;
                animation: neon3 1.5s ease-in-out infinite alternate;*/
                color: #fff;
                font-size: 24px;
                font-weight: 900;
                text-align: right;
                text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700, 0 0 15px #ffd700, 0 0 20px #ffd700, 0 0 25px #ffd700, 0 0 30px #ffd700, 0 0 50px #ffd700, 0 0 80px #ffd700, 0 0 100px #ffd700, 0 0 150px #ffd700;
            }

            #mainDiv #num {
                z-index: 10;
                position: absolute;
                bottom: 15px;
                right: 15px;
                color: #fff;
                font-size: 20px;
                font-weight: 900;
                text-align: right;
                text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #00f, 0 0 20px #00f, 0 0 25px #00f, 0 0 30px #00f, 0 0 50px #00f, 0 0 80px #00f, 0 0 100px #00f, 0 0 150px #00f;
            }

            #startDiv #btn1 {
                width: 200px;
                height: 40px;
                position: absolute;
                left: 100px;
                top: 450px;
                background: burlywood;
                border: none;
                border-radius: 5px;
                font-size: 20px;
                line-height: 40px;
                opacity: .8;
            }

            #startDiv #btn1:hover {
                background: red;
                color: #fff;
            }
        </style>
        <script type="text/javascript" src="moveUtil.js"></script>
    </head>

    <body>
        <div id="introduce">
            <h1>游戏说明</h1>
            <ul>
                <li>1.点击“开始游戏”按钮,即可进入游戏界面</li>
                                <li class="red">2.鼠标控制飞机移动</li>
                <li>3.按<span class="red">空格键</span>,发射一次子弹.初始子弹总数为 6 颗</li>
                <li class="red">4.当剩余子弹数量为0时,就无法发射子弹!</li>
                <li>5.击落小飞机,需要 1 颗子弹; 击落中飞机,需要 2 颗子弹;击落大飞机,需要 3 颗子弹</li>
                <li>6.打中中飞机,获得 4 颗子弹;打中大飞机,获得 7 颗子弹</li>
                <li class="red">7.越往后的关卡,难度越大,奖励也越丰厚,你敢挑战吗?!</li>
            </ul>
        </div>
        <div id="hidden">隐藏</div>
        <div id="content">
            <div id="startDiv">
                <!--<h1 id="toYou">致世界上唯一的你</h1>-->
                <!--增加浪漫人文情怀-->
                <h1 id="edition">(版本号:0.4.14.1610231055)</h1>
                <img id="imgid1" src="http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231901pqrrmfocrrcoxofi.png">
                <img id="imgid2" src="http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231913n9w4cfcoej4x12gz.png">
            </div>
            <div id="loading">
                <h1>玩命加载中...</h1>
                <div id="bar"></div>
            </div>
            <div id="mainDiv">
                <div id="hp"></div>
                <div id="wrap">
                    <div id="hpBar"></div>
                </div>
                <div id="score">总分:<span id="total">0</span></div>
                <div id="num">剩余子弹数量:<span id="number">6</span></div>
            </div>
        </div>

        <script>
            var img1 = document.getElementById("imgid1");
            var img2 = document.getElementById("imgid2");
            var content = document.getElementById("content");
            var startDiv = document.getElementById("startDiv");
            var loading = document.getElementById("loading");
            var bar = document.getElementById("bar");
            var btn1 = document.getElementById("btn1");
            var mainDiv = document.getElementById("mainDiv");
            var totalScore = document.getElementById("total");
            var number = document.getElementById("number");
            var toYou = document.getElementById("toYou");
            var edition = document.getElementById("edition");
            var hidden = document.getElementById("hidden");
            var show = document.getElementById("show");
            var hpBar = document.getElementById("hpBar");
            var w = 150 //血条长度
            var hide = true;
            var timer;
            var mainDivPositionY = 0;
            var myPlane;
            var arrBullet = [];
            var arrEnemyBullet = [];
            var speedBullet = 50;
            var count = 0;
            var countMain = 0;
            var arrEnemy = [];
            var enemyBig = {
                score: 100,
                speed: 5,
                hp: 3,
                width: 196
            }
            var enemyMiddle = {
                score: 10,
                speed: 7,
                hp: 2
            }
            var enemySmall = {
                score: 1,
                speed: 6,
                hp: 1
            }
            var arrEnemyHpBar = [];
            var arrTen = [1, 2, 3, 4, 5, 6];
            var total = 0;
            var isPause = false;
            var left;

            //游戏初始UI界面
            move(img1, {
                "top": 80
            }, function() {
                move(edition, {
                    "left": 50
                }, function() {
                    move(img2, {
                        "opacity": 100
                    });
                });
            });

            hidden.onclick = function() {
                if(hide) {
                    move(introduce, {
                        "opacity": 0
                    });
                    hide = !hide;
                    hidden.innerHTML = "显示";
                } else {
                    move(introduce, {
                        "opacity": 100
                    });
                    hide = !hide;
                    hidden.innerHTML = "隐藏";
                }
            }

            //点击开始游戏
            img2.addEventListener("click", function() {
                startDiv.style.display = "none";
                loading.style.display = "block";
                createMyPlane();
                moveMyPlane();
                start();
            }, false);

            function moveMyPlane() {
                mainDiv.onmousemove = function(e) {
                    if(!isPause) {
                        var eX = e.clientX - 400 - 60;
                        var eY = e.clientY - 40;
                        myPlane.style.left = eX + "px";
                        myPlane.style.top = eY + "px";
                    }
                }
            }

            mainDiv.onclick = function() {
                isPause = !isPause;
            }

            //start函数,里面是总的定时器
            function start() {
                content.style.cursor = "none";
                clearInterval(timer);
                timer = setInterval(function() {
                    if(!isPause) {
                        if(countMain >= 100) {
                            countMain == 100;
                            loading.style.display = "none";
                            mainDiv.style.display = "block";
                            //move(loading,{"opacity":0})
                            //背景移动
                            mainDiv.style.backgroundPositionY = mainDivPositionY + "px";
                            mainDivPositionY++;
                            //创建子弹,移动子弹
                            count++;
                            moveBullet();
                            //创建敌机,移动敌机
                            createEnemy();
                            moveEnemy();
                            moveEnemyBullet();
                            //碰撞
                            check();
                        } else {
                            bar.style.width = 3 * countMain + "px";
                        }
                        countMain++;
                    }
                }, 30)
            }

            document.onkeydown = function(e) {
                if(arrTen.length > 0) {
                    e = event || window.event;
                    switch(e.keyCode) {
                        case 32:
                            createBullet();
                            break;
                    }
                    arrTen.pop();
                } else {
                    document.onkeydown = null;
                }
                number.innerHTML = arrTen.length;
            }

            //我的飞机  初始化
            function createMyPlane() {
                myPlane = document.createElement("img");
                myPlane.style.borderRadius = "50%";
                                myPlane.style.boxShadow = "0 0 20px #ffd700"
                myPlane.style.width = "120px";
                myPlane.style.height = "80px";
                myPlane.style.position = "absolute";
                myPlane.src = "http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231933xcuc4nvgbak3l36k.png";
                myPlane.style.top = "420px";
                myPlane.style.left = "120px";
                myPlane.style.zIndex = 999;
                mainDiv.appendChild(myPlane);
                return myPlane;
            }

            function createBullet() {
                var bullet = document.createElement("img");
                bullet.style.width = "30px";
                bullet.style.height = "30px";
                //bullet.style.borderRadius = "50%"
                bullet.style.position = "absolute";
                bullet.src = "http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231956buguwjajz7d2a8u5.png"
                bullet.style.top = myPlane.offsetTop + speedBullet - 30 + "px";
                bullet.style.left = myPlane.offsetLeft + 60 - 15 + "px";
                mainDiv.appendChild(bullet);
                arrBullet.push(bullet);
            }

            function createEnemyBullet(left) {
                var enemyBullet = document.createElement("img");
                enemyBullet.style.width = "16px";
                enemyBullet.style.height = "16px";
                enemyBullet.src = "http://cdn.attach.w3cfuns.com/notes/pics/201610/23/100029z16frlld8f1oroii.png"
                enemyBullet.style.position = "absolute";
                //enemyBullet.style.backgroundColor = "red";
                enemyBullet.style.top = 10 + "px";
                enemyBullet.style.left = left + 98 - 10 + "px";
                mainDiv.appendChild(enemyBullet);
                arrEnemyBullet.push(enemyBullet);
            }

            function moveBullet() {
                for(var i = 0; i < arrBullet.length; i++) {
                    arrBullet[i].style.top = arrBullet[i].offsetTop - speedBullet + "px";
                }
                for(var j = 0; j < arrBullet.length; j++) {
                    if(arrBullet[j].offsetTop <= -128) {
                        mainDiv.removeChild(arrBullet[j]);
                        arrBullet.splice(j, 1);
                    }
                }
            }

            function moveEnemyBullet() {
                for(var i = 0; i < arrEnemyBullet.length; i++) {
                    arrEnemyBullet[i].style.top = arrEnemyBullet[i].offsetTop + (enemyBig.speed + 3) + "px";
                }
                for(var j = 0; j < arrEnemyBullet.length; j++) {
                    if(arrEnemyBullet[j].offsetTop >= 660) {
                        mainDiv.removeChild(arrEnemyBullet[j]);
                        arrEnemyBullet.splice(j, 1);
                    }
                }
            }

            function createEnemy() {
                if(count % 320 == 0) {
                    initEnemy(196, 134, "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232003yvvnvh339vhommdi.png) no-repeat -260px -204px", enemyBig.score, enemyBig.speed, enemyBig.hp, "big")
                    for(var i = 0; i < arrEnemy.length; i++) {
                        if(arrEnemy[i].score > 0) {
                            var left = arrEnemy[i].offsetLeft;
                        }
                    }
                    createEnemyBullet(left); //大飞机发射子弹
                }
                if(count % 120 == 0) {
                    initEnemy(100, 78, "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232003yvvnvh339vhommdi.png) no-repeat -266px -475px", enemyMiddle.score, enemyMiddle.speed, enemyMiddle.hp, "middle")
                }
                if(count % 30 == 0) {
                    initEnemy(44, 44, "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232003yvvnvh339vhommdi.png) no-repeat -290px -550px", enemySmall.score, enemySmall.speed, enemySmall.hp, "small")
                }
            }

            function initEnemy(width, height, url, score, speed, hp, style) {
                var enemy = document.createElement("div");
                var hpBar = document.createElement("div");
                //              hpBar.style.width = width/2 + "px";
                //              hpBar.style.height = "5px";
                //              hpBar.style.backgroundColor = "red";
                //              hpBar.style.position = "absolute";
                //              hpBar.style.left = width/4 + "px";
                //              hpBar.style.top = height + 10 + "px"
                enemy.style.borderRadius = "50%";
                enemy.appendChild(hpBar);
                enemy.speed = speed;
                enemy.score = score;
                enemy.hp = hp;
                enemy.sty = style;
                enemy.style.width = width + "px";
                enemy.style.height = height + "px";
                enemy.style.background = url;
                enemy.style.position = "absolute";
                enemy.style.top = -height + "px";
                enemy.style.left = Math.floor(Math.random() * (400 - width)) + "px";
                mainDiv.appendChild(enemy);
                arrEnemy.push(enemy);
                arrEnemyHpBar.push(hpBar);
            }

            function moveEnemy() {
                for(var i = 0; i < arrEnemy.length; i++) {
                    arrEnemy[i].style.top = arrEnemy[i].offsetTop + arrEnemy[i].speed + "px";
                    arrEnemy[i].index--;
                    if(arrEnemy[i].index == 0) {
                        mainDiv.removeChild(arrEnemy[i]);
                        arrEnemy.splice(i, 1);
                    }

                }
                for(var j = 0; j < arrEnemy.length; j++) {
                    if(arrEnemy[j].offsetTop >= 660) {
                        mainDiv.removeChild(arrEnemy[j]);
                        arrEnemy.splice(j, 1);
                        j--;
                    }
                }
            }

            //碰撞
            function check() {
                //子弹和敌机
                for(var i = 0; i < arrBullet.length; i++) {
                    for(var j = 0; j < arrEnemy.length; j++) {
                        if(arrBullet[i].offsetLeft + arrBullet[i].offsetWidth > arrEnemy[j].offsetLeft) {
                            if(arrBullet[i].offsetLeft < arrEnemy[j].offsetLeft + arrEnemy[j].offsetWidth) {
                                if(arrBullet[i].offsetTop < arrEnemy[j].offsetTop + arrEnemy[j].offsetHeight) {
                                    if(arrBullet[i].offsetTop + arrBullet[i].offsetHeight + 10 > arrEnemy[j].offsetTop) {
                                        //var k = j;
                                        arrEnemy[j].hp--;

                                        //arrEnemyHpBar[j].style.width = 10 + "px";
                                        //删除子弹
                                        mainDiv.removeChild(arrBullet[i]);
                                        arrBullet.splice(i, 1);
                                        i--;
                                        if(arrEnemy[j].hp == 0) {

                                            arrEnemy[j].style.background = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/231933g1c3fr816t5dfy1y.png) no-repeat";
                                            arrEnemy[j].index = 5;
                                            //总分增加
                                            total += arrEnemy[j].score;
                                            totalScore.innerHTML = total;
                                            if(total >= 200) {
                                                level2();
                                            }
                                            if(total >= 500) {
                                                level3();
                                            }
                                            if(total >= 1000) {
                                                level4();
                                            }
                                            if(total >= 3000) {
                                                level5();
                                            }
                                            if(total >= 6000) {
                                                level6();
                                            }
                                            if(total >= 10000) {
                                                level7();
                                            }
                                            if(total >= 20000) {
                                                level8();
                                            }
                                                                                        if(total >= 50000) {
                                                level9();
                                            }
                                            if(total >= 100000) {
                                                level10();
                                            }
                                            //打败敌机获得战利品:子弹
                                            if(arrEnemy[j].sty == "big") {
                                                arrTen.push(1, 2, 3, 4, 5, 6, 7);
                                            } else if(arrEnemy[j].sty == "middle") {
                                                arrTen.push(1, 2, 3, 4);
                                            }
                                            number.innerHTML = arrTen.length;
                                        }
                                        break;
                                    }
                                }
                            }
                        }
                    }
                }

                //本机和敌机
                for(var j = 0; j < arrEnemy.length; j++) {
                    if(myPlane.offsetLeft + myPlane.offsetWidth - 10 > arrEnemy[j].offsetLeft) {
                        if(myPlane.offsetLeft + 10 < arrEnemy[j].offsetLeft + arrEnemy[j].offsetWidth) {
                            if(myPlane.offsetTop + 10 < arrEnemy[j].offsetTop + arrEnemy[j].offsetHeight) {
                                if(myPlane.offsetTop + myPlane.offsetHeight - 10 > arrEnemy[j].offsetTop) {
                                    if(arrEnemy[j].sty == "big") {
                                        w -= 35;
                                    } else if(arrEnemy[j].sty == "middle") {
                                        w -= 15;
                                    } else {
                                        w -= 6;
                                    }
                                                                        move(myPlane,{"opacity":0},function(){
                                        move(myPlane,{"opacity":100},function(){
                                        })
                                    })
                                    hpBar.style.width = w + "px";
                                    if(w <= 0) {
                                        gameOver();
                                        hpBar.style.width = 0 + "px";
                                    }
                                }
                            }
                        }
                    }
                }

                //本机和敌方子弹相撞
                for(var j = 0; j < arrEnemyBullet.length; j++) {
                    if(myPlane.offsetLeft + myPlane.offsetWidth > arrEnemyBullet[j].offsetLeft) {
                        if(myPlane.offsetLeft < arrEnemyBullet[j].offsetLeft + arrEnemyBullet[j].offsetWidth) {
                            if(myPlane.offsetTop < arrEnemyBullet[j].offsetTop + arrEnemyBullet[j].offsetHeight) {
                                if(myPlane.offsetTop + myPlane.offsetHeight > arrEnemyBullet[j].offsetTop) {
                                    w -= 5;
                                                                        move(myPlane,{"opacity":0},function(){
                                        move(myPlane,{"opacity":100},function(){
                                        })
                                    })
                                    hpBar.style.width = w + "px"
                                    if(w == 0) {
                                        gameOver();
                                        hpBar.style.width = 0 + "px";
                                    }
                                }
                            }
                        }
                    }

                }
            }

            function level2() {
                mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232034xyyhnae8b9eanng9.jpg)"
                enemySmall.speed = 7;
                enemyMiddle.speed = 9;
                enemyBig.speed = 6;
                enemyBig.score = 120;
                enemyMiddle.score = 12;
                enemySmall.score = 2;
            }

            function level3() {
                mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232039d76m2pl3a8qudj3p.jpg)"
                enemySmall.speed = 8;
                enemyMiddle.speed = 10;
                enemyBig.speed = 6;
                enemyBig.score = 150;
                enemyMiddle.score = 15;
                enemySmall.score = 3;
            }

            function level4() {
                mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232042byk996qgrja63qop.jpg)"
                enemySmall.speed = 9;
                enemyMiddle.speed = 10;
                enemyBig.speed = 7;
                enemyBig.score = 200;
                enemyMiddle.score = 20;
                enemySmall.score = 5;
            }

            function level5() {
                mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232013chyj82jfee2l8sj8.jpg)"
                enemySmall.speed = 9;
                enemyMiddle.speed = 11;
                enemyBig.speed = 8;
                enemyBig.score = 300;
                enemyMiddle.score = 40;
                enemySmall.score = 8;
            }

            function level6() {
                mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232034ryxb72t7gyt4bgqg.jpg)"
                enemySmall.speed = 10;
                enemyMiddle.speed = 12;
                enemyBig.speed = 9;
                enemyBig.score = 500;
                enemyMiddle.score = 60;
                enemySmall.score = 12;
            }

            function level7() {
                mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232034xyyhnae8b9eanng9.jpg)"
                enemySmall.speed = 11;
                enemyMiddle.speed = 13;
                enemyBig.speed = 9;
                enemyBig.score = 700;
                enemyMiddle.score = 80;
                enemySmall.score = 17;
            }

            function level8() {
                mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232039d76m2pl3a8qudj3p.jpg)"
                enemySmall.speed = 12;
                enemyMiddle.speed = 13;
                enemyBig.speed = 10;
                enemyBig.score = 1000;
                enemyMiddle.score = 120;
                enemySmall.score = 23;
            }

                        function level9() {
                mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232042byk996qgrja63qop.jpg)"
                enemySmall.speed = 13;
                enemyMiddle.speed = 14;
                enemyBig.speed = 11;
                enemyBig.score = 1501;
                enemyMiddle.score = 150;
                enemySmall.score = 29;
            }
            function level10() {
                mainDiv.style.backgroundImage = "url(http://cdn.attach.w3cfuns.com/notes/pics/201610/22/232013chyj82jfee2l8sj8.jpg)"
                enemySmall.speed = 13;
                enemyMiddle.speed = 15;
                enemyBig.speed = 12;
                enemyBig.score = 2002;
                enemyMiddle.score = 201;
                enemySmall.score = 40;
            }

            function gameOver() {
                clearInterval(timer);
                mainDiv.onmousemove = null;
                alert("游戏结束,刷新界面重新开始游戏")
            }

            function move(element, target, fn) {
                clearInterval(element.timer); //一定要注意,刚开始就要清定时器!!!
                element.timer = setInterval(function() {
                    var isComplete = true;
                    for(var attr in target) {
                        if(attr == 'opacity') {
                            var current = Math.round(parseFloat(getstyle(element, attr)) * 100);
                        } else {
                            var current = Math.round(parseFloat(getstyle(element, attr)));
                        }
                        if(!current) {
                            current = 0;
                        }
                        var speed = (target[attr] - current) / 10;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        if(current != target[attr]) {
                            element.style[attr] = current + speed + "px";
                            isComplete = false;
                            if(current != target[attr]) {
                                if(attr == 'opacity') {
                                    //关于透明度的一个兼容
                                    //ie 如果是ie,就直接用就行
                                    element.style[attr] = 'alpha(opacity:' + parseInt(current + speed) + ')'; //加current的原因:有一个渐变的过程
                                    //其他浏览器 如果是其他浏览器,还需要除以100
                                    element.style[attr] = (current + speed) / 100;
                                } else {
                                    element.style[attr] = current + speed + "px";
                                }
                            }
                        }
                    }
                    if(isComplete) {
                        clearInterval(element.timer);
                        if(fn) {
                            fn();
                        }
                    }
                }, 30)
            }

            //获得当前的样式的值
            function getstyle(dom, name) {
                if(dom.currentStyle) {
                    return dom.currentStyle[name];
                } else {
                    return window.getComputedStyle(dom, false)[name];
                }
            }
        </script>

    </body>

</html>

 

标签:
z
给个赞 10 人点赞
收藏 0 人收藏
hulan 作者

这家伙什么都没留下

作者最新