吃豆豆游戏源码资源-CSDN文库

共23个文件

png：17个

js：4个

html：1个

1星需积分: 21 172 浏览量 2019-01-07 20:13:12 上传评论 1 收藏 252KB ZIP 举报

吃豆豆游戏源码是一个基于JavaScript的HTML5（H5）游戏项目，它复刻了经典的吃豆子游戏，提供了一种有趣的益智娱乐体验。在这个游戏中，玩家控制一个小角色在迷宫般的环境中穿梭，目标是躲避鬼魂的追逐，同时尽可能地吃掉所有散布在地图上的豆子。一旦吃完所有的豆子，玩家就能完成关卡并进入下一关。在游戏中，吃掉特定的道具如咖啡可以短暂使玩家变得无敌，这时玩家可以反过来追击那些曾经让他们头疼的小怪物。此外，游戏中还有增强道具如大锤，玩家持有大锤时，可以将鬼魂赶走，增加游戏的趣味性和策略性。这个源码主要涉及到以下几个IT知识点： 1. **JavaScript**：作为游戏的主要编程语言，JavaScript是一种广泛用于网页和网络应用开发的脚本语言。在吃豆豆游戏中，JavaScript负责处理游戏逻辑、用户交互、动画效果等核心功能。开发者可能使用了事件监听、定时器、函数封装、面向对象编程等JavaScript技术来实现游戏的各种功能。 2. **HTML5**：HTML5是超文本标记语言的最新版本，它为构建和呈现Web内容提供了更强大的支持。在吃豆豆游戏中，HTML5用于创建游戏界面的基本结构，包括游戏面板、按钮、得分显示等元素。HTML5的Canvas API可能被用来绘制游戏场景，实现动态图形的渲染。 3. **CSS3**：层叠样式表（CSS3）用于游戏的视觉设计，定义了游戏界面的颜色、布局、动画效果等。CSS3的过渡、动画和选择器等功能在吃豆豆游戏中起到了美化界面、提升用户体验的作用。 4. **游戏框架或库**：虽然没有明确指出，但很可能使用了某种JavaScript游戏框架或库，如Phaser、CreateJS或者Pixi.js等，这些工具可以帮助开发者更高效地处理游戏开发中的常见问题，例如精灵动画、碰撞检测和物理引擎。 5. **游戏逻辑**：包括角色移动、碰撞检测、计分系统、游戏状态管理等。这些逻辑通常由JavaScript函数和类来实现，需要精确计算和优化，以保证游戏的流畅运行和公平性。 6. **用户输入处理**：通过监听键盘事件，游戏可以响应玩家的操作，如上下左右移动，以及触发特殊道具的使用。 7. **数据结构和算法**：游戏地图、角色位置、道具分布等信息可能存储在数组或对象中，而查找路径、判断碰撞等操作则可能涉及到了一些基础的算法，如广度优先搜索（BFS）或A*寻路算法。 8. **性能优化**：为了确保游戏在不同设备上都能流畅运行，开发者可能会进行一些性能优化，比如减少渲染次数、使用requestAnimationFrame进行动画更新等。通过学习和理解这个吃豆豆游戏的源码，开发者可以深入掌握JavaScript游戏开发的基本技巧，了解如何将HTML5、CSS3与JavaScript结合来构建互动性强、视觉效果良好的网页游戏。此外，这也是一个实践面向对象编程、游戏设计模式和优化技巧的好案例。

资源推荐

资源详情

资源评论

收起资源包目录

吃豆豆游戏源码.zip （23个子文件）

cdd

assets

_move.png 478B

_logo.png 3KB

_moregame.png 4KB

_text.png 5KB

_play.png 2KB

_splash.png 31KB

_scoreabattre.png 733B

_playagain.png 2KB

_share.png 2KB

_collect2.png 327B

_collect.png 375B

_loading.png 2KB

_avoid.png 286B

_doudouin.png 4KB

_gameover.png 10KB

zepto.min.js 27KB

main.js 11KB

common.js 10KB

phaser.min.js 376KB

css

common.css 2KB

index.html 5KB

icon.png 81KB

share.png 10KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="pragma" content="no-cache"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta charset="utf-8"> <title>吃豆豆</title>  <link rel="icon" href="share.png"> <link rel="shortcut icon" href="icon.png"> <link rel="icon" href="icon.png"> <link type="text/css" href="css/common.css" rel="stylesheet" /> <script type="text/javascript" src="js/zepto.min.js"></script> <script src="js/common.js?v=1"></script>  <style> .body { overflow: hidden; background: #222; color:#cccccc; margin: 0px; padding: 0px; border: 0px; } #game_div { image-rendering: optimizeSpeed; -webkit-interpolation-mode: nearest-neighbor; margin: 0px; padding: 0px; border: 0px; } :-webkit-full-screen #game_div { width: 100%; height: 100%; } #orientation { margin: 0 auto; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-color: rgb(0, 0, 0); z-index: 999; display: none; } </style> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body class="body"> <div id="wrapper"> <div id="game_div" style="position: absolute;"></div> </div> <input id="bt-game-id" type="hidden" value="3-avoider"> <script type="text/javascript"> btGame.onlyVScreen(); btGame.playLogoAdv(); </script> <script language=javascript> var mebtnopenurl = 'http://game.id87.com/'; window.shareData = { "imgUrl": "http://game.id87.com/ico/cdd.png", "timeLineLink": "http://game.id87.com/games/cdd/", "tTitle": "吃豆豆", "tContent": "吃豆豆" }; function goHome(){ window.location=mebtnopenurl; } function clickMore(){ if((window.location+"").indexOf("zf",1)>0){ window.location = "http://game.id87.com/"; } else{ goHome(); } } function dp_share(){ document.title ="原来我这么吊，吃了"+myData.score+"分的豆豆，吊炸天是形容我的？"; document.getElementById("share").style.display=""; window.shareData.tTitle = document.title; } function dp_Ranking(){ window.location=mebtnopenurl; } function showAd(){ } function hideAd(){ } document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.on('menu:share:appmessage', function(argv) { WeixinJSBridge.invoke('sendAppMessage', { "img_url": window.shareData.imgUrl, "link": window.shareData.timeLineLink, "desc": window.shareData.tContent, "title": window.shareData.tTitle }, onShareComplete); }); WeixinJSBridge.on('menu:share:timeline', function(argv) { WeixinJSBridge.invoke('shareTimeline', { "img_url": window.shareData.imgUrl, "img_width": "640", "img_height": "640", "link": window.shareData.timeLineLink, "desc": window.shareData.tContent, "title": window.shareData.tTitle }, onShareComplete); }); }, false); </script> <div id=share style="display: none"> <img width=100% src="share.png" style="position: fixed; z-index: 9999; top: 0; left: 0; display: " ontouchstart="document.getElementById('share').style.display='none';" /> </div> <div style="display: none;"> <script type="text/javascript"> var myData = { gameid: "cdd" }; //window.shareData.timeLineLink = "http://game.9g.com/gamecenter.html?gameid=" + myData.gameid + (localStorage.myuid ? "&uid=" + localStorage.myuid : ""); function dp_submitScore(score){ myData.score = score; myData.scoreName = "吃豆豆吃了"+score+"分"; if(score>0){ if (confirm("吃完豆豆浑身爽，俺一口气吃了"+score+"分，叫上朋友一起吃！")){ dp_share(); } } } function onShareComplete(res) { if (localStorage.myuid && myData.score != undefined) { setTimeout(function(){ if (confirm("要将成绩提交到9G游戏排行榜吗？")) { //window.location = "http://wx.9g.com/rank/submit2.jsp?gameid=" + myData.gameid + "&uid=" + localStorage.myuid + "&score=" + myData.score + "&scorename=" + encodeURIComponent(myData.scoreName); } else { document.location.href = mebtnopenurl; } }, 500); } else { document.location.href = mebtnopenurl; } } </script> <div style="display: none;"> </div> </body> </html>

评论收藏

内容反馈