Commit 3890406a authored by Friends233's avatar Friends233

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

parent 40078fc7
......@@ -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"/>
......
<!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>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
resource/bird/base.png

664 Bytes | W: | H:

resource/bird/base.png

15.9 KB | W: | H:

resource/bird/base.png
resource/bird/base.png
resource/bird/base.png
resource/bird/base.png
  • 2-up
  • Swipe
  • Onion skin
resource/bird/pipe_green.png

4.92 KB | W: | H:

resource/bird/pipe_green.png

41.5 KB | W: | H:

resource/bird/pipe_green.png
resource/bird/pipe_green.png
resource/bird/pipe_green.png
resource/bird/pipe_green.png
  • 2-up
  • Swipe
  • Onion skin
resource/bird/redbird_downflap.png

2.88 KB | W: | H:

resource/bird/redbird_downflap.png

6.7 KB | W: | H:

resource/bird/redbird_downflap.png
resource/bird/redbird_downflap.png
resource/bird/redbird_downflap.png
resource/bird/redbird_downflap.png
  • 2-up
  • Swipe
  • Onion skin
resource/bird/redbird_midflap.png

2.88 KB | W: | H:

resource/bird/redbird_midflap.png

6.58 KB | W: | H:

resource/bird/redbird_midflap.png
resource/bird/redbird_midflap.png
resource/bird/redbird_midflap.png
resource/bird/redbird_midflap.png
  • 2-up
  • Swipe
  • Onion skin
resource/bird/redbird_upflap.png

2.88 KB | W: | H:

resource/bird/redbird_upflap.png

6.7 KB | W: | H:

resource/bird/redbird_upflap.png
resource/bird/redbird_upflap.png
resource/bird/redbird_upflap.png
resource/bird/redbird_upflap.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -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"
},
{
......
......@@ -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"
},
{
......
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()
......
......@@ -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.y = 3
// this.player.scale.x = 3
// this.player.scale.y = 3
this.addChild(this.player)
}
......
......@@ -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.scale.x = 2
this.scale.y = 5
if (this.pipeType === 'down') {
this.rotation = 180
}
this.addChild(new Sprite(RES.getRes(this.pipeType === 'down' ? 'pipe_green_down.png' : 'pipe_green.png')))
// this.scale.x = 2
// this.scale.y = 5
}
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 = 687 - k * randGap
upP.y = 687 + ((1 - k) * randGap)
upD.y = -812 - k * randGap
upP.y = upP.height - 812 + (1 - k) * randGap
this.stage.height
this.pipes.push({
up: upP,
down: upD
})
this.stage.addChild(upD)
this.stage.addChild(upP)
this.stage.addChildAt(upD, this.deep - 1)
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
// console.log(this.player.x,up.x)
if(up.x == posx|| down.x == posx){
console.log('管道')
const player = this.player
const posx = player.x
// 重叠水管
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()
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment