消除QQ表情小游戏

时间：2014-12-30 21:54:09 阅读：260 评论：0 收藏：0 [点我收藏+]

标签：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style>
*{
    padding:0px;
    margin:0px;
    font-family:"微软雅黑";}
body{
    background:#f1f1f1;
    font-family:"微软雅黑";
    font-size:16px;
    }
#info{
    text-align:center;
    }
#box{
    width: 800px;
    height: 450px;
    border: 1px solid #066;
    background: none repeat scroll 0% 0% #FFF;
    margin: 20px auto 0px;
    position: relative;
    top: 0px;
    left: 0px;
    }    
#left{
    width:130px;
    border:1px solid #066;
    position:relative;
    top:-1px;
    left:-152px;
    background:#ffc;
    padding:10px;
    }
#left p{
    font-size:16px;
    line-height:30px;
    }
#qq{
    position:absolute;
    top:0px;
    left:0px;
    width:800px;
    height:450px;
    
    }                
</style>
<script type="text/javascript" src="float.js">
</script>
<script type="text/javascript">
window.onload = function()
{
    var obtn = document.getElementById(‘info‘).getElementsByTagName("input")[0];
    var oqq = document.getElementById(‘qq‘); 
    var obox = document.getElementById(‘box‘);
    var ascore = obox.getElementsByTagName(‘p‘);
    var score1 = score2 = 0;
    var speed = 1;
    var arr = [‘img/icon1.png‘, ‘img/icon2.png‘, ‘img/icon3.png‘, ‘img/icon4.png‘, ‘img/icon5.png‘];
    
    obtn.onclick = function ()
    {
        this.value = ‘正在游戏...‘;
        this.style.opacity = ‘1‘;
        this.disabled = ‘disabled‘;
        
        fnqq();
        function fnqq()
        {
            creat();
            drop(fnqq);
        };
        
        function init()
        {
            obtn.value = ‘开始游戏‘;
            obtn.style.opacity = ‘1‘;
            obtn.disabled = ‘‘;
            oqq.innerHTML = ‘‘;
            speed = 1;
            score1 = score2 = 0;
        };
        
        function check()
        {
            if( score1 == 25 )
            {
                alert(‘恭喜！‘);
                init();
                return true;
            }
            if( score2 == 5 )
            {
                alert(‘真遗憾！‘)
                init();
                return true;
            }
        };
        
        function creat()
        {
            oqq.innerHTML = ‘<img style = "position: absolute; top: 0; left: ‘ + Math.round(Math.random() * 776) + ‘px" src = "‘ + arr[Math.round(Math.random() * (arr.length - 1))]+ ‘ "/>‘;
        }
        
        function drop(fnend)
        {
            var icon = oqq.getElementsByTagName(‘img‘)[0];
            speed += 0.8;
            domove(icon,‘top‘,speed,50,426,function()
            {
                oqq.innerHTML = ‘‘;
                score2++;
                ascore[1].innerHTML = ‘失分‘ + score2 + ‘分‘;
                shake(obox,‘top‘,function()
                {
                    if(check())
                    {
                        return;
                    }
                    fnend&&fnend();
                })
            })
            
            icon.onmouseover = function ()
            {
                clearInterval(icon.timer);
                icon.src = ‘img/icon6.png‘;
                shake(icon,‘left‘,function()
                {
                    oqq.innerHTML = ‘‘;
                    score1++;
                    ascore[0].innerHTML = ‘得分‘ + score1 + ‘分‘;
                    if(check())
                    {
                        return;
                    }
                    fnend&&fnend();
                })
            }
        }
    }
}
</script>
</head>

<body>
<div id="info">
    <h2>你的鼠标有多快</h2>
    <p>游戏说明：点击“开始游戏”，随机掉下QQ表情，把鼠标划上去，千万别让它掉下去！！<br>
    划掉25个算你赢；掉下5个算你输 :)</p>
    <input type="button" value="开始游戏"></input>
</div>
<div id="box">
    <div id="left">
        <p>得分：0 分</p>
        <p>失分：0 分</p>
    </div>
    <div id="qq"></div>
</div>
</body>
</html>

function getstyle(obj,attr)
{
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}


function domove (obj,attr,step,frequency,target,endfn)
{
    step = parseInt(getstyle(obj,attr))<target?step:-step;
    clearInterval(obj.timer);
    obj.timer = setInterval( function ()
    {
        var speed = parseInt(getstyle(obj,attr)) + step;
        if(step>0&&speed>target||step<0&&speed<target)
        {
            speed = target;
        }
        obj.style[attr] = speed + ‘px‘;
        if( speed == target )
        {
            clearInterval(obj.timer);
            endfn&&endfn();
        }
    },frequency); 
};

function opacity(obj,step,target,frequency,endfn)
{
    var currentOpacity = getstyle(obj,‘opacity‘) * 100;
    step = currentOpacity < target?step:-step;
    clearInterval(obj.opacity)
    obj.opacity = setInterval (function ()
    {
        currentOpacity = getstyle(obj,‘opacity‘) *100;
        var nextOpacity = currentOpacity + step;
        if(step>0&& nextOpacity>target || step<0&& nextOpacity < target )
        {
            nextOpacity = target;
        }
    obj.style.opacity = nextOpacity/100;
    obj.style.filter = ‘alpha(opacity:)‘ + nextOpacity +‘)‘;
    if(nextOpacity == target )
    {
        clearInterval(obj.opacity);
        endfn&&endfn();
    }    
    },frequency);
    
    
};

function shake(obj,attr,endfn)
{
    if( obj.shaked ) { return;  }
    obj.shaked = true;
    
    var num = 0;
    var timer = null;
    var arr = [];
    var pos = parseInt(getstyle(obj,attr));
    
    for( var i = 20; i > 0; i-=2 )
    {
        arr.push(i,-i);
    }
    arr.push(0);
    
    clearInterval(obj.shake);
    obj.shake = setInterval(function ()
    {
        obj.style[attr] = pos + arr[num] +‘px‘;
        num++;
        if(num==arr.length)
        {
            clearInterval(obj.shake);
            endfn&&endfn();
            obj.shaked = false;
        }
    },50);
};

消除QQ表情小游戏

标签：

原文地址：http://www.cnblogs.com/mayufo/p/4194513.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行