Skip to content

G
game-stydy
Commit 9582e96b authored by 谌继荃's avatar 谌继荃
Browse files
Options

初始化推箱子

parent 4e05afc9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 5284 additions and 5284 deletions
.gitignore
View file @ 9582e96b
# project ignores
node_modules
released
.DS_Store
.idea
output.js
# project ignores
node_modules
released
.DS_Store
.idea
output.js
output.js.map
\ No newline at end of file
README.md
View file @ 9582e96b
This diff is collapsed.
index.html
View file @ 9582e96b
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</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" />
<!-- 渲染引擎 -->
<!-- <script src="//yun.duiba.com.cn/db_games/libs0924/fyge2020.min.js" crossorigin="anonymous"></script> -->
<!-- svga解析库 -->
<!-- <script src="//yun.duiba.com.cn/db_games/libs0924/svgaParser.minWeb.js" crossorigin="anonymous"></script> -->
<!-- 本地的js,需要souremap调试的用本地js -->
<script src="libs/fyge.min.js"></script>
<script src="//yun.duiba.com.cn/db_games/libs0924/howler.min.js"></script>
<!-- <script src="libs/svgaParser.min.js"></script> -->
<!-- <script src="libs/svgaParser.min1.js"></script> -->
<style>
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-color: #73ad45;
/* background: linear-gradient(#93dbb7,#ff0,#b5d89a); */
/* background: linear-gradient(#93dbb7,#b5d89a); */
/* 背景图片，解决加载太慢，白屏问题,加了这个下面的__loading__可以删掉了 */
/* background-size: 100%;
background-position: center;
background-image: url("https://yun.duiba.com.cn/db_games/activity/game/1550472986/resource/assets/playscene/playscenebg.jpg"); */
}
</style>
</head>
<body>
<div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<!-- 帧率检测 -->
<!-- <script src="//yun.duiba.com.cn/db_games/libs0924/stats.js"></script> -->
<!-- <script src="https://yun.duiba.com.cn/db_games/libs0126/stats.js"></script> -->
<script src="libs/matter.min.js"></script>
<script type="text/javascript" src="//yun.duiba.com.cn/js-libs/vConsole/3.3.4/vconsole.min.js"
crossorigin="anonymous"></script>
<script>
var vConsole = new VConsole();
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 Main(canvas);
var mouseEvent = main.stage.onMouseEvent.bind(main.stage);
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false);
window.stage = main.stage
})
</script>
<!-- 构建的js -->
<script src="output.js" crossorigin="anonymous"></script>
</body>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</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" />
<!-- 渲染引擎 -->
<!-- <script src="//yun.duiba.com.cn/db_games/libs0924/fyge2020.min.js" crossorigin="anonymous"></script> -->
<!-- svga解析库 -->
<!-- <script src="//yun.duiba.com.cn/db_games/libs0924/svgaParser.minWeb.js" crossorigin="anonymous"></script> -->
<!-- 本地的js,需要souremap调试的用本地js -->
<script src="libs/fyge.min.js"></script>
<script src="//yun.duiba.com.cn/db_games/libs0924/howler.min.js"></script>
<!-- <script src="libs/svgaParser.min.js"></script> -->
<!-- <script src="libs/svgaParser.min1.js"></script> -->
<style>
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-color: #73ad45;
/* background: linear-gradient(#93dbb7,#ff0,#b5d89a); */
/* background: linear-gradient(#93dbb7,#b5d89a); */
/* 背景图片，解决加载太慢，白屏问题,加了这个下面的__loading__可以删掉了 */
/* background-size: 100%;
background-position: center;
background-image: url("https://yun.duiba.com.cn/db_games/activity/game/1550472986/resource/assets/playscene/playscenebg.jpg"); */
}
</style>
</head>
<body>
<div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<!-- 帧率检测 -->
<!-- <script src="//yun.duiba.com.cn/db_games/libs0924/stats.js"></script> -->
<!-- <script src="https://yun.duiba.com.cn/db_games/libs0126/stats.js"></script> -->
<script src="libs/matter.min.js"></script>
<script type="text/javascript" src="//yun.duiba.com.cn/js-libs/vConsole/3.3.4/vconsole.min.js"
crossorigin="anonymous"></script>
<script>
var vConsole = new VConsole();
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 Main(canvas);
var mouseEvent = main.stage.onMouseEvent.bind(main.stage);
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false);
window.stage = main.stage
})
</script>
<!-- 构建的js -->
<script src="output.js" crossorigin="anonymous"></script>
</body>
</html>
\ No newline at end of file
libs/SvgaParser.d.ts
View file @ 9582e96b
declare module SvgaParser {
/**
* 加载方法
* @param url 资源路径
* @param success
* @param failure
*/
export function loadSvga(url: string, success: (videoItem: VideoEntity) => void, failure?: (err: string) => void): void;
/**
* 导出只是当作类型接口用
*/
export interface VideoEntity {
/**
* SVGA 文件版本
*/
version: string;
/**
* 影片尺寸
*/
videoSize: {
width: number;
height: number;
};
/**
* 帧率，60，30等每秒
*/
FPS: number;
/**
* 总帧数
*/
frames: number;
/**
* base64图片数据记录
*/
images: {
[key: string]: string
};
/**
* 图片是否已被缓存，缓存全局，注意名字覆盖
*/
hasBeenCached: boolean;
/**
* sprite对象数据
*/
sprites: SpriteEntity[];
}
interface SpriteEntity {
/**
* 标识
*/
matteKey: string;
/**
* 图片key值
*/
imageKey: string;
/**
* 帧数据数组
*/
frames: FrameEntity[];
}
/**
* 还有很多其他数据，暂不需要，比如矢量路径和遮罩路径暂时都无
*/
interface FrameEntity {
/**
* 透明度
*/
alpha: number;
/**
* 2维矩阵数据
*/
transform: {
a: number,
b: number,
c: number,
d: number,
tx: number,
ty: number,
};
}
}
declare module SvgaParser {
/**
* 加载方法
* @param url 资源路径
* @param success
* @param failure
*/
export function loadSvga(url: string, success: (videoItem: VideoEntity) => void, failure?: (err: string) => void): void;
/**
* 导出只是当作类型接口用
*/
export interface VideoEntity {
/**
* SVGA 文件版本
*/
version: string;
/**
* 影片尺寸
*/
videoSize: {
width: number;
height: number;
};
/**
* 帧率，60，30等每秒
*/
FPS: number;
/**
* 总帧数
*/
frames: number;
/**
* base64图片数据记录
*/
images: {
[key: string]: string
};
/**
* 图片是否已被缓存，缓存全局，注意名字覆盖
*/
hasBeenCached: boolean;
/**
* sprite对象数据
*/
sprites: SpriteEntity[];
}
interface SpriteEntity {
/**
* 标识
*/
matteKey: string;
/**
* 图片key值
*/
imageKey: string;
/**
* 帧数据数组
*/
frames: FrameEntity[];
}
/**
* 还有很多其他数据，暂不需要，比如矢量路径和遮罩路径暂时都无
*/
interface FrameEntity {
/**
* 透明度
*/
alpha: number;
/**
* 2维矩阵数据
*/
transform: {
a: number,
b: number,
c: number,
d: number,
tx: number,
ty: number,
};
}
}
declare module "svga-parser" { export = SvgaParser; }
\ No newline at end of file
libs/fyge.min.js
View file @ 9582e96b
This diff is collapsed.
libs/howler.d.ts
View file @ 9582e96b
This diff is collapsed.
libs/howler.min.js
View file @ 9582e96b
This diff is collapsed.
libs/matter.min.js
View file @ 9582e96b
This diff is collapsed.
libs/stats.js
View file @ 9582e96b
var Stats = function () {
var startTime = Date.now(), prevTime = startTime;
var ms = 0, msMin = Infinity, msMax = 0;
var fps = 0, fpsMin = Infinity, fpsMax = 0;
var frames = 0, mode = 0;
var container = document.createElement('div');
container.id = 'stats';
container.addEventListener('mousedown', function (event) { event.preventDefault(); setMode(++mode % 2) }, false);
container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
var fpsDiv = document.createElement('div');
fpsDiv.id = 'fps';
fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
container.appendChild(fpsDiv);
var fpsText = document.createElement('div');
fpsText.id = 'fpsText';
fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
fpsText.innerHTML = 'FPS';
fpsDiv.appendChild(fpsText);
var fpsGraph = document.createElement('div');
fpsGraph.id = 'fpsGraph';
fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
fpsDiv.appendChild(fpsGraph);
while (fpsGraph.children.length < 74) {
var bar = document.createElement('span');
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
fpsGraph.appendChild(bar);
}
var msDiv = document.createElement('div');
msDiv.id = 'ms';
msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
container.appendChild(msDiv);
var msText = document.createElement('div');
msText.id = 'msText';
msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
msText.innerHTML = 'MS';
msDiv.appendChild(msText);
var msGraph = document.createElement('div');
msGraph.id = 'msGraph';
msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
msDiv.appendChild(msGraph);
while (msGraph.children.length < 74) {
var bar = document.createElement('span');
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
msGraph.appendChild(bar);
}
var setMode = function (value) {
mode = value;
switch (mode) {
case 0:
fpsDiv.style.display = 'block';
msDiv.style.display = 'none';
break;
case 1:
fpsDiv.style.display = 'none';
msDiv.style.display = 'block';
break;
}
}
var updateGraph = function (dom, value) {
var child = dom.appendChild(dom.firstChild);
child.style.height = value + 'px';
}
return {
REVISION: 11,
domElement: container,
setMode: setMode,
begin: function () {
startTime = Date.now();
},
end: function () {
var time = Date.now();
ms = time - startTime;
msMin = Math.min(msMin, ms);
msMax = Math.max(msMax, ms);
msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
updateGraph(msGraph, Math.min(30, 30 - (ms / 200) * 30));
frames++;
if (time > prevTime + 1000) {
fps = Math.round((frames * 1000) / (time - prevTime));
fpsMin = Math.min(fpsMin, fps);
fpsMax = Math.max(fpsMax, fps);
fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
updateGraph(fpsGraph, Math.min(30, 30 - (fps / 100) * 30));
prevTime = time;
frames = 0;
}
return time;
},
update: function () {
startTime = this.end();
}
}
};
//执行
var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
aa();
function aa() {
stats.update();
requestAnimationFrame(aa)
var Stats = function () {
var startTime = Date.now(), prevTime = startTime;
var ms = 0, msMin = Infinity, msMax = 0;
var fps = 0, fpsMin = Infinity, fpsMax = 0;
var frames = 0, mode = 0;
var container = document.createElement('div');
container.id = 'stats';
container.addEventListener('mousedown', function (event) { event.preventDefault(); setMode(++mode % 2) }, false);
container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
var fpsDiv = document.createElement('div');
fpsDiv.id = 'fps';
fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
container.appendChild(fpsDiv);
var fpsText = document.createElement('div');
fpsText.id = 'fpsText';
fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
fpsText.innerHTML = 'FPS';
fpsDiv.appendChild(fpsText);
var fpsGraph = document.createElement('div');
fpsGraph.id = 'fpsGraph';
fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
fpsDiv.appendChild(fpsGraph);
while (fpsGraph.children.length < 74) {
var bar = document.createElement('span');
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
fpsGraph.appendChild(bar);
}
var msDiv = document.createElement('div');
msDiv.id = 'ms';
msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
container.appendChild(msDiv);
var msText = document.createElement('div');
msText.id = 'msText';
msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
msText.innerHTML = 'MS';
msDiv.appendChild(msText);
var msGraph = document.createElement('div');
msGraph.id = 'msGraph';
msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
msDiv.appendChild(msGraph);
while (msGraph.children.length < 74) {
var bar = document.createElement('span');
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
msGraph.appendChild(bar);
}
var setMode = function (value) {
mode = value;
switch (mode) {
case 0:
fpsDiv.style.display = 'block';
msDiv.style.display = 'none';
break;
case 1:
fpsDiv.style.display = 'none';
msDiv.style.display = 'block';
break;
}
}
var updateGraph = function (dom, value) {
var child = dom.appendChild(dom.firstChild);
child.style.height = value + 'px';
}
return {
REVISION: 11,
domElement: container,
setMode: setMode,
begin: function () {
startTime = Date.now();
},
end: function () {
var time = Date.now();
ms = time - startTime;
msMin = Math.min(msMin, ms);
msMax = Math.max(msMax, ms);
msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
updateGraph(msGraph, Math.min(30, 30 - (ms / 200) * 30));
frames++;
if (time > prevTime + 1000) {
fps = Math.round((frames * 1000) / (time - prevTime));
fpsMin = Math.min(fpsMin, fps);
fpsMax = Math.max(fpsMax, fps);
fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
updateGraph(fpsGraph, Math.min(30, 30 - (fps / 100) * 30));
prevTime = time;
frames = 0;
}
return time;
},
update: function () {
startTime = this.end();
}
}
};
//执行
var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
aa();
function aa() {
stats.update();
requestAnimationFrame(aa)
}
\ No newline at end of file
libs/svgaParser.min.js
View file @ 9582e96b
This source diff could not be displayed because it is too large. You can view the blob instead.
libs/svgaParser.min1.js
View file @ 9582e96b
This diff is collapsed.
package.json
View file @ 9582e96b
{
"name": "babylon_demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack-dev-server --open --config webpack.dev.js --host 0.0.0.0"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "4.0.0",
"typescript": "^4.2.4",
"webpack": "^4.1.0",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.0",
"webpack-merge": "^4.1.2"
},
"dependencies": {
}
}
{
"name": "babylon_demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack-dev-server --open --config webpack.dev.js --host 0.0.0.0"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "4.0.0",
"typescript": "^4.2.4",
"webpack": "^4.1.0",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.0",
"webpack-merge": "^4.1.2"
},
"dependencies": {
}
}
project.json
View file @ 9582e96b
{
"type": "activity",
"name": "template"
{
"type": "activity",
"name": "template"
}
\ No newline at end of file
src/GameScene/GUtils.ts
View file @ 9582e96b
/**
* Created by _xdq on 2021/04/07.
* 公共方法
* @export
* @class GUtils
*/
export class GUtils {
/** 随机数 */
static getRandom(max: number, min: number): number {
return Number((Math.random() * (max - min) + min).toFixed(1));
}
/** 获取角度 */
static getAngle(dy: number, dx: number): number {
const angle = Math.atan2(dy, dx) / Math.PI * 180;
return (angle + 360) % 360;
}
/** 判断整数 */
static isInteger(obj: any) {
return typeof obj === 'number' && obj % 1 === 0;
}
/** 拷贝数组 */
static copyArray(arr: Array<any>) {
let newArr = [];
for (var i = 0; i < arr.length; i++) {
newArr[i] = arr[i].concat();
}
return newArr;
}
/**
* Created by _xdq on 2021/04/07.
* 公共方法
* @export
* @class GUtils
*/
export class GUtils {
/** 随机数 */
static getRandom(max: number, min: number): number {
return Number((Math.random() * (max - min) + min).toFixed(1));
}
/** 获取角度 */
static getAngle(dy: number, dx: number): number {
const angle = Math.atan2(dy, dx) / Math.PI * 180;
return (angle + 360) % 360;
}
/** 判断整数 */
static isInteger(obj: any) {
return typeof obj === 'number' && obj % 1 === 0;
}
/** 拷贝数组 */
static copyArray(arr: Array<any>) {
let newArr = [];
for (var i = 0; i < arr.length; i++) {
newArr[i] = arr[i].concat();
}
return newArr;
}
}
\ No newline at end of file
src/GameScene/GameCfg.ts
View file @ 9582e96b
This diff is collapsed.
src/GameScene/GameMgr.ts
View file @ 9582e96b
/**
* Created by _xdq on 2021/04/07.
* 静态方法
* @export
* @class GameCfg
*/
export class GameCfg {
private static _instance: GameCfg;
public static get Ins(): GameCfg {
if (!this._instance)
this._instance = new GameCfg();
return this._instance;
}
/**
* 获得texture纹理
* @param {string} url
* @memberof GameCfg
*/
createTexture(url: string) {
let _texture: FYGE.Texture = url ? FYGE.Texture.fromUrl(url) : null;
_texture.baseTexture.premultipliedAlpha = false;
return _texture;
}
/**
* Created by _xdq on 2021/04/07.
* 静态方法
* @export
* @class GameCfg
*/
export class GameCfg {
private static _instance: GameCfg;
public static get Ins(): GameCfg {
if (!this._instance)
this._instance = new GameCfg();
return this._instance;
}
/**
* 获得texture纹理
* @param {string} url
* @memberof GameCfg
*/
createTexture(url: string) {
let _texture: FYGE.Texture = url ? FYGE.Texture.fromUrl(url) : null;
_texture.baseTexture.premultipliedAlpha = false;
return _texture;
}
}
\ No newline at end of file
src/GameScene/GameScene.ts
View file @ 9582e96b
This diff is collapsed.
src/GameScene/SoundMgr.ts
View file @ 9582e96b
export const SoundType = {
boom: "//yun.duiba.com.cn/aurora/assets/e3c91bdea3e14eff8cc042a7481f61355edb8b13.mp3",
light: "//yun.duiba.com.cn/aurora/assets/739c5aef1331b32894473ec888d7b7d5220b4ede.mp3",
pick: "//yun.duiba.com.cn/aurora/assets/b4250ad1e151dd796a62cc94ebb704e65bdc3f8a.mp3"
}
let _isFlag = false;
/**
* 提前加载音频
* @param type
*/
export function preloadSound() {
for (let item in SoundType) {
soundHash[SoundType[item]] = new Howl({
src: SoundType[item],
preload: true,
});
}
}
/**
* 根据路径记录
*/
const soundHash: { [key: string]: Howl } = {};
export function playSound(src: string, loop: boolean = false) {
console.log("999---2222",_isFlag);
if (_isFlag) return;
//console.log('测试音效',src);
let sound: Howl;
//循环的，且有缓存，取缓存的
if (soundHash[src] && loop) sound = soundHash[src]
//没有就新建
if (!sound) sound = new Howl({ src: [src], autoplay: false, loop });
//记录下，方便停止
soundHash[src] = sound;
//不循环删除缓存
if (!loop) sound.on('stop', function () {
delete soundHash[src]
});
//播放
sound.play();
//console.log('测试是否播放音效',src);
//返回一个，可以自行控制
return sound;
}
export function stopSound(src: string) {
if (soundHash[src]) soundHash[src].stop();
}
export function stopAllSound() {
_isFlag = true;
console.log("999---1111",_isFlag);
for (let key in soundHash) soundHash[key].stop();
}
export function playAllSound() {
_isFlag = false;
// for (let key in soundHash) soundHash[key].play();
}
//设置隐藏属性和改变可见属性的事件的名称
let hidden: string, visibilityChange: string;
if (typeof document.hidden !== 'undefined') {
hidden = 'hidden';
visibilityChange = 'visibilitychange';
} else if (typeof document['msHidden'] !== 'undefined') {
hidden = 'msHidden';
visibilityChange = 'msvisibilitychange';
} else if (typeof document['webkitHidden'] !== 'undefined') {
hidden = 'webkitHidden';
visibilityChange = 'webkitvisibilitychange';
}
const handleVisibilityChange = (e) => {
if (document.visibilityState == "visible") {
playAllSound();
console.log("网页显示")
} else if (document.visibilityState == "hidden") {
stopAllSound()
console.log("网页隐藏")
}
};
document.addEventListener(
visibilityChange,
handleVisibilityChange,
false
);
window.onbeforeunload = function () {
//发接口
}
export const SoundType = {
boom: "//yun.duiba.com.cn/aurora/assets/e3c91bdea3e14eff8cc042a7481f61355edb8b13.mp3",
light: "//yun.duiba.com.cn/aurora/assets/739c5aef1331b32894473ec888d7b7d5220b4ede.mp3",
pick: "//yun.duiba.com.cn/aurora/assets/b4250ad1e151dd796a62cc94ebb704e65bdc3f8a.mp3"
}
let _isFlag = false;
/**
* 提前加载音频
* @param type
*/
export function preloadSound() {
for (let item in SoundType) {
soundHash[SoundType[item]] = new Howl({
src: SoundType[item],
preload: true,
});
}
}
/**
* 根据路径记录
*/
const soundHash: { [key: string]: Howl } = {};
export function playSound(src: string, loop: boolean = false) {
console.log("999---2222",_isFlag);
if (_isFlag) return;
//console.log('测试音效',src);
let sound: Howl;
//循环的，且有缓存，取缓存的
if (soundHash[src] && loop) sound = soundHash[src]
//没有就新建
if (!sound) sound = new Howl({ src: [src], autoplay: false, loop });
//记录下，方便停止
soundHash[src] = sound;
//不循环删除缓存
if (!loop) sound.on('stop', function () {
delete soundHash[src]
});
//播放
sound.play();
//console.log('测试是否播放音效',src);
//返回一个，可以自行控制
return sound;
}
export function stopSound(src: string) {
if (soundHash[src]) soundHash[src].stop();
}
export function stopAllSound() {
_isFlag = true;
console.log("999---1111",_isFlag);
for (let key in soundHash) soundHash[key].stop();
}
export function playAllSound() {
_isFlag = false;
// for (let key in soundHash) soundHash[key].play();
}
//设置隐藏属性和改变可见属性的事件的名称
let hidden: string, visibilityChange: string;
if (typeof document.hidden !== 'undefined') {
hidden = 'hidden';
visibilityChange = 'visibilitychange';
} else if (typeof document['msHidden'] !== 'undefined') {
hidden = 'msHidden';
visibilityChange = 'msvisibilitychange';
} else if (typeof document['webkitHidden'] !== 'undefined') {
hidden = 'webkitHidden';
visibilityChange = 'webkitvisibilitychange';
}
const handleVisibilityChange = (e) => {
if (document.visibilityState == "visible") {
playAllSound();
console.log("网页显示")
} else if (document.visibilityState == "hidden") {
stopAllSound()
console.log("网页隐藏")
}
};
document.addEventListener(
visibilityChange,
handleVisibilityChange,
false
);
window.onbeforeunload = function () {
//发接口
}
src/GameScene/types.ts
View file @ 9582e96b
/** 格子 0 无 1 墙壁 2 地板 3 箱子 4 箱子终点 5 人 */
export enum BLOCK {
wall = 1,
ground = 2,
box = 3,
end = 4,
player = 5,
badBox = 6
}
/** 方向 */
export enum DIR {
UP = 1,
DOWN = 2,
LEFT = 3,
RIGHT = 4
/** 格子 0 无 1 墙壁 2 地板 3 箱子 4 箱子终点 5 人 */
export enum BLOCK {
wall = 1,
ground = 2,
box = 3,
end = 4,
player = 5,
badBox = 6
}
/** 方向 */
export enum DIR {
UP = 1,
DOWN = 2,
LEFT = 3,
RIGHT = 4
}
\ No newline at end of file
src/Main.ts
View file @ 9582e96b
import { GameScene } from "./GameScene/GameScene";
export class Main {
//主舞台
stage: FYGE.Stage;
private requestID;
private _pause: boolean;
private canvas: HTMLCanvasElement;
constructor(canvas: HTMLCanvasElement) {
//建舞台
var stage = new FYGE.Stage(
canvas,
750, //设计宽度，按设计搞给的就行
1624, //设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL,
false //视窗居中裁切
);
this.stage = stage;
this.canvas = canvas; //赋值下，为了下面的destroy的cancelAnimationFrame
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, this.onAddToStage, this);
//循环
var self = this;
loop();
function loop() {
if (!self._pause) {
FYGE.Tween.flush();
stage.flush();
}
//为了兼容多page的canvas
self.requestID = window.requestAnimationFrame(loop);
}
}
private async onAddToStage() {
const gameScene: GameScene = this.stage.addChild(new GameScene());
}
destroy() {
//Tween都移除，注意吧，可能原先的也被移除,,对于多page时注意，会把其他页面的也去掉
FYGE.Tween.removeAllTweens();
//停掉计时器
//@ts-ignore 为了兼容多page的canvas
window.cancelAnimationFrame(this.requestID);
//舞台销毁
this.stage.destroy();
}
}
import { GameScene } from "./GameScene/GameScene";
export class Main {
//主舞台
stage: FYGE.Stage;
private requestID;
private _pause: boolean;
private canvas: HTMLCanvasElement;
constructor(canvas: HTMLCanvasElement) {
//建舞台
var stage = new FYGE.Stage(
canvas,
750, //设计宽度，按设计搞给的就行
1624, //设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL,
false //视窗居中裁切
);
this.stage = stage;
this.canvas = canvas; //赋值下，为了下面的destroy的cancelAnimationFrame
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, this.onAddToStage, this);
//循环
var self = this;
loop();
function loop() {
if (!self._pause) {
FYGE.Tween.flush();
stage.flush();
}
//为了兼容多page的canvas
self.requestID = window.requestAnimationFrame(loop);
}
}
private async onAddToStage() {
const gameScene: GameScene = this.stage.addChild(new GameScene());
}
destroy() {
//Tween都移除，注意吧，可能原先的也被移除,,对于多page时注意，会把其他页面的也去掉
FYGE.Tween.removeAllTweens();
//停掉计时器
//@ts-ignore 为了兼容多page的canvas
window.cancelAnimationFrame(this.requestID);
//舞台销毁
this.stage.destroy();
}
}
tsConfig.json
View file @ 9582e96b
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"removeComments": true,
"noEmitOnError":true,
"outDir":"dist",
"lib": [
"es5",
"dom",
"es2015.promise"
]
},
"exclude": [
"node_modules"
]
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"removeComments": true,
"noEmitOnError":true,
"outDir":"dist",
"lib": [
"es5",
"dom",
"es2015.promise"
]
},
"exclude": [
"node_modules"
]
}
\ No newline at end of file
webpack.common.js
View file @ 9582e96b
const path = require('path');
module.exports = {
entry: './src/main.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'output.js',
path: __dirname,
libraryTarget: 'umd',
}
const path = require('path');
module.exports = {
entry: './src/main.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'output.js',
path: __dirname,
libraryTarget: 'umd',
}
};
\ No newline at end of file
webpack.dev.js
View file @ 9582e96b
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: "development",
devtool: 'eval-source-map',
devServer: {
contentBase: '.',
port: 9000,
hot: true
}
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: "development",
devtool: 'eval-source-map',
devServer: {
contentBase: '.',
port: 9000,
hot: true
}
});
\ No newline at end of file
webpack.prod.js
View file @ 9582e96b
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
module.exports = merge(common, {
mode: "production",
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
module.exports = merge(common, {
mode: "production",
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});
\ No newline at end of file
yarn.lock
View file @ 9582e96b
This diff is collapsed.
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