<!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表情小游戏的更多相关文章

  1. AutoJS 实现QQ小游戏胡莱三国爬塔

    AutoJS 开发文档参考 环境 安卓QQ 胡莱三国小游戏 AutoJS APP 使用方法 安装AutoJs,打开无障碍模式,进入到胡莱三国小游戏,在Autojs中执行脚本 代码 "auto ...

  2. js消除小游戏(极简版)

    js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...

  3. 用 Python 写个消消乐小游戏

    提到开心消消乐这款小游戏,相信大家都不陌生,其曾在 2015 年获得过玩家最喜爱的移动单机游戏奖,受欢迎程度可见一斑,本文我们使用 Python 来做个简单的消消乐小游戏. 很多人学习python,不 ...

  4. 用Python写个开心消消乐小游戏

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 提到开心消消乐这款小游戏,相信大家都不陌生,其曾在 2015 年获得过玩家最喜爱的移动单机游戏奖,受 ...

  5. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  6. 软件工程：黄金G点小游戏1.0

    我们要做的是黄金G点小游戏: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...

  7. QQ表情的发送与接收

    我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...

  8. 软件工程 Android小游戏 猜拳大战

    一.前言 最近学校举办的大学生程序设计竞赛,自己利用课余时间写了一个小游戏,最近一直在忙这个写这个小游戏,参加比赛,最终是老师说自己写的简单,可以做的更复杂的点的.加油 二.内容简介 自己玩过Andr ...

  9. 带你使用h5开发移动端小游戏

    带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...

随机推荐

  1. Using Git subtrees to split a repository

    https://lostechies.com/johnteague/2014/04/04/using-git-subtrees-to-split-a-repository/ We are in a p ...

  2. [51NOD1087]1 10 100 1000(规律，二分)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1087 用高中的数列知识就可以推出公式,不难发现f(n)=f(n ...

  3. python webdriver测试报告

    python webdriver测试报告 即将开始一系列的自动化项目实践,很多公共类和属性都需要提前搞定.今天,解决了测试报告的一些难题,参照了很多博文,最终觉得HTMLTestRunner非常不错, ...

  4. poj 1050(DP)

    最大子矩阵和.类似于子序列最大和. // File Name: 1050.cpp // Author: Missa_Chen // Created Time: 2013年06月22日 星期六 17时0 ...

  5. IE6下margin出现双边距

    在IE6下,块元素有浮动和横向margin的时候,横向的margin值会被放大成两倍 解决方法:添加display:inline; eg:下面的例子在IE6下会有两倍边距 <style> ...

  6. Codeforces 445 A DZY Loves Chessboard【DFS】

    题意:给出n*m的棋盘,在‘.’处放上B或者W,最后要求所有的B和W都不相邻 先把棋盘的点转化成‘B’,再搜,如果它的四周存在‘B’,则将它变成'W' 一直挂在第五个数据的原因是,没有dfs(nx,n ...

  7. UIDevice通知

    UIDevice通知 UIDevice类提供了一个单例对象,它代表着设备,通过它可以获得一些设备相关的信息,比如电池电量值(batteryLevel).电池状态(batteryState).设备的类型 ...

  8. UVa10603 Fill

    解题思路:这是神奇的一题,一定要好好体会.见代码: #include<cstdio> #include<cstring> #include<algorithm> # ...

  9. Android 混合开发 的一些心得。

    其实所谓这个混合开发,也就是hybird,就是一些简单的,html5和native 代码之间的交互.很多电商之类的app里面都有类似的功能, 这种东西其实还是蛮重要的,主要就是你有什么功能都可以进行热 ...

  10. python 对数函数

    from math import logfrom math import e print e #自然对数print log(e) #log函数默认是以e为底print log(100,10) #以10 ...