javascript抓娃娃小游戏H5完整版_js抓娃娃,js抓娃娃资源-CSDN下载

共31个文件

png：11个

js：8个

html：4个

2星需积分: 50 95 浏览量 2017-12-18 15:01:20 上传评论 6 收藏 3.24MB RAR 举报

【JavaScript 抓娃娃小游戏H5完整版】是一款基于HTML5、CSS3和JavaScript技术开发的移动端小游戏，适用于Android和iOS设备。此项目采用jQuery库来简化DOM操作，提高代码的可读性和执行效率，旨在为用户带来逼真的在线抓娃娃体验。 HTML5是构成网页内容的基础，它提供了丰富的标签和API，如Canvas画布，使得动态图形和交互式内容得以实现。在抓娃娃游戏中，Canvas用于绘制游戏场景，包括娃娃机、爪子、娃娃等元素，通过JavaScript进行实时更新，实现动态效果。 CSS3则负责游戏的视觉呈现，包括布局、颜色、阴影、动画等。例如，通过CSS3的transform和transition属性，可以实现爪子的平移和缩放效果，增强游戏的视觉吸引力。同时，媒体查询（Media Queries）确保了游戏在不同屏幕尺寸的设备上都能正常显示和操作。 JavaScript作为主要的编程语言，承担了游戏逻辑的实现。它处理用户的触摸事件，比如开始游戏、控制爪子移动和抓取娃娃的动作。同时，JavaScript还用于实现计时器，限制每次抓取的时间，以及计算抓取成功率，提供得分系统。Jquery库则简化了DOM操作，如选择元素、添加事件监听器等，让代码更加简洁。此外，为了兼容移动端设备，开发者可能使用了触摸事件（touchstart, touchmove, touchend）替代传统的鼠标事件，以适应触屏操作。并且，可能使用了Hammer.js这样的手势库来处理更复杂的手势识别，如滑动、双击等。在实际项目中，代码结构通常会分为多个模块，如游戏逻辑模块、UI模块、网络请求模块等，以提高代码的可维护性和复用性。网络请求模块可能用于与服务器通信，获取或提交玩家的游戏数据，如分数、排名等。 "javascript 抓娃娃小游戏H5完整版"是一个集成了HTML5、CSS3和JavaScript技术的跨平台应用，展示了Web技术在移动端游戏开发中的强大能力。通过学习这个游戏的源代码，开发者可以深入理解如何利用这些技术创建交互式的、具有实时反馈的游戏体验，并了解如何优化移动端性能和适配不同设备。

资源推荐

资源详情

资源评论

收起资源包目录

baby.rar （31个子文件）

baby

.project 1KB

trunk

css

swiper.min.css 19KB

pace-theme-loading-bar.css 9KB

public.css 1KB

index.css 5KB

images

pole.png 961B

pic03.png 3KB

bgm.mp3 2.91MB

boy.png 28KB

paw_set.png 21KB

topIcon.png 5KB

pic02.png 3KB

pic04.png 3KB

bum.png 7KB

bg.jpg 15KB

sou.mp3 8KB

gx.png 139KB

paw_close.png 24KB

pic01.png 3KB

pengzhuang.html 3KB

index.html 7KB

jquery.min.js 90KB

pace.js 26KB

index.js 3KB

swiper.min.js 109KB

fastclick.js 25KB

underscore.js 51KB

velocity.js 197KB

Adaptive.js 4KB

pengzhuangjiance.html 9KB

zhuazi.html 8KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0; padding:0; } #main{width:1000px; height:600px; position:relative; background:#CCC; margin:20px auto; } .box{width:200px; height:200px; position:absolute; font-size:100px; font-family:'微软雅黑'; text-align:center; line-height:200px; } .one{left:50px; top:50px; background:red; } .two{right:50px; top:50px; background:green; } .three{left:50px; bottom:50px; background:blue; } .four{right:50px; bottom:50px; background:yellow; } </style> <script> window.onload=function() { var oDiv=document.getElementById('main'); var aDiv=oDiv.getElementsByTagName('div'); var a=10; for(var i=0;i<aDiv.length;i++) { aDiv[i].index=i; aDiv[i].onmousedown=function(ev) { var result=[]; arr=[]; var Num=0; var oEvent=ev||event; var DownX=this.offsetLeft; var DownY=this.offsetTop; var disX=oEvent.clientX-this.offsetLeft; var disY=oEvent.clientY-this.offsetTop; for(var i=0;i<aDiv.length;i++) { var json={ l:aDiv[i].offsetLeft, r:aDiv[i].offsetLeft+aDiv[i].offsetWidth, t:aDiv[i].offsetTop, b:aDiv[i].offsetTop+aDiv[i].offsetHeight } arr.push(json) } this.style.zIndex=a++; Num=this.index; document.onmousemove=function(ev) { result=[]; var oEvent=ev||event; aDiv[Num].style.left=oEvent.clientX-disX+'px'; aDiv[Num].style.top=oEvent.clientY-disY+'px'; if(aDiv[Num].offsetLeft<0) { aDiv[Num].style.left=0; } else if(aDiv[Num].offsetLeft>oDiv.clientWidth-aDiv[Num].clientWidth) { aDiv[Num].style.left=oDiv.clientWidth-aDiv[Num].clientWidth+'px'; } if(aDiv[Num].offsetTop<0) { aDiv[Num].style.top=0; } else if(aDiv[Num].offsetTop>oDiv.clientHeight-aDiv[Num].clientHeight) { aDiv[Num].style.top=oDiv.clientHeight-aDiv[Num].clientHeight+'px'; } l=aDiv[Num].offsetLeft; r=aDiv[Num].offsetLeft+aDiv[Num].offsetWidth; t=aDiv[Num].offsetTop; b=aDiv[Num].offsetTop+aDiv[Num].offsetHeight; for(var i=0;i<arr.length;i++) { if(i==Num) { result.push(false) continue; } else { if(l>arr[i].r || r<arr[i].l || t>arr[i].b || b<arr[i].t) { result.push(false) } else { result.push(true) for(var c=0;c<aDiv.length;c++) { aDiv[c].style.opacity='1';/*非IE*/ aDiv[c].style.filter='alpha(opacity='+100+')';/*IE*/ } aDiv[i].style.opacity='0.3';/*非IE*/ aDiv[i].style.filter='alpha(opacity='+30+')';/*IE*/ break; } } } }; document.onmouseup=function() { document.onmousemove=null; document.onmouseup=null; for(var c=0;c<aDiv.length;c++) { aDiv[c].style.opacity='1';/*非IE*/ aDiv[c].style.filter='alpha(opacity='+100+')';/*IE*/ } var time=0; for(var i=0;i<arr.length;i++) { if(i==Num) { continue; } else { if(l>arr[i].r || r<arr[i].l || t>arr[i].b || b<arr[i].t) { time++ } } } if(time==arr.length-1) { aDiv[Num].style.left=DownX+'px'; aDiv[Num].style.top=DownY+'px'; } for(var i=0;i<result.length;i++) { if(result[i]) { aDiv[Num].style.left=aDiv[i].offsetLeft+'px'; aDiv[Num].style.top=aDiv[i].offsetTop+'px'; aDiv[i].style.left=DownX+'px'; aDiv[i].style.top=DownY+'px'; } }

评论收藏

内容反馈