js植物大战僵尸实训2

此部分是太阳收集（可以通过改变flag来改版本，vip自动收集和普通用户版），效果图，最后为等待一段时间效果图
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>植物大战僵尸Javascript版 -- 收集阳光</title> 
<style type="text/css"> 
*{margin:0px;padding:0px;font-family: 宋体; font-size: 12px} 
.WindowFrame{position:absolute;width:900px;height:600px;overflow: hidden;border:3px outset/*边框突出*/ ;}
#tGround {position:absolute;width:1400px;height:600px;visibility:visible;z-index:0;background:url('images/interface/background1unsodded.jpg') -115px 0px no-repeat;}
#sod{position: absolute; height: 117px; width: 770px; top: 280px; left: 132px; z-index: 1; background-image: url( ./images/interface/sod1row.png); background-position: 0px 0px; background-repeat: no-repeat;}
#dTop{position: absolute; left: 105px; top: 0px; height: 35px; width: 123px; visibility: visible; z-index: 1;}
#dSunNum{background:url('images/interface/SunBack.png') no-repeat;position:absolute;width:123px;height:35px}
#sSunNum{text-align:center;position:absolute;top:4px;left:43px;width:68px;font-family:Verdana;font-weight:bold;font-size:22px;}
</style> 
<script type="text/javascript">
	window.onload = function () {
        var flag=true;//true为vip版的，flase为普通玩家版
        var odall = document.getElementById("dAll");

        setInterval(fn,5000);
        function fn() {
            var sun = document.createElement("img");//
            sun.src = "images/interface/Sun.gif";
            sun.style.cursor = "pointer";
            sun.style.position = "absolute";
            sun.style.zIndex = "25";
            sun.style.opacity = "0.8";
            sun.style.height = "78px";
            sun.style.width = "78px";
            //sun.style.top = "78px";在下面设置top后不需要

            sun.style.left = Math.random() * (900 - 78) + "px";
            var down = Math.random() * (600 - 78);//设置停止位置时，用于值的比较不要加单位
            odall.appendChild(sun);

            var x = 0;//设置太阳偏移值
            var sunTimer = setInterval(function () {
                sun.style.top = x + "px";//设置太阳的默认值上边界为0
                if (sun.offsetTop >= down) {
                    clearInterval(sunTimer);//停止计时
                    sunTimer=null;
                    setTimeout(function () {
                        if(flag){//判断是什么版本，vip版3秒后收集，普通版3秒后消失
                            sun.onclick();//调用点击收集函数（不用点击触发）
                        }
                        else
                        {
                            odall.removeChild(sun);
                        }
                    }, 3000);
                }
                x = x + 1;//每隔20毫秒移动1个像素
                sun.onclick = function () {//太阳倾斜移动到收集区域，让太阳停止向下运动
                    clearInterval(sunTimer);
                    sunTimer = null;
                    var a = sun.offsetLeft - 80;//先求a边，再求b，通过勾股定理求c
                    var b = sun.offsetTop + 20//太阳要运动到的位置（80，-20）
                    var c = Math.sqrt((a * a) + (b * b));
                    var speedX = a / c;//x轴移动
                    var speedY = b / c;//y轴移动
                    setInterval(function () {//太阳将会在记分牌处停留1秒
                        sun.style.left = (sun.offsetLeft - speedX * 20) + "px";
                        sun.style.top = (sun.offsetTop - speedY * 20) + "px";
                        if (sun.offsetLeft <= 80 || sun.offsetTop <= -20) {//判断是否超出（80，-20），超出将停止倾斜
                            sun.style.left = 80 + "px";
                            sun.style.top = -20 + "px";
                            setTimeout(function () {
                                odall.removeChild(sun);//消失
                                var score = document.getElementById("sSunNum");
                                var num = parseInt(score.innerHTML);//记分牌那里是字符串，要加必须先变成整型
                                if (num < 9999) {
                                    num = num + 25;//如不转化为整型，那么+相当于字符串连接
                                    score.innerHTML = num;
                                }
                            }, 1000);
                        }
                    }, 20);
                }
            }, 20);
        }
	}
</script>


</head>  
<body id="dBody"   bgcolor="#008080">   
<!--主界面EDAll-->
<div class="WindowFrame" id="dAll" style="position:absolute;top:0;width:900px;background:#000">
	<!--背景图片-->
	<div id="tGround"></div> 
    <!--草地背景-->
    <div id="sod"></div>
    <!--分数牌-->
    <div id="dTop">
        <div id="dSunNum"> 
            <span id="sSunNum">175</span>
        </div> 
    </div>  
</div>  
</body>
</html>
js植物大战僵尸实训2

猜你喜欢
