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

专栏简介

个人主页
专栏目录

点击上方查看更多内容
心灵鸡汤

我们唯一拥有的就是今天,唯一能把握的也是今天


不定时分享各种H5小游戏,欢迎订阅!收藏!

接鸡蛋

    • 游戏需求
      • 核心玩法
      • 界面原型
      • 成品演示
        • 1.游戏演示
        • 2.暂停演示
    • 游戏开发
      • 1.游戏素材准备
      • 2.代码实现
        • 1.创建首页
        • 2.首页布局

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

游戏需求

  复刻经典小游戏,接鸡蛋

核心玩法

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

界面原型

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

成品演示

1.游戏演示

2.暂停演示

【H5游戏】-使用js复刻经典小游戏【接鸡蛋】,快来帮助鸡妈妈找回蛋宝宝吧_第1张图片

游戏开发

   下面就总结下实现过程。

1.游戏素材准备

原始素材,来源于网络,如有侵权。联系删除!!!
【H5游戏】-使用js复刻经典小游戏【接鸡蛋】,快来帮助鸡妈妈找回蛋宝宝吧_第2张图片

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.首页布局

【H5游戏】-使用js复刻经典小游戏【接鸡蛋】,快来帮助鸡妈妈找回蛋宝宝吧_第3张图片
首页元素
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
        })();

你可能感兴趣的:(H5游戏,javascript,前端,开发语言)