移动应用开发 · 2026 春季 · 期末项目

🐹 萌物打地鼠 MoleMole

基于 Apache Cordova 的混合移动游戏 · 触屏交互 · 游戏循环 · 本地存储 · Android 打包

🌱10关卡递进

🕳️12最大洞口

🎨18角色皮肤

📦8.1MB 体积

120♥♥♥48s

🐹

🐰🔨

🦊

开始游戏

📚 课程技术要点 · Knowledge Points

HTML/CSS/JS

📄

多页面 SPA 架构，菜单、关卡、结算五大界面全部手写

index.html · ui.js

响应式布局

📱

九宫格横竖屏自适应，洞口密度随屏幕尺寸动态缩放

index.css · game.js

触屏事件

⚡

touchend/click 去重，锤子实时跟随手指移动与命中判定

game.js · hammer.js

Cordova 容器

🔧

deviceready 生命周期、Android 平台接入与原生插件桥接

index.js · config.xml

音效与震动

🔊

WebAudio API 合成打击音效，navigator.vibrate 震动反馈

audio.js

本地存储

💾

localStorage 持久化金币/皮肤/进度，战绩排行本地保存

db.js · wallet.js

🐰 设计了全部 10 个关卡的数值平衡，每关都有独特的难度曲线和目标分数

云南大学 · 信息学院杨晓彤 / 李思臻HTML5 · CSS3 · ES5Cordova · Android