Skip to content

G
game-demo
Commit 40078fc7 authored by Friends233's avatar Friends233
Browse files
Options

管道、锁帧

parent 54a27744
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 349 additions and 27 deletions
module/RES.ts
View file @ 40078fc7
......@@ -131,7 +131,7 @@ export namespace RES {
* @param name
*/
export function loadGroup(name: string): Promise<void> {
console.log(groupsCompleteHash)
//已经加载完成的直接返回
if (groupsCompleteHash[name]) {//其实直接return就行
return new Promise((resolve) => {
......@@ -329,7 +329,6 @@ export namespace RES {
* @return 已加载好得素材或null
*/
export function getRes(str: string)/*: Texture | VideoEntity*/ {
console.log(textureHash)
if (!str) return null;
var type = str.substring(str.lastIndexOf(".") + 1, str.length);
if (type == "png" || type == "jpg") {
......
released/index.html 0 → 100644
View file @ 40078fc7
<!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>
released/output.js 0 → 100644
View file @ 40078fc7
This diff is collapsed.
released/output.js.map 0 → 100644
View file @ 40078fc7
This diff is collapsed.
released/output.module.js 0 → 100644
View file @ 40078fc7
This diff is collapsed.
released/output.module.js.map 0 → 100644
View file @ 40078fc7
This diff is collapsed.
src/panels/OverPrizePanel.ts
View file @ 40078fc7
import { changeScene } from "../../module/ctrls";
import { Panel } from "../../module/views/Panel";
import { IndexScene } from "../scenes/IndexScene";
import { LoadingScene } from "../scenes/LoadingScene";
// import { LoadingScene } from "../scenes/LoadingScene";
import UI from "../tools/UI";
import Sprite = FYGE.Sprite;
......@@ -39,7 +39,7 @@ export class OverPrizePanel extends Panel {
async again(e) {
this.btnDelay(e.target);
super.hidePanel();
changeScene(LoadingScene);
// changeScene(LoadingScene);
}
hidePanel() {
......
src/scenes/IndexScene.ts
View file @ 40078fc7
......@@ -3,6 +3,7 @@ import { Scene } from "../../module/views/Scene";
import { Tools } from "../tools/Tools";
import UI from "../tools/UI";
import { Bird } from "./bird";
import { PipeMannager } from "./pipe";
import { SlideBg } from "./slideBg";
import Button = FYGE.Button;
import Container = FYGE.Container;
......@@ -34,14 +35,26 @@ export class IndexScene extends Scene {
/** 滑动背景 */
private slideBg: SlideBg = null
/** 水管管理器 */
private pipeMannage: PipeMannager = null
private prevTime = 0
private rate = 1
async initUi() {
// UI.Sp(this, Texture.from('com_bg.jpg'))
this.slideBg = new SlideBg()
this.addChild(this.slideBg)
const bird = this.bird = new Bird()
bird.x = 100
bird.y = 800
this.addChild(bird)
this.pipeMannage = new PipeMannager(this, bird)
this._initEvents()
}
......@@ -52,18 +65,26 @@ export class IndexScene extends Scene {
/** 检查小鸟掉落位置 */
_checkRmove() {
if (this.bird.y >= (this.bird.height + this.stage.stageHeight)) {
// this.removeChild(this.bird)
if (this.bird.y >= (this.stage.stageHeight)) {
this.gameOver()
}
}
/** 帧动画 */
_enterFrame() {
if (this.isGameOver || !this.isGameStart) return
// console.log(this.bird.y)
this.slideBg.enterFrame()
this.bird.fail(0.6)
const now = Date.now()
let rate = 1
if (this.prevTime) {
const dt = now - this.prevTime
this.rate = rate = dt / 16.7
}
this.prevTime = now
if (this.isGameOver) return
this.slideBg.enterFrame(rate)
this.pipeMannage.enterFrame(rate)
if (!this.isGameStart) return
this.bird.fail(rate)
this._checkRmove()
}
......@@ -71,28 +92,36 @@ export class IndexScene extends Scene {
gameOver() {
this.isGameOver = true
this.isGameStart = false
this.bird.gameOver()
this.pipeMannage.destroy()
window.alert('GameOver')
}
/** 小鸟跳跃 */
birdJump() {
if(this.isGameOver) {
window.location.reload()
}
if (!this.isGameStart) {
this.startGame()
return
}
this.bird.jump()
this.bird.jump(this.rate)
}
/** 开始游戏 */
startGame() {
if (this.bird.y > this.height) {
this.bird.y = 0
if (this.isGameOver) {
this.bird.y = 500
this.bird.reset()
}
this.isGameStart = true
this.isGameOver = false
this.pipeMannage.startGame()
}
destroy() {
this.pipeMannage.destroy()
super.destroy();
}
......
src/scenes/bird.ts
View file @ 40078fc7
......@@ -2,7 +2,6 @@ import { changeScene } from "../../module/ctrls";
import { Scene } from "../../module/views/Scene";
import { Tools } from "../tools/Tools";
import UI from "../tools/UI";
import { LoadingScene } from "./LoadingScene";
import { RES } from '../../module/RES';
import Button = FYGE.Button;
import Container = FYGE.Container;
......@@ -17,7 +16,9 @@ import FrameAni = FYGE.FrameAni;
/** 初始坠落步长 */
const FIAL_STEP = 4
/** 初始跳跃步长 */
const JUMP_STEP = 20
const JUMP_STEP = 18
/** 坠落速率 */
const FIAL_MUI = 0.4
export class Bird extends Container {
/** 坠落步长 */
......@@ -26,8 +27,12 @@ export class Bird extends Container {
/** 跳跃步长 */
jumpStep = JUMP_STEP
/** 游戏玩家帧动画 */
player: FrameAni = null
/** 游戏是否结束 */
isGameOver:boolean = false
constructor() {
super()
this.initUi()
......@@ -61,10 +66,12 @@ export class Bird extends Container {
* 小鸟坠落
* @param acceleration 加速比
*/
fail(acceleration = 0) {
this.failStep += acceleration
// console.log(this.step.toFixed(2))
this.y = Math.max(this.y + this.failStep, 0)
fail(rate) {
const acceleration = FIAL_MUI
if(this.isGameOver) return
this.failStep += acceleration * rate
// console.log(this.failStep * rate)
this.y = Math.max(this.y + (this.failStep * rate) , 0)
if (this.y == 0) {
this.reset()
}
......@@ -72,8 +79,10 @@ export class Bird extends Container {
}
/** 小鸟跳跃 */
jump() {
jump(rate) {
if(this.isGameOver) return
if (this.y <= 0) return
// console.log('jump')
this.failStep -= this.jumpStep
}
......@@ -83,6 +92,14 @@ export class Bird extends Container {
this.jumpStep = JUMP_STEP
}
/** 游戏结束 */
gameOver() {
this.reset()
this.isGameOver = true
this.rotation = 0
this.player.reset()
}
destroy() {
super.destroy();
}
......
src/scenes/pipe.ts 0 → 100644
View file @ 40078fc7
import { changeScene } from "../../module/ctrls";
import { Scene } from "../../module/views/Scene";
import { Tools } from "../tools/Tools";
import UI from "../tools/UI";
import { RES } from '../../module/RES';
import Button = FYGE.Button;
import Container = FYGE.Container;
import Shape = FYGE.Shape;
import Sprite = FYGE.Sprite;
import TEXT_ALIGN = FYGE.TEXT_ALIGN;
import TextField = FYGE.TextField;
import VERTICAL_ALIGN = FYGE.VERTICAL_ALIGN;
import Texture = FYGE.Texture;
import FrameAni = FYGE.FrameAni;
import { Bird } from "./bird";
/**
* 获取区间随机数 [min,max)
* @export
* @param {*} min
* @param {*} max
* @return {*}
*/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min)) + min
}
export class Pipe extends Container {
/** 水管类型 */
pipeType: 'up' | 'down' | any = ''
constructor(type) {
super()
this.pipeType = type
this.init()
}
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
}
}
destroy() {
super.destroy();
}
}
export class PipeMannager {
/** 向上的水管回收池 */
upPipes: Pipe[] = []
/** 向下的水管回收池 */
downPipes: Pipe[] = []
/** 当前的水管池 */
pipes: { up: Pipe, down: Pipe }[] = []
/** 舞台 */
stage: Container = null
/** 生成水管最小缺口 */
minGap = 372
/** 生成水管最大缺口 */
maxGap = 432
/** 水管移动速度 */
speed = 3
timer = null
player:Bird = null
constructor(stage,player) {
this.stage = stage
this.player = player
}
/** 开始游戏 */
startGame() {
this.timer = setTimeout(() => {
this.createGroupPipe()
this.startGame()
}, 2000)
}
/** 创建一组水管 */
createGroupPipe() {
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
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)
this.pipes.push({
up: upP,
down: upD
})
this.stage.addChild(upD)
this.stage.addChild(upP)
}
/** 帧动画 */
enterFrame(rate) {
for (let i = 0; i < this.pipes.length; i++) {
if (!this.pipes[i]) continue
const { up, down } = this.pipes[i]
up.x -= this.speed * rate
down.x -= this.speed * rate
if (up.x <= -300 || down.x <= -400) {
this.upPipes.push(up)
this.stage.removeChild(up)
this.downPipes.push(down)
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('管道')
}
}
}
destroy() {
clearTimeout(this.timer)
}
}
\ No newline at end of file
src/scenes/slideBg.ts
View file @ 40078fc7
......@@ -2,7 +2,6 @@ import { changeScene } from "../../module/ctrls";
import { Scene } from "../../module/views/Scene";
import { Tools } from "../tools/Tools";
import UI from "../tools/UI";
import { LoadingScene } from "./LoadingScene";
import { RES } from '../../module/RES';
import Button = FYGE.Button;
import Container = FYGE.Container;
......@@ -23,15 +22,13 @@ export class SlideBg extends Container {
/** 页面滑动速度 */
speed = 10
slideKey = 1
constructor() {
super()
this.init()
}
init() {
Array(2).fill('').forEach((bg, i) => {
Array(2).fill('').forEach((k, i) => {
const bg:Container = this[`bg${i+1}`] = new Container()
bg.addChild(new Sprite(RES.getRes('com_bg.jpg')))
const base = new Sprite(RES.getRes('base.png'))
......@@ -45,10 +42,10 @@ export class SlideBg extends Container {
}
/** 帧动画 */
enterFrame() {
enterFrame(rate) {
[this.bg1, this.bg2].forEach((bg, i) => {
bg.x -= this.speed
if(bg.x === -750){
bg.x -= this.speed * rate
if(bg.x <= -750){
bg.x += 750 * 2
}
})
......
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