吃豆豆.zip资源-CSDN文库

共23个文件

png：17个

js：4个

html：1个

版权申诉

html

源码

76 浏览量 2024-05-28 16:16:33 上传评论收藏 249KB ZIP 举报

《吃豆豆》是一款基于HTML技术开发的小游戏，它的出现为网页游戏领域注入了新的活力。HTML小游戏，作为互联网上轻量级的娱乐形式，深受用户喜爱，因为它们无需安装，即点即玩，十分便捷。《吃豆豆》这款小游戏就是其中的典型代表，通过HTML、CSS和JavaScript等前端技术构建，展现了HTML5在游戏开发领域的强大能力。 HTML（HyperText Markup Language）是网页制作的基础语言，用于结构化和标记网页内容。在《吃豆豆》游戏中，HTML元素构成了游戏界面的基本框架，如游戏背景、角色、障碍物等，都是通过HTML元素来定义和布局的。同时，HTML5新增的一些元素，如canvas，为动态图形和游戏交互提供了可能。 CSS（Cascading Style Sheets）用于控制网页的样式和布局。在《吃豆豆》中，CSS使得游戏界面的视觉效果得以实现，包括颜色、字体、动画效果等，为玩家提供了一个生动、有趣的视觉体验。通过CSS3的过渡（transition）、动画（animation）和3D变换等特性，游戏中的角色移动、吃豆动作、碰撞效果等变得更加流畅和自然。 JavaScript是一种强大的脚本语言，是HTML小游戏的核心驱动力。在《吃豆豆》中，JavaScript负责处理游戏逻辑，包括角色的移动、碰撞检测、计分系统、游戏结束条件判断等。开发者通常会利用事件监听（event listener）来响应用户的操作，如键盘输入，以及使用定时器（setTimeout或requestAnimationFrame）来实现游戏循环，更新游戏状态。此外，游戏可能还运用了其他前端技术，如jQuery库简化DOM操作，或者使用现代框架如React或Vue来提高代码组织和复用性。同时，为了实现游戏的本地存储，开发者可能会利用HTML5的localStorage或sessionStorage，保存玩家的游戏进度，使玩家在下次打开游戏时能继续之前的冒险。《吃豆豆》这个游戏源码对于初学者来说，是一份很好的学习资料。通过研究源码，可以深入理解HTML、CSS和JavaScript如何协同工作，创建出一款互动性强、趣味性高的小游戏。对于想要涉足HTML小游戏开发的开发者来说，这是一个很好的起点，从中可以学习到游戏设计的基本原理，以及前端技术在游戏开发中的实际应用。

资源推荐

资源详情

资源评论

收起资源包目录

吃豆豆.zip （23个子文件）

吃豆豆

cdd

assets

_splash.png 31KB

_play.png 2KB

_share.png 2KB

_gameover.png 10KB

_playagain.png 2KB

_logo.png 3KB

_move.png 478B

_avoid.png 286B

_scoreabattre.png 733B

_doudouin.png 4KB

_loading.png 2KB

_collect2.png 327B

_moregame.png 4KB

_text.png 5KB

_collect.png 375B

phaser.min.js 376KB

common.js 10KB

main.js 11KB

zepto.min.js 27KB

share.png 10KB

css

common.css 2KB

index.html 5KB

icon.png 81KB

<!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>

评论收藏

内容反馈

版权申诉