Skip to content

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

初始化项目

parent 6a30f9f6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3086 additions and 3036 deletions
dist/bundle.js
View file @ c19ec7c9
This diff is collapsed.
package.json
View file @ c19ec7c9
{
"scripts": {
"start": "webpack serve --open",
"build": "webpack"
},
"devDependencies": {
"ts-loader": "^9.2.6",
"typescript": "^4.4.4",
"webpack": "^5.61.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
}
}
{
"scripts": {
"start": "webpack serve --open",
"build": "webpack"
},
"devDependencies": {
"ts-loader": "^9.2.6",
"typescript": "^4.4.4",
"webpack": "^5.61.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
}
}
public/bundle.js
View file @ c19ec7c9
This diff is collapsed.
public/index.html
View file @ c19ec7c9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://yun.duiba.com.cn/db_games/libs0924/fyge2018.minSpine.js" crossorigin="anonymous"></script>
<style>
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-color: #faf4f4;
/* 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">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<script src="bundle.js"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://yun.duiba.com.cn/db_games/libs0924/fyge2018.minSpine.js" crossorigin="anonymous"></script>
<style>
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-color: #faf4f4;
/* 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">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<script src="bundle.js"></script>
</body>
</html>
\ No newline at end of file
src/dragdrop/DragDropEvent.ts
View file @ c19ec7c9
export default class DragDropEvent extends FYGE.Event {
static DRAG_START = 'DRAG_START';
static DRAG_END = 'DRAG_END';
export default class DragDropEvent extends FYGE.Event {
static DRAG_START = 'DRAG_START';
static DRAG_END = 'DRAG_END';
}
\ No newline at end of file
src/dragdrop/DragDropManager.ts
View file @ c19ec7c9
import DragDropable from "./DragDropable";
import DragDropEvent from "./DragDropEvent";
//管理一个拖放实例
export default class DragDropManager extends FYGE.EventDispatcher {
//初始化拖放对象事件
public add(item: DragDropable) {
item.addEventListener('DROP', this.onDisplayItemDrop, this)
item.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, this.onMouseDown, this)
item.once(FYGE.Event.REMOVED_FROM_STAGE, this.onRemoveFromStage, this)
}
onRemoveFromStage = (event: FYGE.Event) => {
const item = event.target;
this.remove(item)
}
remove(item) {
item.removeEventListener('DROP', this.onDisplayItemDrop, this)
item.removeEventListener(FYGE.MouseEvent.MOUSE_DOWN, this.onMouseDown, this)
}
private onMouseDown(event: FYGE.MouseEvent) {
const item: DragDropable = event.target;
if (!item.checkCanDragDrop()) return;
item.startDrag(event);
this.dispatchEvent(DragDropEvent.DRAG_START, item);
}
private onDisplayItemDrop(e: FYGE.Event) {
const drag: DragDropable = e.target;
drag.mouseEnable = false;
const dragParent = drag.parent;
const drop: DragDropable = dragParent.hitTestPoint(new FYGE.Point(e.data.x / 2, e.data.y / 2), true);
drag.mouseEnable = true;
if (drop) {
drop.onDrop(drag);
}
drag.onDragEnd(drop);
this.dispatchEvent(DragDropEvent.DRAG_END, { drop, drag });
}
import DragDropable from "./DragDropable";
import DragDropEvent from "./DragDropEvent";
//管理一个拖放实例
export default class DragDropManager extends FYGE.EventDispatcher {
//初始化拖放对象事件
public add(item: DragDropable) {
item.addEventListener('DROP', this.onDisplayItemDrop, this)
item.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, this.onMouseDown, this)
item.once(FYGE.Event.REMOVED_FROM_STAGE, this.onRemoveFromStage, this)
}
onRemoveFromStage = (event: FYGE.Event) => {
const item = event.target;
this.remove(item)
}
remove(item) {
item.removeEventListener('DROP', this.onDisplayItemDrop, this)
item.removeEventListener(FYGE.MouseEvent.MOUSE_DOWN, this.onMouseDown, this)
}
private onMouseDown(event: FYGE.MouseEvent) {
const item: DragDropable = event.target;
if (!item.checkCanDragDrop()) return;
item.startDrag(event);
this.dispatchEvent(DragDropEvent.DRAG_START, item);
}
private onDisplayItemDrop(e: FYGE.Event) {
const drag: DragDropable = e.target;
drag.mouseEnable = false;
const dragParent = drag.parent;
const drop: DragDropable = dragParent.hitTestPoint(new FYGE.Point(e.data.x / 2, e.data.y / 2), true);
drag.mouseEnable = true;
if (drop) {
drop.onDrop(drag);
}
drag.onDragEnd(drop);
this.dispatchEvent(DragDropEvent.DRAG_END, { drop, drag });
}
}
\ No newline at end of file
src/dragdrop/DragDropable.ts
View file @ c19ec7c9
export default class DragDropable extends FYGE.Sprite {
//图片起始位置
private _originPos: FYGE.Point;
public get originPos() { return this._originPos }
//鼠标按下起始点
private _startPoint: FYGE.Point;
startDrag = (event: FYGE.MouseEvent) => {
this.stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.onMouseMove, this);
this.stage.once(FYGE.MouseEvent.MOUSE_UP, this.onMouseUp, this);
this._originPos = new FYGE.Point(this.x, this.y);
this._startPoint = new FYGE.Point(event.stageX, event.stageY);
}
private onMouseUp(event: FYGE.MouseEvent) {
this.stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.onMouseMove, this);
this.dispatchEvent('DROP', this.getDropPoint(event));
}
private onMouseMove(event: FYGE.MouseEvent) {
//鼠标当前位置
const currentPoint = { x: event.stageX, y: event.stageY };
//鼠标按下点到鼠标当前点的偏移量
let mouseOffsetX = currentPoint.x - this._startPoint.x;
let mouseOffsetY = currentPoint.y - this._startPoint.y;
this.x = this._originPos.x + mouseOffsetX;
this.y = this._originPos.y + mouseOffsetY;
}
checkCanDragDrop() {
return true;
}
public onDragEnd(drop: DragDropable) {
throw new Error("Method not implemented.");
}
protected getDropPoint(event: FYGE.MouseEvent) {
throw new Error('必须重写此方法')
}
public onDrop = (drag: DragDropable): void => {
throw new Error('必须重写此方法')
}
export default class DragDropable extends FYGE.Sprite {
//图片起始位置
private _originPos: FYGE.Point;
public get originPos() { return this._originPos }
//鼠标按下起始点
private _startPoint: FYGE.Point;
startDrag = (event: FYGE.MouseEvent) => {
this.stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.onMouseMove, this);
this.stage.once(FYGE.MouseEvent.MOUSE_UP, this.onMouseUp, this);
this._originPos = new FYGE.Point(this.x, this.y);
this._startPoint = new FYGE.Point(event.stageX, event.stageY);
}
private onMouseUp(event: FYGE.MouseEvent) {
this.stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.onMouseMove, this);
this.dispatchEvent('DROP', this.getDropPoint(event));
}
private onMouseMove(event: FYGE.MouseEvent) {
//鼠标当前位置
const currentPoint = { x: event.stageX, y: event.stageY };
//鼠标按下点到鼠标当前点的偏移量
let mouseOffsetX = currentPoint.x - this._startPoint.x;
let mouseOffsetY = currentPoint.y - this._startPoint.y;
this.x = this._originPos.x + mouseOffsetX;
this.y = this._originPos.y + mouseOffsetY;
}
checkCanDragDrop() {
return true;
}
public onDragEnd(drop: DragDropable) {
throw new Error("Method not implemented.");
}
protected getDropPoint(event: FYGE.MouseEvent) {
throw new Error('必须重写此方法')
}
public onDrop = (drag: DragDropable): void => {
throw new Error('必须重写此方法')
}
}
\ No newline at end of file
src/lib/Movable.ts
View file @ c19ec7c9
import Vector2 from "./Vector2";
export default class Movable extends FYGE.Sprite {
getCanRemove() {
return true;
}
private _velocity: Vector2;
set velocity(val: Vector2) { this._velocity = val }
step() {
this.y += this._velocity.y;
this.x += this._velocity.x;
}
}
\ No newline at end of file
import Vector2 from "./Vector2";
export default class Movable extends FYGE.Sprite {
getCanRemove() {
return true;
}
private _velocity: Vector2;
set velocity(val: Vector2) {
this._velocity = val;
}
get velocity() {
return this._velocity;
}
private _acceleration: Vector2;
set acceleration(val: Vector2) {
this._acceleration = val;
}
step() {
this._acceleration = this._acceleration || new Vector2(0, 0);
this._velocity.x += this._acceleration.x;
this._velocity.y += this._acceleration.y;
this.y += this._velocity.y;
this.x += this._velocity.x;
}
}
src/lib/MovableManager.ts
View file @ c19ec7c9
import Enemy from "../planewar/Enemy";
import Hero from "../planewar/Hero";
import Bullet from "../weapon/Bullet";
import Movable from "./Movable";
export default class MovableManager extends FYGE.EventDispatcher {
private _stage: FYGE.Stage;
private _movableList: Movable[] = [];
hero: Hero;
constructor(stage: FYGE.Stage) {
super();
this._stage = stage;
this._stage.addEventListener(FYGE.Event.ENTER_FRAME, this.onEnterFrame);
}
onEnterFrame = () => {
this.step();
this.checkRemove();
this.checkHitEnemy();
this.checkHitByBullet();
this.checkHitByEnemy();
// console.log('移动对象的数量:', this._movableList.length)
}
checkHitByEnemy() {
const enemyList = this._movableList.filter(i => i instanceof Enemy);
for (let i = 0; i < enemyList.length; i++) {
const oneEnemy = enemyList[i];
if (this.checkHit(oneEnemy, this.hero)) {
console.log('被敌机碰撞了，游戏结束了');
this.gameOver()
return;
}
}
}
private gameOver() {
this._stage.removeEventListener(FYGE.Event.ENTER_FRAME, this.onEnterFrame);
this.dispatchEvent('gameover');
}
checkHitByBullet() {
const enemyBulletList = this._movableList.filter(i => i instanceof Bullet && i.host instanceof Enemy);
for (let j = 0; j < enemyBulletList.length; j++) {
const bullet = enemyBulletList[j];
if (this.checkHit(this.hero, bullet)) {
console.log('被子弹碰撞了，游戏结束了');
this.gameOver()
return;
}
}
}
private checkHitEnemy() {
const heroBulletList = this._movableList.filter(i => i instanceof Bullet && i.host instanceof Hero);
const enemyList = this._movableList.filter(i => i instanceof Enemy);
for (let i = 0; i < enemyList.length; i++) {
const oneEnemy = enemyList[i];
for (let j = 0; j < heroBulletList.length; j++) {
const onHeroBullet = heroBulletList[j];
if (this.checkHit(oneEnemy, onHeroBullet)) {
this.remove(oneEnemy);
this.remove(onHeroBullet);
return;
}
}
}
}
private checkHit(A: FYGE.DisplayObject, B: FYGE.DisplayObject) {
const pointA = [A.x + A.width / 2, A.y + A.height / 2];
const pointB = [B.x + B.width / 2, B.y + B.height / 2];
const x0 = Math.abs(pointA[0] - pointB[0]);
const y0 = Math.abs(pointA[1] - pointB[1]);
const x1 = A.width / 2 + B.width / 2;
const y1 = A.height / 2 + B.height / 2;
return x0 < x1 && y0 < y1;
}
private calcCanRemove(item: Movable) {
if (!item.getCanRemove()) return;
if (item.y > 1624) return true;
if (item.y < -item.height) return true;
if (item.x > 750) return true;
if (item.x < -item.width) return true;
return false;
}
private checkRemove() {
for (let index = 0; index < this._movableList.length; index++) {
const item = this._movableList[index];
if (this.calcCanRemove(item)) {
this._movableList.splice(index, 1);
item.parent && item.parent.removeChild(item);
return;
}
}
}
private step() {
this._movableList.forEach(item => item.step());
}
add(item: Movable) {
this._movableList.push(item);
}
remove(item: Movable) {
const index = this._movableList.indexOf(item);
this._movableList.splice(index, 1);
item.parent && item.parent.removeChild(item);
}
}
\ No newline at end of file
import Enemy from "../planewar/Enemy";
import Hero from "../planewar/Hero";
import Bullet from "../weapon/Bullet";
import Movable from "./Movable";
export default class MovableManager extends FYGE.EventDispatcher {
private _stage: FYGE.Stage;
public Score: 0;
private _movableList: Movable[] = [];
hero: Hero;
constructor(stage: FYGE.Stage) {
super();
this._stage = stage;
this.Score = 0;
this._stage.addEventListener(FYGE.Event.ENTER_FRAME, this.onEnterFrame);
}
onEnterFrame = () => {
this.step();
this.checkRemove();
this.checkHitEnemy();
this.checkHitByBullet();
this.checkHitByEnemy();
// console.log('移动对象的数量:', this._movableList.length)
};
checkHitByEnemy() {
const enemyList = this._movableList.filter((i) => i instanceof Enemy);
for (let i = 0; i < enemyList.length; i++) {
const oneEnemy = enemyList[i];
if (this.checkHit(oneEnemy, this.hero)) {
console.log("被敌机碰撞了，游戏结束了");
// this.Score = 0;
this.gameOver();
return;
}
}
}
private gameOver() {
this._stage.removeEventListener(FYGE.Event.ENTER_FRAME, this.onEnterFrame);
this.dispatchEvent("gameover");
}
checkHitByBullet() {
const enemyBulletList = this._movableList.filter(
(i) => i instanceof Bullet && i.host instanceof Enemy
);
for (let j = 0; j < enemyBulletList.length; j++) {
const bullet = enemyBulletList[j];
if (this.checkHit(this.hero, bullet)) {
console.log("被子弹碰撞了，游戏结束了");
// this.Score = 0;
this.gameOver();
return;
}
}
}
private checkHitEnemy() {
const heroBulletList = this._movableList.filter(
(i) => i instanceof Bullet && i.host instanceof Hero
);
const enemyList = this._movableList.filter((i) => i instanceof Enemy);
for (let i = 0; i < enemyList.length; i++) {
const oneEnemy = enemyList[i];
for (let j = 0; j < heroBulletList.length; j++) {
const onHeroBullet = heroBulletList[j];
if (this.checkHit(oneEnemy, onHeroBullet)) {
this.Score += 10;
this.remove(oneEnemy);
this.remove(onHeroBullet);
console.log("this.Score", this.Score);
return;
}
}
}
}
private checkHit(A: FYGE.DisplayObject, B: FYGE.DisplayObject) {
const pointA = [A.x + A.width / 2, A.y + A.height / 2];
const pointB = [B.x + B.width / 2, B.y + B.height / 2];
const x0 = Math.abs(pointA[0] - pointB[0]);
const y0 = Math.abs(pointA[1] - pointB[1]);
const x1 = A.width / 2 + B.width / 2;
const y1 = A.height / 2 + B.height / 2;
return x0 < x1 && y0 < y1;
}
private calcCanRemove(item: Movable) {
if (!item.getCanRemove()) return;
if (item.y > 1624) return true;
if (item.y < -item.height) return true;
if (item.x > 750) return true;
if (item.x < -item.width) return true;
return false;
}
private checkRemove() {
for (let index = 0; index < this._movableList.length; index++) {
const item = this._movableList[index];
if (this.calcCanRemove(item)) {
this._movableList.splice(index, 1);
item.parent && item.parent.removeChild(item);
return;
}
}
}
private step() {
this._movableList.forEach((item) => item.step());
}
add(item: Movable) {
this._movableList.push(item);
}
remove(item: Movable) {
const index = this._movableList.indexOf(item);
this._movableList.splice(index, 1);
item.parent && item.parent.removeChild(item);
}
}
src/lib/Vector2.ts
View file @ c19ec7c9
export default class Vector2 {
x:number;
y:number;
constructor(x:number,y:number){
this.x=x;
this.y=y;
}
export default class Vector2 {
x:number;
y:number;
constructor(x:number,y:number){
this.x=x;
this.y=y;
}
}
\ No newline at end of file
src/main.ts
View file @ c19ec7c9
import { addGame } from "./planewar/addGame";
var canvas: any = document.getElementById("canvas")
canvas.width = document.body.clientWidth * 1
canvas.height = document.body.clientHeight * 1
var stage = new FYGE.Stage(
canvas,
750,
1624,
canvas.width,
canvas.height,
FYGE.RENDERER_TYPE.CANVAS,
false,
false
)
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false);
stage.addEventListener(FYGE.Event.INIT_STAGE, onInitStage, this);
function onInitStage() {
new addGame(stage)
}
(function loop() {
FYGE.Tween.flush()
stage.flush();
requestAnimationFrame(loop);
import { addGame } from "./planewar/addGame";
var canvas: any = document.getElementById("canvas")
canvas.width = document.body.clientWidth * 1
canvas.height = document.body.clientHeight * 1
var stage = new FYGE.Stage(
canvas,
750,
1624,
canvas.width,
canvas.height,
FYGE.RENDERER_TYPE.CANVAS,
false,
false
)
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false);
stage.addEventListener(FYGE.Event.INIT_STAGE, onInitStage, this);
function onInitStage() {
new addGame(stage)
}
(function loop() {
FYGE.Tween.flush()
stage.flush();
requestAnimationFrame(loop);
})();
\ No newline at end of file
src/planewar/Background.ts
View file @ c19ec7c9
import Movable from "../lib/Movable";
import MovableManager from "../lib/MovableManager";
import Vector2 from "../lib/Vector2";
class BackgroundItem extends Movable {
constructor() {
super();
this.texture = FYGE.Texture.fromUrl(
"//yun.duiba.com.cn/aurora/assets/bd7b3b10169265123e52d02acf8739db5ff59b3d.png"
);
this.velocity = new Vector2(0, 10);
}
getCanRemove() {
return false;
}
}
const height = 1624;
export default class Background {
constructor(stage: FYGE.Stage, movableManager: MovableManager) {
var bg = new BackgroundItem();
var bg2 = new BackgroundItem();
movableManager.add(bg);
movableManager.add(bg2);
stage.addChild(bg);
stage.addChild(bg2);
bg.x = 0;
bg2.y = height;
stage.addEventListener(FYGE.Event.ENTER_FRAME, () => {
console.log("bg.y", bg.y);
console.log("bg2.y", bg2.y);
if (bg.y > height) {
bg.y = bg2.y - height;
}
if (bg2.y > height) {
bg2.y = bg.y - height;
}
});
}
}
import Movable from "../lib/Movable";
import MovableManager from "../lib/MovableManager";
import Vector2 from "../lib/Vector2";
class BackgroundItem extends Movable {
constructor() {
super();
this.texture = FYGE.Texture.fromUrl(
"//yun.duiba.com.cn/aurora/assets/bd7b3b10169265123e52d02acf8739db5ff59b3d.png"
);
this.velocity = new Vector2(0, 5);
}
getCanRemove() {
return false;
}
}
const height = 1624;
export default class Background {
constructor(stage: FYGE.Stage, movableManager: MovableManager) {
var bg = new BackgroundItem();
var bg2 = new BackgroundItem();
movableManager.add(bg);
movableManager.add(bg2);
stage.addChild(bg);
stage.addChild(bg2);
bg.x = 0;
bg2.y = height;
stage.addEventListener(FYGE.Event.ENTER_FRAME, () => {
// console.log("bg.y", bg.y);
// console.log("bg2.y", bg2.y);
if (bg.y > height) {
bg.y = bg2.y - height;
}
if (bg2.y > height) {
bg2.y = bg.y - height;
}
});
}
}
src/planewar/Enemy.ts
View file @ c19ec7c9
import Movable from "../lib/Movable";
import MovableManager from "../lib/MovableManager";
import Vector2 from "../lib/Vector2";
import { IWeaponHost } from "../weapon/IWeaponHost";
import Weapon from "../weapon/Weapon";
export default class Enemy extends Movable implements IWeaponHost {
movableManager: MovableManager;
constructor(movableManager: MovableManager) {
super();
this.movableManager = movableManager;
movableManager.add(this);
this.texture = FYGE.Texture.fromUrl('//yun.duiba.com.cn/aurora/assets/26e1539bb9c5961c693f05186b086c8e04f2f6a2.png')
const weapon = new Weapon(this);
// const bg = new FYGE.Graphics;
// bg.beginFill(0x00ff00, 0.2)
// bg.drawRect(0, 0, 69, 88)
// bg.endFill()
// this.addChild(bg)
this.addEventListener(FYGE.Event.REMOVED_FROM_STAGE, () => {
// console.log('敌人消失了')
weapon.destroy();
})
}
getShootInterval() { return 100 }
getShootVelocity() { return new Vector2(0, 10) }
getShootPoint() {
return new FYGE.Point(this.x + this.width / 2, this.y + this.height)
}
}
\ No newline at end of file
import Movable from "../lib/Movable";
import MovableManager from "../lib/MovableManager";
import Vector2 from "../lib/Vector2";
import { IWeaponHost } from "../weapon/IWeaponHost";
import Weapon from "../weapon/Weapon";
export default class Enemy extends Movable implements IWeaponHost {
movableManager: MovableManager;
constructor(movableManager: MovableManager) {
super();
this.movableManager = movableManager;
movableManager.add(this);
this.texture = FYGE.Texture.fromUrl(
"//yun.duiba.com.cn/aurora/assets/26e1539bb9c5961c693f05186b086c8e04f2f6a2.png"
);
const weapon = new Weapon(this);
// const bg = new FYGE.Graphics;
// bg.beginFill(0x00ff00, 0.2)
// bg.drawRect(0, 0, 69, 88)
// bg.endFill()
// this.addChild(bg)
this.addEventListener(FYGE.Event.REMOVED_FROM_STAGE, () => {
// console.log('敌人消失了')
weapon.destroy();
});
}
getShootInterval() {
return 50;
}
getShootVelocity() {
return new Vector2(0, 10);
}
getShootAcceleration() {
return new Vector2(0, 0);
}
getShootPoint() {
return new FYGE.Point(this.x + this.width / 2, this.y + this.height);
}
}
src/planewar/EnemyFactory.ts
View file @ c19ec7c9
import MovableManager from "../lib/MovableManager";
import Vector2 from "../lib/Vector2";
import Enemy from "./Enemy";
export default class EnemyFactory {
private _timer;
private _stage: FYGE.Stage;
movableManager: MovableManager
constructor(stage: FYGE.Stage, movableManager: MovableManager) {
this.movableManager = movableManager;
this._stage = stage;
this._timer = setInterval(this.onTimer, 1000)
}
onTimer = () => {
const enemy = this._stage.addChild(new Enemy(this.movableManager));
enemy.position.set(Math.random() * 300 + 200, 0);
enemy.velocity = new Vector2((Math.random() - 0.5) * 2, Math.random() * 5 + 2);;
}
destroy() {
clearInterval(this._timer);
}
}
\ No newline at end of file
import MovableManager from "../lib/MovableManager";
import Vector2 from "../lib/Vector2";
import Enemy from "./Enemy";
export default class EnemyFactory {
private _timer;
private _stage: FYGE.Stage;
movableManager: MovableManager;
constructor(stage: FYGE.Stage, movableManager: MovableManager) {
this.movableManager = movableManager;
this._stage = stage;
this._timer = setInterval(this.onTimer, 1000);
}
onTimer = () => {
const enemy = this._stage.addChild(new Enemy(this.movableManager));
enemy.position.set(Math.random() * 300 + 200, 0);
enemy.velocity = new Vector2(
(Math.random() - 0.5) * 2,
Math.random() * 5 + 2
);
enemy.acceleration = new Vector2(0, 0.1);
};
destroy() {
clearInterval(this._timer);
}
}
src/planewar/Hero.ts
View file @ c19ec7c9
import DragDropable from "../dragdrop/DragDropable";
import MovableManager from "../lib/MovableManager";
import Vector2 from "../lib/Vector2";
import { IWeaponHost } from "../weapon/IWeaponHost";
import Weapon from "../weapon/Weapon";
export default class Hero extends DragDropable implements IWeaponHost {
movableManager: MovableManager;
constructor(movableManager) {
super();
this.movableManager = movableManager;
this.texture = FYGE.Texture.fromUrl('//yun.duiba.com.cn/spark/assets/hero_fly1.f292cb1c04589c6ee395fe29538d5385540755f7.png');
const weapon = new Weapon(this);
// const bg = new FYGE.Graphics;
// bg.beginFill(0xff0000,0.2)
// bg.drawRect(0,0,99,124)
// bg.endFill()
// this.addChild(bg)
}
getShootInterval(){return 50}
getShootVelocity(){return new Vector2(0, -20)}
getShootPoint() {
return new FYGE.Point(this.x + this.width / 2, this.y)
}
getDropPoint() { return {} }
onDragEnd() { }
}
\ No newline at end of file
import DragDropable from "../dragdrop/DragDropable";
import MovableManager from "../lib/MovableManager";
import Vector2 from "../lib/Vector2";
import { IWeaponHost } from "../weapon/IWeaponHost";
import Weapon from "../weapon/Weapon";
export default class Hero extends DragDropable implements IWeaponHost {
movableManager: MovableManager;
constructor(movableManager) {
super();
this.movableManager = movableManager;
this.texture = FYGE.Texture.fromUrl(
"//yun.duiba.com.cn/spark/assets/hero_fly1.f292cb1c04589c6ee395fe29538d5385540755f7.png"
);
const weapon = new Weapon(this);
// const bg = new FYGE.Graphics;
// bg.beginFill(0xff0000,0.2)
// bg.drawRect(0,0,99,124)
// bg.endFill()
// this.addChild(bg)
}
getShootInterval() {
return 50;
}
getShootVelocity() {
return new Vector2(0, -20);
}
getShootPoint() {
return new FYGE.Point(this.x + this.width / 2, this.y);
}
getShootAcceleration() {
return new Vector2(0, 0);
}
getDropPoint() {
return {};
}
onDragEnd() {}
}
src/planewar/addGame.ts
View file @ c19ec7c9
import DragDropManager from "../dragdrop/DragDropManager";
import MovableManager from "../lib/MovableManager";
import Background from "./Background";
import EnemyFactory from "./EnemyFactory";
import Hero from "./Hero";
export function addGame(stage: FYGE.Stage) {
const movableManager = new MovableManager(stage); //创建管理器
const dragDropManager = new DragDropManager();
const background = new Background(stage, movableManager);
const hero = stage.addChild(new Hero(movableManager));
hero.position.set(300, 1000);
const enemyFactory = new EnemyFactory(stage, movableManager);
dragDropManager.add(hero);
movableManager.hero = hero;
function onGamOver() {
alert("gameOver");
dragDropManager.remove(hero);
enemyFactory.destroy();
}
movableManager.addEventListener("gameover", onGamOver);
}
import DragDropManager from "../dragdrop/DragDropManager";
import MovableManager from "../lib/MovableManager";
import Background from "./Background";
import EnemyFactory from "./EnemyFactory";
import Hero from "./Hero";
export function addGame(stage: FYGE.Stage) {
const movableManager = new MovableManager(stage); //创建管理器
const dragDropManager = new DragDropManager();
const background = new Background(stage, movableManager);
const hero = stage.addChild(new Hero(movableManager));
// const hero2 = stage.addChild(new Hero(movableManager));
// const hero3 = stage.addChild(new Hero(movableManager));
hero.position.set(300, 1000);
// hero2.position.set(250, 1000);
// hero3.position.set(350, 1000);
const enemyFactory = new EnemyFactory(stage, movableManager);
dragDropManager.add(hero);
movableManager.hero = hero;
function onGamOver() {
alert("gameOver");
console.log("Score", movableManager.Score);
dragDropManager.remove(hero);
enemyFactory.destroy();
}
movableManager.addEventListener("gameover", onGamOver);
}
src/weapon/Bullet.ts
View file @ c19ec7c9
import Movable from "../lib/Movable";
export default class Bullet extends Movable {
host;
constructor() {
super();
this.texture = FYGE.Texture.fromUrl('//yun.duiba.com.cn/spark/assets/bullet1.63bb85f32cabe5f986366c2d428c5e2aa2435230.png')
}
import Movable from "../lib/Movable";
export default class Bullet extends Movable {
host;
constructor() {
super();
this.texture = FYGE.Texture.fromUrl('//yun.duiba.com.cn/spark/assets/bullet1.63bb85f32cabe5f986366c2d428c5e2aa2435230.png')
}
}
\ No newline at end of file
src/weapon/IWeaponHost.ts
View file @ c19ec7c9
import MovableManager from "../lib/MovableManager";
import Vector2 from "../lib/Vector2";
export interface IWeaponHost extends FYGE.Sprite {
movableManager: MovableManager;
getShootPoint(): FYGE.Point;
getShootVelocity(): Vector2;
getShootInterval();
}
\ No newline at end of file
import MovableManager from "../lib/MovableManager";
import Vector2 from "../lib/Vector2";
export interface IWeaponHost extends FYGE.Sprite {
movableManager: MovableManager;
getShootPoint(): FYGE.Point;
getShootVelocity(): Vector2;
getShootAcceleration(): Vector2;
getShootInterval();
}
src/weapon/Weapon.ts
View file @ c19ec7c9
import Movable from "../lib/Movable";
import Bullet from "./Bullet";
import { IWeaponHost } from "./IWeaponHost";
export default class Weapon {
onCreateBullet: Function
_timer;
_count;
_host: IWeaponHost;
constructor(host) {
this._host = host;
this._timer = setInterval(this.onTimer, 10);
this.reset();
}
reset() {
this._count = 0;
}
onTimer = () => {
this._count++;
if (this.canCreateBullet()) {
this.createBullet();
this.reset();
}
}
canCreateBullet() {
return this._count >= this._host.getShootInterval();
}
createBullet = () => {
// console.log('武器在发射子弹')
const bullet: Bullet = this._host.parent.addChild(new Bullet());
bullet.host = this._host;
bullet.velocity = this._host.getShootVelocity();
const shootPoint = this._host.getShootPoint();
bullet.position.set(shootPoint.x, shootPoint.y);
this._host.movableManager.add(bullet);
}
destroy() {
clearInterval(this._timer);
}
}
\ No newline at end of file
import Movable from "../lib/Movable";
import Bullet from "./Bullet";
import { IWeaponHost } from "./IWeaponHost";
export default class Weapon {
onCreateBullet: Function;
_timer;
_count;
_host: IWeaponHost;
constructor(host) {
this._host = host;
this._timer = setInterval(this.onTimer, 10);
this.reset();
}
reset() {
this._count = 0;
}
onTimer = () => {
this._count++;
if (this.canCreateBullet()) {
this.createBullet();
this.reset();
}
};
canCreateBullet() {
return this._count >= this._host.getShootInterval();
}
createBullet = () => {
// console.log('武器在发射子弹')
const bullet: Bullet = this._host.parent.addChild(new Bullet());
bullet.host = this._host;
bullet.velocity = this._host.getShootVelocity();
bullet.acceleration = this._host.getShootAcceleration();
const shootPoint = this._host.getShootPoint();
bullet.position.set(shootPoint.x, shootPoint.y);
this._host.movableManager.add(bullet);
};
destroy() {
clearInterval(this._timer);
}
}
tsconfig.json
View file @ c19ec7c9
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": false,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": false,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
\ No newline at end of file
webpack.config.js
View file @ c19ec7c9
const path = require('path');
module.exports = {
mode: 'development',
devtool: 'eval',
entry: './src/main.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
},
};
const path = require('path');
module.exports = {
mode: 'development',
devtool: 'eval',
entry: './src/main.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
},
};
yarn.lock
View file @ c19ec7c9
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