消除QQ表情小游戏
<!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表情小游戏的更多相关文章
- AutoJS 实现QQ小游戏胡莱三国爬塔
AutoJS 开发文档参考 环境 安卓QQ 胡莱三国小游戏 AutoJS APP 使用方法 安装AutoJs,打开无障碍模式,进入到胡莱三国小游戏,在Autojs中执行脚本 代码 "auto ...
- js消除小游戏(极简版)
js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...
- 用 Python 写个消消乐小游戏
提到开心消消乐这款小游戏,相信大家都不陌生,其曾在 2015 年获得过玩家最喜爱的移动单机游戏奖,受欢迎程度可见一斑,本文我们使用 Python 来做个简单的消消乐小游戏. 很多人学习python,不 ...
- 用Python写个开心消消乐小游戏
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 提到开心消消乐这款小游戏,相信大家都不陌生,其曾在 2015 年获得过玩家最喜爱的移动单机游戏奖,受 ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- 软件工程：黄金G点小游戏1.0
我们要做的是黄金G点小游戏: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...
- QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
- 软件工程 Android小游戏 猜拳大战
一.前言 最近学校举办的大学生程序设计竞赛,自己利用课余时间写了一个小游戏,最近一直在忙这个写这个小游戏,参加比赛,最终是老师说自己写的简单,可以做的更复杂的点的.加油 二.内容简介 自己玩过Andr ...
- 带你使用h5开发移动端小游戏
带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...
随机推荐
- [HIHO]hihoCoder太阁最新面经算法竞赛7
题目链接:http://hihocoder.com/contest/hihointerview12 期末完事了,终于有时间成套刷题了.这套题比较简单,难度上感觉和上一套差不多.除了最后一个题是看了讨论 ...
- 《OD大数据实战》Flume入门实例
一.netcat source + memory channel + logger sink 1. 修改配置 1)修改$FLUME_HOME/conf下的flume-env.sh文件,修改内容如下 e ...
- hdu 5067 Harry And Dig Machine (状态压缩dp)
题目链接 bc上的一道题,刚开始想用这个方法做的,因为刚刚做了一个类似的题,但是想到这只是bc的第二题, 以为用bfs水一下就过去了,结果MLE了,因为bfs的队列里的状态太多了,耗内存太厉害. 题意 ...
- UVa 10420 List of Conquests
题意就是有N个pl妹子,然后每行第一个单词是妹子的国籍,后面是妹子的名字. 你的任务就是统计相同国籍妹子的个数,然后按字母表顺序输出. 我首先把所有的国籍都读入,然后用qsort()按字母表顺序排序. ...
- UVa 297 (四分树 递归) Quadtrees
题意: 有一个32×32像素的黑白图片,用四分树来表示.树的四个节点从左到右分别对应右上.左上.左下.右下的四个小正方区域.然后用递归的形式给出一个字符串代表一个图像,f(full)代表该节点是黑色的 ...
- 漫游Kafka设计篇之数据持久化
Kafka大量依赖文件系统去存储和缓存消息.对于硬盘有个传统的观念是硬盘总是很慢,这使很多人怀疑基于文件系统的架构能否提供优异的性能.实际上硬盘的快慢完全取决于使用它的方式.设计良好的硬盘架构可以和内 ...
- Codeforces 279 B Books
题意:给出n本书,总的时间t,每本书的阅读时间a[i],必须按照顺序来阅读,问最多能够阅读多少本书 有点像紫书的第七章讲的那个滑动区间貌似 维护一个区间的消耗的时间小于等于t,然后维护一个区间的最大值 ...
- decorate装饰模式
package com.decorate; public class Iphone implements Phone{ @Override public void call() { System.ou ...
- PHP学习笔记02——简易计算器
<!DOCTYPE html> <html> <head> <title>PHP简易计算器</title> </head> &l ...
- 08day1
高中运动会 最大公约数 [问题描述] 梦幻城市每年为全市高中生兴办一次运动会.为促使各校同学之间的交流,采用特别的分队方式:每一个学校的同学,必须被均匀分散到各队,使得每一队中该校的人数皆相同.为增加 ...