【H5游戏】-使用js复刻经典小游戏【接鸡蛋】，快来帮助鸡妈妈找回蛋宝宝吧

不要喷香水

已于 2023-03-06 15:16:13 修改

阅读量3k

点赞数 1

分类专栏： H5游戏文章标签： javascript 前端开发语言

于 2023-01-18 14:29:46 首次发布

本文链接：https://blog.csdn.net/qq_27185879/article/details/128725741

版权

H5游戏专栏收录该内容

7 篇文章 1 订阅

订阅专栏

专栏简介
💒个人主页 📰专栏目录点击上方查看更多内容	📖心灵鸡汤📖 我们唯一拥有的就是今天，唯一能把握的也是今天	不定时分享各种H5小游戏，欢迎订阅！收藏！

接鸡蛋

复刻经典小游戏【接鸡蛋】，快来帮助鸡妈妈找回它的蛋宝宝吧。

游戏需求

复刻经典小游戏，接鸡蛋

👇核心玩法👇

1️⃣.玩法规则，用蛋筐接住鸡蛋即可，成功则进入下一步，失败则扣除一次机会（生命值），一共三次机会。
2️⃣.计分规则，每用蛋筐接住一个蛋加一分。
3️⃣.重玩规则，次数用完。

👇界面原型👇

1️⃣.开始界面。开始操作。
2️⃣.游戏界面。页面元素主要包括：生命值，分数，蛋筐，鸡蛋。
3️⃣.结束页面。重玩儿，分数显示。

👇成品演示👇

1.游戏演示

在这里插入图片描述

2.暂停演示

在这里插入图片描述

游戏开发

下面就总结下实现过程。

1.游戏素材准备

原始素材,来源于网络，如有侵权。联系删除！！！
在这里插入图片描述

2.代码实现

代码量较大，代码有所删减，仅贴出核心代码

1.创建首页

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="msapplication-tap-highlight" content="no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<title>接鸡蛋</title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/pixi.js" type="text/javascript"></script>
		<script src="js/tween.min.js" type="text/javascript"></script>
		<script src="js/howler.min.js" type="text/javascript"></script>
		<script src="js/init.js" type="text/javascript"></script>
		<script src="js/main.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script src="js/common.js"></script>
	</head>
	<body bgcolor="black">
		<div id="container">
			<canvas id="game_area" moz-opaque></canvas>
		</div>
	</body>
</html>

2.首页布局

在这里插入图片描述
👇首页元素👇
1.背景图 2.开始游戏按钮 3.鸡蛋
由于实现稍微繁琐，这里大概贴下实现思路。以下代码仅对首页布局进行说明，并非首页完整功能的实现代码，请知悉！！！
1.创建 mian.js
使用pixi.js渲染页面

        var el = (function() {
            function e() {
                this.id_bg = "bg";
                this.id_button_startgame = "button_startgame";
                this.id_egg = "egg";
			}
            e.prototype.bg = function() {
                return PIXI.Sprite.fromFrame("bg")
            };
            e.prototype.button_startgame = function() {
                return PIXI.Sprite.fromFrame("button_startgame")
            };
            e.prototype.egg = function() {
                return PIXI.Sprite.fromFrame("egg")
            };
            return e
        })();

源码下载

源码下载
🙊营业公告🙊	源码获取 🔗
🕣工作日:早8:30-晚5:30
📢非工作日期间将无法访问，可在👇下方留言👇获取源码