Skip to content

G
game-stydy
Commit 4e05afc9 authored by 熊东起's avatar 熊东起
Browse files
Options

add:--over

parent 9940487f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 4563 additions and 236 deletions
.gitignore 0 → 100644
View file @ 4e05afc9
# project ignores
node_modules
released
.DS_Store
.idea
output.js
output.js.map
\ No newline at end of file
README.md
View file @ 4e05afc9
This diff is collapsed.
index.html
View file @ 4e05afc9
......@@ -14,7 +14,7 @@
<!-- 渲染引擎 -->
<!-- <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>
<!-- <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>
......@@ -31,7 +31,7 @@
height: 100%;
overflow: hidden;
position: absolute;
background-color: #ffffff;
background-color: #73ad45;
/* background: linear-gradient(#93dbb7,#ff0,#b5d89a); */
/* background: linear-gradient(#93dbb7,#b5d89a); */
/* 背景图片，解决加载太慢，白屏问题,加了这个下面的__loading__可以删掉了 */
......@@ -43,13 +43,12 @@
</head>
<body>
<div id="__loading__" style="position:absolute;left:50%;top:50%;margin-left:-45px;color:#ffffff">拼命加载中...</div>
<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="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>
......@@ -58,8 +57,8 @@
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)
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);
......
package.json
View file @ 4e05afc9
{
"name": "tbgame",
"name": "babylon_demo1",
"version": "1.0.0",
"description": "",
"main": "index.html",
"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": {
"ali-oss": "^4.11.4",
"chalk": "^2.3.0",
"co": "^4.6.0",
"del": "^2.2.1",
"fs": "0.0.2",
"imagemin": "^7.0.1",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-pngquant": "^8.0.0",
"mock-webpack-plugin": "^2.0.0",
"path": "^0.12.7",
"progress": "^2.0.0",
"psd": "^3.2.0",
"readline": "^1.3.0",
"ts-loader": "^4.0.0",
"tslint": "^5.9.1",
"typescript": "^3.5.1",
"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": {
"matter-js": "^0.17.0"
},
"scripts": {
"psd": "node scripts/psdH && node scripts/flushRes",
"psdSin": "node scripts/psdHSin",
"clearSameImg": "node scripts/clearSameImg && node scripts/flushRes",
"createModule": "node scripts/createModule",
"createAllModule": "node scripts/createAllModule",
"flushRes": "node scripts/flushRes",
"handleRes": "node scripts/delRel && node scripts/copyRes && node scripts/createTm && node scripts/textureMerge && node scripts/delTm && node scripts/imageMin",
"upload": "node scripts/upload",
"build": "npm run handleRes && node scripts/mergeJson && npm run upload && npm run buildTS",
"watch": "webpack --watch",
"dev": "webpack-dev-server --open --config webpack.dev.js --host 0.0.0.0",
"dev1": "node scripts/devServer",
"buildTS": "webpack --config webpack.prod.js && node scripts/mergeJs",
"copyJs": "node scripts/copyJs",
"buildWeb": "npm run handleRes && node scripts/mergeJson && node scripts/upload 1",
"buildWebTS": "webpack --config webpack.prod.js && node scripts/uploadSingleJs 1"
},
"author": "MrKwon",
"license": "ISC"
}
}
src/GameScene/GUtils.ts
View file @ 4e05afc9
......@@ -18,4 +18,12 @@ export class GUtils {
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 @ 4e05afc9
This diff is collapsed.
src/GameScene/GameScene.ts
View file @ 4e05afc9
/**
* Created by _xdq on 2021/05/31.
* Created by _xdq on 2021/06/01.
* 推箱子场景
*/
import { LEVEL, RES } from "./GameCfg";
import { GUtils } from "./GUtils";
import { DIR, BLOCK } from "./types";
export class GameScene extends FYGE.Container {
private mapContainer: FYGE.Container;
private stepText: FYGE.TextField;
private lvText: FYGE.TextField;
private resetBtn: FYGE.Sprite;
private _lv: number = 1;
private dir: DIR = DIR.UP;
private playerPointer: { [key: string]: number } = { x: 0, y: 0 };
private curMap: number[][];
private _step: number = 0;
private get step(): number {
return this._step;
}
private set step(v: number) {
this._step = v;
this.stepText && (this.stepText.text = "步数" + v);
}
private get lv(): number {
return this._lv;
}
private set lv(v: number) {
this._lv = v;
this.lvText && (this.lvText.text = "关卡" + v);
}
constructor() {
super();
this.initGame();
let text = this.addChild(new FYGE.TextField());
text.text = "步数0";
text.textWidth = 250;
text.textAlign = FYGE.TEXT_ALIGN.CENTER;
text.x = 125;
text.y = 60;
text.size = 60;
this.stepText = text;
let lvText = this.addChild(new FYGE.TextField());
lvText.text = "关卡" + this.lv;
lvText.textWidth = 250;
lvText.textAlign = FYGE.TEXT_ALIGN.CENTER;
lvText.x = 375;
lvText.y = 60;
lvText.size = 60;
this.lvText = lvText;
let resetBtn = this.addChild(FYGE.Sprite.fromUrl(RES.resetBtn));
resetBtn.position.x = 0;
resetBtn.position.y = 1100;
this.resetBtn = resetBtn;
this.resetBtn.addEventListener(FYGE.MouseEvent.CLICK, this.resetGame, this);
this.onListenerKeyDown();
}
/** 初始化游戏 */
initGame() {
this.step = 0;
this.curMap = GUtils.copyArray(LEVEL[`LV_${this.lv}`]);
this.renderMap();
}
/** 重新开始本关 */
resetGame() {
this.initGame();
}
/** 监听键盘事件 */
private onListenerKeyDown() {
document.onkeydown = (e) => {
let p1 = {
x: 0,
y: 0
};
let p2 = {
x: 0,
y: 0
}
switch (e?.key) {
case "w":
this.dir = DIR.UP;
p1.x = this.playerPointer.x - 1;
p2.x = this.playerPointer.x - 2;
p1.y = p2.y = this.playerPointer.y;
break;
case "a":
this.dir = DIR.LEFT;
p1.x = p2.x = this.playerPointer.x;
p1.y = this.playerPointer.y - 1;
p2.y = this.playerPointer.y - 2;
break;
case "s":
this.dir = DIR.DOWN;
p1.x = this.playerPointer.x + 1;
p2.x = this.playerPointer.x + 2;
p1.y = p2.y = this.playerPointer.y;
break;
case "d":
this.dir = DIR.RIGHT;
p1.x = p2.x = this.playerPointer.x;
p1.y = this.playerPointer.y + 1;
p2.y = this.playerPointer.y + 2;
break;
}
//判断
this.onCheckMove(p1, p2);
}
}
/** 判断移动 */
onCheckMove(p1: { [key: string]: number }, p2: { [key: string]: number }) {
const { x: x1, y: y1 } = p1;
const { x: x2, y: y2 } = p2;
const { x, y } = this.playerPointer;
//墙壁不能移动
if (this.curMap[x1][y1] == BLOCK.wall) {
return false;
}
//1箱子 2墙壁不能移动
if (this.curMap[x1][y1] == BLOCK.box && (this.curMap[x2][y2] == BLOCK.wall || this.curMap[x2][y2] == BLOCK.box || this.curMap[x2][y2] == BLOCK.badBox)) {
return false;
}
//6火箱子 不能移动
if (this.curMap[x1][y1] == BLOCK.badBox && (this.curMap[x2][y2] == BLOCK.wall || this.curMap[x2][y2] == BLOCK.box || this.curMap[x2][y2] == BLOCK.badBox)) {
return false;
}
// 地板
if (this.curMap[x1][y1] == BLOCK.ground || this.curMap[x1][y1] == BLOCK.end) {
this.curMap[x][y] = BLOCK.ground;
this.curMap[x1][y1] = BLOCK.player;
}
// 1箱子 地板
if (this.curMap[x1][y1] == BLOCK.box && this.curMap[x2][y2] == BLOCK.ground) {
this.curMap[x][y] = BLOCK.ground;
this.curMap[x1][y1] = BLOCK.player;
this.curMap[x2][y2] = BLOCK.box;
}
//1箱子 和 终点
if (this.curMap[x1][y1] == BLOCK.box && this.curMap[x2][y2] == BLOCK.end) {
this.curMap[x][y] = BLOCK.ground;
this.curMap[x1][y1] = BLOCK.player;
this.curMap[x2][y2] = BLOCK.box;
}
//火箱子和 地板
if (this.curMap[x1][y1] == BLOCK.badBox && this.curMap[x2][y2] == BLOCK.ground) {
this.curMap[x][y] = BLOCK.ground;
this.curMap[x1][y1] = BLOCK.player;
this.curMap[x2][y2] = BLOCK.badBox;
}
//火箱子和终点
if (this.curMap[x1][y1] == BLOCK.badBox && this.curMap[x2][y2] == BLOCK.end) {
this.curMap[x][y] = BLOCK.ground;
this.curMap[x1][y1] = BLOCK.player;
this.curMap[x2][y2] = BLOCK.end;
}
if (LEVEL[`LV_${this.lv}`][x][y] == BLOCK.end) {
this.curMap[x][y] = BLOCK.end;
}
this.step++;
//重新渲染
this.renderMap();
if (this.gameOver()) {
// alert("过关");
console.log("9999")
this.lv++;
this.initGame();
}
}
/** 判断是否结束 */
private gameOver() {
const mapList = LEVEL[`LV_${this.lv}`];
for (let i = 0; i < mapList.length; i++) {
for (let j = 0; j < mapList[i].length; j++) {
if (mapList[i][j] == BLOCK.end && this.curMap[i][j] != BLOCK.box) {
return false;
}
}
}
return true;
}
/** 创建地图 */
private renderMap() {
this.mapContainer && this.mapContainer.removeAllChildren();
this.mapContainer = this.addChild(new FYGE.Container());
this.mapContainer.position.x = -425;
this.mapContainer.position.y = -100;
this.curMap.forEach((colum, i) => {
colum.forEach((row, j) => {
switch (row) {
case 0:
let block = this.mapContainer.addChild(new FYGE.Graphics());
block.beginFill(0x73ad45, 1).drawRect(0, 0, 80, 80).endFill();
block.position.x = j * 80;
block.position.y = i * 80;
break;
case 1:
let wall = this.mapContainer.addChild(FYGE.Sprite.fromUrl(RES.wall));
wall.width = wall.height = 80;
wall.position.x = j * 80;
wall.position.y = i * 80;
break;
case 2:
break;
case 3:
let box = this.mapContainer.addChild(FYGE.Sprite.fromUrl(RES.box));
box.width = box.height = 80;
box.position.x = j * 80;
box.position.y = i * 80;
break;
case 4:
let end = this.mapContainer.addChild(FYGE.Sprite.fromUrl(RES.end));
end.width = end.height = 80;
end.position.x = j * 80;
end.position.y = i * 80;
break;
case 5:
let player = this.mapContainer.addChild(FYGE.Sprite.fromUrl(RES.player));
player.width = 212 * 0.25;
player.height = 329 * 0.25;
player.position.x = j * 80 + 10;
player.position.y = i * 80;
this.playerPointer.x = i;
this.playerPointer.y = j;
break;
case 6:
let badBox = this.mapContainer.addChild(FYGE.Sprite.fromUrl(RES.badBox));
badBox.width = badBox.height = 80;
badBox.position.x = j * 80;
badBox.position.y = i * 80;
break;
}
});
});
this.addChild(this.stepText);
this.addChild(this.lvText);
this.addChild(this.resetBtn);
}
}
\ No newline at end of file
src/GameScene/types.ts
View file @ 4e05afc9
/**
* 砖块模型
* @export
* @interface Rect3DBoxOption
*/
export interface Rect3DBoxOption {
width: number,
height: number,
depth: number,
position?: FYGE.Vector3
material: FYGE.BaseMaterialParamsInt
/** 格子 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 @ 4e05afc9
/**
* 全局事件，为了和小程序交互
* 有可能多处页面用到，所以单开
*/
export const GDispatcher = new FYGE.EventDispatcher();
import { GameScene } from "./GameScene/GameScene";
export class Main {
//主舞台
stage: FYGE.Stage;
private requestID;
private _pause: boolean;
private canvas: HTMLCanvasElement
private canvas: HTMLCanvasElement;
constructor(canvas: HTMLCanvasElement) {
var sysInfo;
//淘宝小程序环境就用canvas初始化
if (!window) {//自行处理吧，这么判断也不保险，万一淘宝小程序加进了window
FYGE.initedByCanvas(canvas)//里面会设置env为tb，这个很重要
//@ts-ignore 存在my就初始化
sysInfo = my.getSystemInfoSync()
}
//建舞台
var stage = new FYGE.Stage(
canvas,
750,//设计宽度，按设计搞给的就行
1624,//设计高度
sysInfo && sysInfo.windowWidth || document.body.clientWidth,
sysInfo && sysInfo.windowHeight || document.body.clientHeight,
750, //设计宽度，按设计搞给的就行
1624, //设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL,
true //视窗居中裁切
false //视窗居中裁切
);
this.stage = stage;
this.canvas = canvas;//赋值下，为了下面的destroy的cancelAnimationFrame
this.canvas = canvas; //赋值下，为了下面的destroy的cancelAnimationFrame
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, this.onAddToStage, this);
//循环
......@@ -38,65 +25,24 @@ export class Main {
loop();
function loop() {
if (!self._pause) {
// stats.begin();
FYGE.Tween.flush()
FYGE.Tween.flush();
stage.flush();
// stats.end();
}
//为了兼容多page的canvas
self.requestID = window.requestAnimationFrame(loop);
}
}
private async onAddToStage() {
//@ts-ignore
const scene3D:GameScene3D = this.stage.addChild(new GameScene3D());
scene3D.setView(0, this.stage.viewRect.y, this.stage.stageWidth, this.stage.stageHeight);
}
/**
* 添加全局事件，用于小程序的交互调用
* 一直很犹豫要不要放在main的实例里，还是和Main同级导出，还有上面的pause，run，下面的事件等
* @param name
* @param fun
* @param thisObj
*/
addGlobalEvent(name: string, fun: Function, thisObj?: any, once: boolean = false) {
if (once) {
GDispatcher.once(name, fun, thisObj)
} else {
GDispatcher.addEventListener(name, fun, thisObj)
}
}
/**
* 派发全局事件，用于小程序的交互调用
* @param name 可以是事件名，也可以是事件
* @param data
*/
dispatchGlobalEvent(name: string | any, data?: any) {
GDispatcher.dispatchEvent(name, data)
}
/**
* 移除全局事件，用于小程序交互调用
* @param name
* @param fun
* @param thisObj
*/
removeGlobalEvent(name: string, fun: Function, thisObj?: any) {
GDispatcher.removeEventListener(name, fun, thisObj)
const gameScene: GameScene = this.stage.addChild(new GameScene());
}
destroy() {
//Tween都移除，注意吧，可能原先的也被移除,,对于多page时注意，会把其他页面的也去掉
FYGE.Tween.removeAllTweens()
FYGE.Tween.removeAllTweens();
//停掉计时器
//@ts-ignore 为了兼容多page的canvas
FYGE.getEnv() == "tb" ? this.canvas.cancelAnimationFrame(this.requestID) :
window.cancelAnimationFrame(this.requestID);
//舞台销毁
this.stage.destroy();
//全局事件置空
GDispatcher.removeAllEventListener();
}
}
tsConfig.json
View file @ 4e05afc9
......@@ -7,7 +7,6 @@
"removeComments": true,
"noEmitOnError":true,
"outDir":"dist",
/*"outFile": "./index.js",*/
"lib": [
"es5",
"dom",
......
webpack.common.js
View file @ 4e05afc9
const path = require('path');
module.exports = {
entry: './src/Main.ts',
entry: './src/main.ts',
module: {
rules: [
{
......@@ -11,7 +10,6 @@ module.exports = {
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
......
webpack.dev.js
View file @ 4e05afc9
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const MockWebpackPlugin = require('mock-webpack-plugin');
module.exports = merge(common, {
mode: "development",
devtool: 'eval-source-map',
devServer: {
contentBase: '.',
proxy: {
'/plugin/*':'http://localhost:3000',
'/ngapi/*': 'http://localhost:3000',
'/ngame/*': 'http://localhost:3000',
'/hdtool/*': 'http://localhost:3000',
port: 9000,
hot: true
}
},
plugins: [
new MockWebpackPlugin({
config: {},
port: 3000
})
]
});
\ No newline at end of file
webpack.prod.js
View file @ 4e05afc9
......@@ -3,7 +3,7 @@ const common = require('./webpack.common.js');
const webpack = require('webpack');
module.exports = merge(common, {
mode: "production",//production development
mode: "production",
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
......
yarn.lock 0 → 100644
View file @ 4e05afc9
This source diff could not be displayed because it is too large. You can view the blob instead.
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