专栏简介 | ||
个人主页 专栏目录 点击上方查看更多内容 |
心灵鸡汤 我们唯一拥有的就是今天,唯一能把握的也是今天 |
不定时分享各种H5小游戏,欢迎订阅!收藏! |
复刻经典小游戏【接鸡蛋】,快来帮助鸡妈妈找回它的蛋宝宝吧。
复刻经典小游戏,接鸡蛋
1️⃣.玩法规则,用蛋筐接住鸡蛋即可,成功则进入下一步,失败则扣除一次机会(生命值),一共三次机会。
2️⃣.计分规则,每用蛋筐接住一个蛋加一分。
3️⃣.重玩规则,次数用完。
1️⃣.开始界面。开始操作。
2️⃣.游戏界面。页面元素主要包括:生命值,分数,蛋筐,鸡蛋。
3️⃣.结束页面。重玩儿,分数显示。
下面就总结下实现过程。
代码量较大,代码有所删减,仅贴出核心代码
<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>
首页元素
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
})();