以下是 js消灭QQ表情小游戏源码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js消灭QQ表情小游戏源码</title>
<script src="js/global.js"></script>
<style>
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
.head { text-align: center; padding: 20px 0 }
.head p { line-height: 40px; }
.head h2 { font-size: 20px; padding: 10px 0 }
.head input { padding: 1px 3px; }
.wrap { width: 700px; height: 400px; border-radius:0 0.3em 0.3em 0.3em; border: 2px solid #5F2401; margin: 0 auto; position: relative; top: 0; left: 0; }
.side { width: 120px; height: 90px; border: 2px solid #5F2401; position: absolute; top: -2px; border-radius:0.3em 0 0 0.3em; right: 100%; background: #FC0; }
.side p { padding: 0px 15px; line-height: 25px; font-size: 16px; }
.side p:nth-of-type(1) { margin-top: 15px; }
.main { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; background: #FFF; }
.main i { width: 24px; height: 24px; border-radius: 50%; display: block; position: absolute; top: 0; left: 0; cursor: pointer }
.main img { width: 24px; }
.side b{ color: #F00; }
</style>
<script>
window.onload = function(){
var oBox = $('#box'),
oBtn = getTagName(document,'input')[0],
oMin = getClass(oBox,'.main')[0];
var aB = getTagName(oBox,'b');
var W = parseInt(getCss(oMin,'width')),
H = parseInt(getCss(oMin,'height'));
oBtn.onclick = function(){
this.disabled = true;
this.value = '游戏正在进行中...'
console.dir(oBtn)
oMin.innerHTML = '<i></i>'
var oI = getTagName(oMin,'i')[0];
var b = 0,t = 0;
var k = 2
aB[0].innerHTML = b
aB[1].innerHTML = t
fn()
function fn(){
oI.style.top = '0';
oI.style.left = $fn.random([0,W-24]) + 'px';
oI.innerHTML = '<img src="QQexp/'+ $fn.random([1,51]) +'.gif"/>'
$fn.Move(oI,'top',k,H-24,function(){
++t
aB[1].innerHTML = t
$fn.shaKe(oBox,'top',10,function(){
if(!score()) fn()
})
})
}
function score(){
if(t == 5){
alert('GAME OVER')
oBtn.disabled = false;
oBtn.value = '开始游戏'
oI.style.top = '-23px';
return true
}
if(b == 100){
alert('你赢了')
oBtn.disabled = false;
oBtn.value = '开始游戏'
oI.style.top = '-23px';
return true
}
}
oI.onmousedown = function(){
clearInterval(oI.timer)
this.innerHTML = '<img src="QQexp/36.gif"/>'
oI.timer = null;
++b
k+=0.2
k.toFixed(1)
aB[0].innerHTML = b
$fn.shaKe(oI,'left',10,function(){
if(!score()) fn()
})
}
}
}
</script>
</head>
<body>
<div class="head">
<h2>你的鼠标有多快？</h2>
<p>游戏说明：点击“开始游戏”，随机掉下QQ表情，点中它，千万别让它掉下去！！</p>
<p>
<input type="button" value="开始游戏" />
</p>
</div>
<div id="box" class="wrap">
<div class="side">
<p>得分：<b>0</b> 分</p>
<p>失分：<b>0</b> 分</p>
</div>
<div class="main"></div>
</div>
</body>
</html>JS代码(global.js):
var $fn ={
}
$fn ={
/*元素移动函数obj:运动对象(元素)； attr:运动属性（左、右、上、下）;
speed:每次移动的距离;
target:运动的距离； fn:回调函数 到达距离执行的函数 可有可无*/
Move:function(obj,attr,speed,target,fn){
if(obj.timer) returnvar n = parseInt(getCss(obj,attr));
// 获取当前speed = n > target ? -Math.abs(speed):Math.abs(speed);
//判断 speed 加等、减等 大于目标位置 speed 减等小于目标位置 speed 加等obj.timer = setInterval(function(){
if(speed > 0 && n >= target || speed < 0 && n <= target){
//判断停止条件 如果到达目标点 n 等于目标点 清空定时器n = targetobj.style[attr] = n + 'px';
clearInterval(obj.timer)obj.timer = nullfn && fn()}
else{
n += speed;
obj.style[attr] = n + 'px'}
}
,30)}
,/*元素抖函数obj:抖动对象(元素)； attr:抖动属性（左、右、上、下）;
n:每次抖动的距离;
fn:回调函数 到达距离执行的函数 可有*/
shaKe:function (obj,attr,n,fn){
if(obj.timer) returnvar arr = [],m = 0;
for(var i = n;
i >= 0;
i -= 3) arr.push(i,-i)arr.push(0)var iNum = parseInt(getCss(obj,attr))obj.timer = setInterval(function(){
obj.style[attr] = iNum + arr[m++] + 'px';
if(m > arr.length -1){
clearInterval(obj.timer)obj.timer = nullfn && fn();
}
}
,30)}
,/*opacity 函数e:操作对象(元素)n:透明度 0~1*/
opacity:function (e,n){
// 0.6var t = getCss(e,'opacity')*100;
// 0var b = 0.1*100;
n = n*100b = t < n ? Math.abs(b):-Math.abs(b)e.timer = setInterval(function(){
if(b > 0 && t >= n || b < 0 && t <= n ){
t = n/100clearInterval(e.timer)}
else{
t += be.style.opacity = t/100}
}
,50)}
,random:function (arr){
var max = Math.max(arr[0],arr[1]);
var min = Math.min(arr[0],arr[1]);
var b = max - min;
var n = Math.round(Math.random()*b + min)return n}
}
/* $(id)*/
function $(n){
return document.getElementById(n.slice(1))}
/*getClass(document,'.class')*/
function getClass(n,k){
for (var q = n.getElementsByTagName("*"),t = [],i = 0;
i < q.length;
i++){
var e = q[i].className.split(' ');
for(var j = 0;
j < e.length;
j++){
if(k.slice(1) === e[j]){
t.push(q[i])break}
}
}
return t}
/*getTag(document,'tagName')*/
function getTagName(n,k){
return n.getElementsByTagName(k)}
//获取非行间样式function getCss(obj,attr){
return obj.currenStyle ? obj.currenStyle[attr]:getComputedStyle(obj,false)[attr];
}
分享到QQ
分享到微博
微信扫一扫
