增加碰撞检测、计分、游戏逻辑基本完成

3890406a · Friends233 · 40078fc7 · 3890406a · 40078fc7 · 40078fc7
Commit 3890406a authored Feb 16, 2023 by Friends233
17 changed files
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
-    <title>new_game_template</title>
+    <title>flappy bird</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>

--- a/released/index.html
+++ b/released/index.html
-<!DOCTYPE html>
-<html lang="zh">
-<head>
-    <meta charset="UTF-8">
-    <title>new_game_template</title>
-    <meta name="viewport"
-          content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="full-screen" content="true"/>
-    <meta name="screen-orientation" content="portrait"/>
-    <meta name="x5-fullscreen" content="true"/>
-    <meta name="360-fullscreen" content="true"/>
-    <!-- polyfill -->
-<!--    <script src="//yun.duiba.com.cn/db_games/libs0924/polyfill_220525.js" crossorigin="anonymous"></script>-->
-    <!-- 渲染引擎 -->
-    <script src="//yun.duiba.com.cn/db_games/libs0924/fyge2044.min.js" crossorigin="anonymous"></script>
-    <!--<script src="libs/fyge.min.js" crossorigin="anonymous"></script>-->
-    <!-- svga解析库 -->
-    <script src="//yun.duiba.com.cn/db_games/libs0924/svgaParser.minWeb.js" crossorigin="anonymous"></script>
-    <!-- 放声音的 -->
-    <script src="//yun.duiba.com.cn/db_games/libs0924/howler.min.js" crossorigin="anonymous"></script>
-    <style>
-        html,
-        body {
-            padding: 0;
-            margin: 0;
-            border: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            position: absolute;
-            background-color: #ffffff;
-        }
-        #__loading__ {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            margin-left: -45px;
-            color: #ffffff;
-        }
-        #cusEngine {
-            line-height: 0;
-            font-size: 0;
-            position: absolute;
-        }
-        #canvas {
-            width: 100%;
-            height: 100%;
-        }
-    </style>
-</head>
-<body>
-<div id="__loading__">拼命加载中...</div>
-<div id="cusEngine">
-    <canvas id="canvas"></canvas>
-</div>
-<!-- 帧率检测 -->
-<!-- <script src="https://yun.duiba.com.cn/db_games/libs0126/stats.js"></script> -->
-<script>
-	const app = {
-		checkMember: () => {
-			return false;
-		}
-	};
-	function getApp() {
-		return app;
-	}
-	// document.oncontextmenu = () => false;
-</script>
-<script>
-	var CFG = CFG || {};
-	CFG.projectId = 'pa525eacc';//线上直接写死
-	CFG.appID = '76177';//线上直接写死
-	//TODO我的奖品链接
-	window["recordUrl"] = "fe071865b.html";
-	window.addEventListener("load", function () {
-		//获取canvas
-		var canvas = document.getElementById("canvas");
-		canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
-		canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
-		var main = new output.Game(canvas);
-		main.initWebEvent();
-		window.stage = main.stage
-	})
-</script>
-<!-- 构建的js -->
-<script src="//yun.duiba.com.cn/db_games/activity/template/1676451176/output.js" crossorigin="anonymous"></script>
-</body>
-</html>
--- a/released/output.js
+++ b/released/output.js
--- a/released/output.js.map
+++ b/released/output.js.map
--- a/released/output.module.js
+++ b/released/output.module.js
--- a/released/output.module.js.map
+++ b/released/output.module.js.map
--- a/resource/bird/base.png
+++ b/resource/bird/base.png
--- a/resource/bird/pipe_green.png
+++ b/resource/bird/pipe_green.png
--- a/resource/bird/pipe_green_down.png
+++ b/resource/bird/pipe_green_down.png
--- a/resource/bird/redbird_downflap.png
+++ b/resource/bird/redbird_downflap.png
--- a/resource/bird/redbird_midflap.png
+++ b/resource/bird/redbird_midflap.png
--- a/resource/bird/redbird_upflap.png
+++ b/resource/bird/redbird_upflap.png
--- a/resource/res.json
+++ b/resource/res.json
@@ -13,7 +13,7 @@
 			"name": "RevivePanel"
 		},
 		{
-			"keys": "base.png,pipe_green.png,redbird_downflap.png,redbird_midflap.png,redbird_upflap.png",
+			"keys": "base.png,pipe_green.png,pipe_green_down.png,redbird_downflap.png,redbird_midflap.png,redbird_upflap.png",
 			"name": "bird"
 		},
 		{

--- a/src/ResJson.ts
+++ b/src/ResJson.ts
@@ -13,7 +13,7 @@ export const ResJson = {
 			"name": "RevivePanel"
 		},
 		{
-			"keys": "base.png,pipe_green.png,redbird_downflap.png,redbird_midflap.png,redbird_upflap.png",
+			"keys": "base.png,pipe_green.png,pipe_green_down.png,redbird_downflap.png,redbird_midflap.png,redbird_upflap.png",
 			"name": "bird"
 		},
 		{

--- a/src/scenes/IndexScene.ts
+++ b/src/scenes/IndexScene.ts
 import { changeScene } from "../../module/ctrls";
+import { layers } from "../../module/views/layers";
 import { Scene } from "../../module/views/Scene";
 import { Tools } from "../tools/Tools";
 import UI from "../tools/UI";
@@ -42,6 +43,13 @@ export class IndexScene extends Scene {
  private rate = 1
+  /** 分数实例 */
+  private scoreText:TextField = null
+  /** 得分 */
+  private score = 0
+  private timer = null
  async initUi() {
    // UI.Sp(this, Texture.from('com_bg.jpg'))
    this.slideBg = new SlideBg()
@@ -51,13 +59,30 @@ export class IndexScene extends Scene {
    bird.x = 100
    bird.y = 800
    this.addChild(bird)
+    this.scoreText = new TextField()
+    this.addChild(this.scoreText)
+    this.pipeMannage = new PipeMannager(this, bird,this.getChildIndex(this.scoreText))
-    this.pipeMannage = new PipeMannager(this, bird)
+    this.scoreText.text = `${this.score}`
+    this.scoreText.size = 58
+    this.scoreText.textAlign = TEXT_ALIGN.CENTER
+    this.scoreText.fillColor = '#ff5432'
+    this.scoreText.position.set((750-this.scoreText.width)/2, 200)
    this._initEvents()
  }
+  _countDown(){
+   this.timer = setTimeout(() => {
+      this.score += 1
+      this.scoreText.text = this.score
+      this._countDown()
+    }, 1000);
+  }
  _initEvents() {
    this.addEventListener(FYGE.Event.ENTER_FRAME, this._enterFrame, this)
    this.addEventListener(FYGE.MouseEvent.CLICK, this.birdJump, this)
@@ -94,7 +119,8 @@ export class IndexScene extends Scene {
    this.isGameStart = false
    this.bird.gameOver()
    this.pipeMannage.destroy()
-    window.alert('GameOver')
+    clearTimeout(this.timer)
+    window.alert('GameOver\n得分：'+this.score)
  }
  /** 小鸟跳跃 */
@@ -111,6 +137,7 @@ export class IndexScene extends Scene {
  /** 开始游戏 */
  startGame() {
+    this._countDown()
    if (this.isGameOver) {
      this.bird.y = 500
      this.bird.reset()

--- a/src/scenes/bird.ts
+++ b/src/scenes/bird.ts
@@ -46,8 +46,8 @@ export class Bird extends Container {
    ]
    this.player = new FrameAni(birdAni)
    this.player.play(0)
-    this.player.scale.x = 3
+    // this.player.scale.x = 3
-    this.player.scale.y = 3
+    // this.player.scale.y = 3
    this.addChild(this.player)
  }

--- a/src/scenes/pipe.ts
+++ b/src/scenes/pipe.ts
@@ -13,6 +13,7 @@ import VERTICAL_ALIGN = FYGE.VERTICAL_ALIGN;
 import Texture = FYGE.Texture;
 import FrameAni = FYGE.FrameAni;
 import { Bird } from "./bird";
+import { IndexScene } from "./IndexScene";
 /**
 *  获取区间随机数 [min,max)
@@ -37,12 +38,9 @@ export class Pipe extends Container {
  }
  init() {
-    this.addChild(new Sprite(RES.getRes('pipe_green.png')))
+    this.addChild(new Sprite(RES.getRes(this.pipeType === 'down' ? 'pipe_green_down.png' : 'pipe_green.png')))
-    this.scale.x = 2
+    // this.scale.x = 2
-    this.scale.y = 5
+    // this.scale.y = 5
-    if (this.pipeType === 'down') {
-      this.rotation = 180
-    }
  }
  destroy() {
@@ -62,7 +60,7 @@ export class PipeMannager {
  pipes: { up: Pipe, down: Pipe }[] = []
  /** 舞台 */
-  stage: Container = null
+  stage: IndexScene = null
  /** 生成水管最小缺口 */
  minGap = 372
@@ -75,11 +73,15 @@ export class PipeMannager {
  timer = null
-  player:Bird = null
+  player: Bird = null
+  deep = 0
-  constructor(stage,player) {
+  constructor(stage, player, deep) {
    this.stage = stage
    this.player = player
+    this.deep = deep
+    // this.createGroupPipe()
  }
  /** 开始游戏 */
@@ -92,24 +94,23 @@ export class PipeMannager {
  /** 创建一组水管 */
  createGroupPipe() {
+    console.log(this.deep)
    const upD = this.downPipes.length ? this.downPipes.pop() : new Pipe('down')
    const upP = this.upPipes.length ? this.upPipes.pop() : new Pipe('up')
-    upD.x = 750 + 100
+    upD.x = 750
    upP.x = 750
    const randGap = randomNum(this.minGap, this.maxGap)
    const k = Math.random()
-    // console.log(randGap)
+    upD.y = -812 - k * randGap
-    upD.y = 687 - k * randGap
+    upP.y = upP.height - 812 + (1 - k) * randGap
-    upP.y = 687 + ((1 - k) * randGap)
+    this.stage.height
    this.pipes.push({
      up: upP,
      down: upD
    })
-    this.stage.addChild(upD)
+    this.stage.addChildAt(upD, this.deep - 1)
-    this.stage.addChild(upP)
+    this.stage.addChildAt(upP, this.deep - 1)
  }
  /** 帧动画 */
@@ -126,10 +127,18 @@ export class PipeMannager {
        this.stage.removeChild(down)
        this.pipes[i] = null
      }
-      const posx = this.player.x + 100
+      const player = this.player
-      // console.log(this.player.x,up.x)
+      const posx = player.x
-      if(up.x == posx|| down.x == posx){
+      // 重叠水管
-        console.log('管道')
+      if ((posx + player.width/2) >= up.x && (posx - player.width/2) <= (up.x + up.width)) {
+        // 碰撞头朝上的水管
+        if (up.y <= player.y) {
+          this.stage.gameOver()
+        }
+        // 碰撞头朝下的水管
+        if ((down.y + down.height + player.height / 2) >= player.y) {
+          this.stage.gameOver()
+        }
      }
    }
  }