JS实现的消灭QQ表情小游戏源码.zip资源-CSDN文库

共54个文件

gif：52个

html：1个

js：1个

版权申诉

188 浏览量 2022-11-01 01:01:27 上传评论收藏 155KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

JS实现的消灭QQ表情小游戏源码.zip （54个子文件）

132687016114844579

index.html 3KB

global.js 3KB

QQexp

13.gif 2KB

45.gif 4KB

5.gif 2KB

27.gif 3KB

31.gif 4KB

2.gif 2KB

20.gif 2KB

1.gif 4KB

8.gif 5KB

3.gif 2KB

12.gif 2KB

6.gif 3KB

41.gif 4KB

46.gif 2KB

11.gif 8KB

42.gif 2KB

17.gif 8KB

44.gif 5KB

23.gif 2KB

18.gif 8KB

37.gif 1KB

50.gif 2KB

28.gif 5KB

9.gif 3KB

52.gif 2KB

7.gif 4KB

30.gif 7KB

29.gif 2KB

14.gif 2KB

48.gif 3KB

47.gif 6KB

4.gif 2KB

22.gif 2KB

39.gif 3KB

35.gif 2KB

51.gif 2KB

38.gif 3KB

49.gif 4KB

21.gif 3KB

36.gif 1KB

16.gif 1KB

43.gif 5KB

26.gif 3KB

25.gif 4KB

32.gif 2KB

15.gif 2KB

24.gif 2KB

10.gif 4KB

33.gif 1KB

19.gif 2KB

34.gif 1KB

40.gif 13KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js消灭QQ表情小游戏源码</title> <script src="js/global.js"></script> </head> <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> <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> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> </div> </body> </html>

评论收藏

内容反馈

版权申诉