创建玩家
首先加载贴图
src/config.ts
......
// 玩家坦克
import imgUrlPlayerTop from './static/images/player/top.gif'
import imgUrlPlayerRight from './static/images/player/right.gif'
import imgUrlPlayerBottom from './static/images/player/bottom.gif'
import imgUrlPlayerLeft from './static/images/player/left.gif'
export default {
......
// 图片
images: {
......
//玩家坦克
playerTop: imgUrlPlayerTop,
playerRight: imgUrlPlayerRight,
playerBottom: imgUrlPlayerBottom,
playerLeft: imgUrlPlayerLeft
}
}
从Tank.ts复制Player.ts
src/canvas/Player.ts
/**
* 模型
* 敌方坦克
*/
import AbstractModel from "./abstract/AbstractModel";
import {image} from "../service/image";
import {EnumDirection} from "../enum/enumPosition";
import {upperFirst} from 'lodash'
import config from "../config";
import water from "../canvas/Water";
import wallBrick from "../canvas/WallBrick";
import wallSteel from "../canvas/WallSteel";
import player from "../canvas/Player";
import utils from "../utils";
export default class ModelTank extends AbstractModel implements IModel {
name: string = 'player';
// 画布实例
canvas: ICanvas = player;
// 继承父类抽象方法:渲染贴图
// 一些初始化自定义的动作、行为，都在这里进行
render(): void {
// 让坦克动
this.move()
}
// 随机取用其中一个图片
getImage(): HTMLImageElement {
return image.get(`${this.name}${upperFirst(this.direction)}` as keyof typeof config.images)!
}
// 坦克行动
protected move(): void {
while (true) {
// 画布清空
// this.canvas.clearRect(this.x, this.y, config.model.common.width, config.model.common.height);
// ********************* 坐标更新 *********************
let x = this.x;
let y = this.y;
switch (this.direction) {
case EnumDirection.top:
y -= 2
break;
case EnumDirection.right:
x += 2
break;
case EnumDirection.bottom:
y += 2
break;
case EnumDirection.left:
x -= 2
break;
}
if (utils.modelTouch(x, y, [
...water.models,// 水域
...wallBrick.models,// 砖墙
...wallSteel.models,// 钢墙
]) || utils.isCanvasTouch(x, y)) {
// 随机获取方向
this.randomDirection()
} else {
this.x = x;
this.y = y;
// 跳出while死循环
break;
}
}
// ********************* 坐标更新 *********************
// 画布重绘, 渲染坦克模型，在这里调用减少重绘次数
super.draw()
}
}
src/model/Player.ts
/**
* 模型
* 敌方坦克
*/
import AbstractModel from "./abstract/AbstractModel";
import {image} from "../service/image";
import {EnumDirection} from "../enum/enumPosition";
import {random, upperFirst} from 'lodash'
import config from "../config";
import water from "../canvas/Water";
import wallBrick from "../canvas/WallBrick";
import wallSteel from "../canvas/WallSteel";
import player from "../canvas/Player";
import utils from "../utils";
export default class ModelTank extends AbstractModel implements IModel {
name: string = 'player';
// 画布实例
canvas: ICanvas = player;
// 继承父类抽象方法:渲染贴图
// 一些初始化自定义的动作、行为，都在这里进行
render(): void {
// 让坦克动起来：循环定时器
// setInterval(() => {
// this.move()
// }, 50)
// 随机转向
if (random(79) == 1) {
this.randomDirection()
}
// 让坦克动
this.move()
// 增加敌方坦克向下移动的概率
// if (Math.floor(Math.random() * 5) == 1) {
if (random(79) == 1) {
this.direction = EnumDirection.bottom
}
}
// 随机取用其中一个图片
getImage(): HTMLImageElement {
return image.get(`${this.name}${upperFirst(this.direction)}` as keyof typeof config.images)!
}
// 坦克行动
protected move(): void {
while (true) {
// 画布清空
// this.canvas.clearRect(this.x, this.y, config.model.common.width, config.model.common.height);
// ********************* 坐标更新 *********************
let x = this.x;
let y = this.y;
switch (this.direction) {
case EnumDirection.top:
y -= 2
break;
case EnumDirection.right:
x += 2
break;
case EnumDirection.bottom:
y += 2
break;
case EnumDirection.left:
x -= 2
break;
}
if (utils.modelTouch(x, y, [
...water.models,// 水域
...wallBrick.models,// 砖墙
...wallSteel.models,// 钢墙
]) || utils.isCanvasTouch(x, y)) {
// 随机获取方向
this.randomDirection()
} else {
this.x = x;
this.y = y;
// 跳出while死循环
break;
}
}
// ********************* 坐标更新 *********************
// 画布重绘, 渲染坦克模型，在这里调用减少重绘次数
super.draw()
}
}
src/main.ts
import player from "./canvas/Player";
......
const bootstrap = async () => {
......
player.render() // 画布渲染：玩家坦克
}
......
image.png
玩家坦克控制
src/model/Player.ts
/**
* 模型
* 敌方坦克
*/
import AbstractModel from "./abstract/AbstractModel";
import {image} from "../service/image";
import {upperFirst} from 'lodash'
import config from "../config";
import player from "../canvas/Player";
export default class ModelTank extends AbstractModel implements IModel {
name: string = 'player';
// 画布实例
canvas: ICanvas = player;
// 继承父类抽象方法:渲染贴图
// 一些初始化自定义的动作、行为，都在这里进行
render(): void {
// 初始化模型
super.draw()
// 控制坦克移动，添加键盘监听事件
document.addEventListener('keydown', this.changeDirection.bind(this))
}
/**
* 方向改变
* @param event 键盘对象
*/
changeDirection(event: KeyboardEvent) {
console.log(event)
}
// 随机取用其中一个图片
getImage(): HTMLImageElement {
return image.get(`${this.name}${upperFirst(this.direction)}` as keyof typeof config.images)!
}
}
image.png
这里可以看到，键盘按键区别类别有code和key。这里我们通过code处理逻辑。
src/model/Player.ts
/**
* 模型
* 敌方坦克
*/
import AbstractModel from "./abstract/AbstractModel";
import {image} from "../service/image";
import {upperFirst} from 'lodash'
import config from "../config";
import player from "../canvas/Player";
import {EnumDirection} from "../enum/enumPosition";
export default class ModelTank extends AbstractModel implements IModel {
name: string = 'player';
// 画布实例
canvas: ICanvas = player;
// 继承父类抽象方法:渲染贴图
// 一些初始化自定义的动作、行为，都在这里进行
render(): void {
//初始化时永远朝上
// this.direction = EnumDirection.top
// 初始化模型
super.draw()
// 控制坦克移动，添加键盘监听事件
document.addEventListener('keydown', this.changeDirection.bind(this))
}
/**
* 方向改变
* @param event 键盘对象
*/
changeDirection(event: KeyboardEvent) {
// console.log(event)
switch (event.code) {
case 'KeyW':
case 'ArrowUp':
this.direction = EnumDirection.top
break;
case 'KeyD':
case 'ArrowRight':
this.direction = EnumDirection.right
break;
case 'KeyS':
case 'ArrowDown':
this.direction = EnumDirection.bottom
break;
case 'KeyA':
case 'ArrowLeft':
this.direction = EnumDirection.left
break;
}
// 绘制模型
this.canvas.renderModels()
}
// 随机取用其中一个图片
getImage(): HTMLImageElement {
return image.get(`${this.name}${upperFirst(this.direction)}` as keyof typeof config.images)!
}
}
这里切换方向，会出现卡死。
image.png
修复时间无限绑定
在我们的模型代码中，调用this.canvas.renderModels()，会执行模型的render()方法，随着越按越多，模型会无限增加事件的绑定，最终导致卡死。
image.png
解决方法：增加一个事件是否绑定的标记位。
src/model/Player.ts
export default class ModelTank extends AbstractModel implements IModel {
name: string = 'player';
// 画布实例
canvas: ICanvas = player;
// 事件是否绑定
isBindEvent: boolean = false
// 继承父类抽象方法:渲染贴图
// 一些初始化自定义的动作、行为，都在这里进行
render(): void {
//初始化时永远朝上
// this.direction = EnumDirection.top
// 初始化模型
super.draw()
if (!this.isBindEvent) {
// 控制坦克移动，添加键盘监听事件
document.addEventListener('keydown', this.changeDirection.bind(this))
this.isBindEvent = true
}
}
......
}
玩家坦克碰撞检测
src/model/Player.ts
import utils from "../utils";
......
// 继承父类抽象方法:渲染贴图
// 一些初始化自定义的动作、行为，都在这里进行
render(): void {
//初始化时永远朝上
// this.direction = EnumDirection.top
// 初始化模型
super.draw()
if (!this.isBindEvent) {
// 控制坦克移动，添加键盘监听事件
document.addEventListener('keydown', this.changeDirection.bind(this))
document.addEventListener('keydown', this.move.bind(this))
this.isBindEvent = true
}
}
......
//移动
move(event: KeyboardEvent) {
// ********************* 坐标更新 *********************
let x = this.x;
let y = this.y;
switch (event.code) {
case 'KeyW':
case 'ArrowUp':
y -= 15
break;
case 'KeyD':
case 'ArrowRight':
x += 15
break;
case 'KeyS':
case 'ArrowDown':
y += 15
break;
case 'KeyA':
case 'ArrowLeft':
x -= 15
break;
}
if (utils.modelTouch(x, y, [
...water.models,// 水域
...wallBrick.models,// 砖墙
...wallSteel.models,// 钢墙
...boss.models, //boss
...tank.models //敌方坦克
]) || utils.isCanvasTouch(x, y)) {
// 随机获取方向
} else {
this.x = x;
this.y = y;
// 绘制模型
this.canvas.renderModels()
}
}
......
src/model/Tank.ts
......
// 坦克行动
protected move(): void {
while (true) {
......
if (utils.modelTouch(x, y, [
...water.models,// 水域
...wallBrick.models,// 砖墙
...wallSteel.models,// 钢墙
...player.models // 我方坦克
]) || utils.isCanvasTouch(x, y)) {
// 随机获取方向
this.randomDirection()
} else {
this.x = x;
this.y = y;
// 跳出while死循环
break;
}
}
......
image.png
玩家坦克子弹发射
/**
* 模型
* 敌方坦克
*/
......
import bullet from "../canvas/Bullet";
export default class ModelTank extends AbstractModel implements IModel {
name: string = 'player';
// 画布实例
canvas: ICanvas = player;
// 事件是否绑定
isBindEvent: boolean = false
// 继承父类抽象方法:渲染贴图
// 一些初始化自定义的动作、行为，都在这里进行
render(): void {
//初始化时永远朝上
// this.direction = EnumDirection.top
// 初始化模型
super.draw()
if (!this.isBindEvent) {
this.isBindEvent = true
// 添加键盘监听事件，坦克方向改变
document.addEventListener('keydown', this.changeDirection.bind(this))
// 添加键盘监听事件，坦克移动
document.addEventListener('keydown', this.move.bind(this))
// 添加键盘监听事件，坦克发射子弹
document.addEventListener('keydown', (event: KeyboardEvent) => {
console.log(event);
//发射子弹,空格,回车，小键盘回车
(event.code === 'Space'
|| event.code === 'Enter'
|| event.code === 'NumpadEnter') && bullet.addPlayerBullet();
}
)
}
}
......
}
src/canvas/Bullet.ts
......
// 我方坦克发射子弹
addPlayerBullet() {
this.models.push(new ModelBullet(player.models[0]))
}
......
image.png
坦克互战
src/config.ts
// 草地
import imgUrlStraw from './static/images/straw/straw.png'
// 砖墙
import imgUrlWallBrick from './static/images/wall/wall.gif'
// 水域
import imgUrlWater from './static/images/water/water.gif'
// 钢墙
import imgUrlWallSteel from './static/images/wall/steels.gif'
// 敌方坦克
import imgUrlTankTop from './static/images/tank/top.gif'
import imgUrlTankRight from './static/images/tank/right.gif'
import imgUrlTankLeft from './static/images/tank/left.gif'
import imgUrlTankBottom from './static/images/tank/bottom.gif'
// 子弹
import imgUrlBullet from './static/images/bullet/bullet.jpg'
// boss,己方老巢
import imgUrlBoss from './static/images/boss/boss.png'
// 玩家坦克
import imgUrlPlayerTop from './static/images/player/top.gif'
import imgUrlPlayerRight from './static/images/player/right.gif'
import imgUrlPlayerBottom from './static/images/player/bottom.gif'
import imgUrlPlayerLeft from './static/images/player/left.gif'
export default {
// 画布
canvas: {
width: 900,
height: 600,
},
// 模型
model: {
common: {
width: 30,
height: 30,
},
// 子弹
bullet: {
width: 3,
height: 3,
},
// boss,己方老巢
// boss:{
// width: 60,
// height: 60,
// }
},
//草地
straw: {
num: 100,
},
// 砖墙
wallBrick: {
num: 100,
},
// 钢墙
wallSteel: {
num: 30,
},
// 水域
water: {
num: 40
},
// 敌方坦克
tank: {
num: 40,// 数量
speed: 3// 速度，越大越快(1-100)
},
// 子弹的速度
bullet: {
num: 40,// 数量
speed: 8 // 速度，越大越快(1-100)
},
// 图片
images: {
// 草地
straw: imgUrlStraw,
// 砖墙
wallBrick: imgUrlWallBrick,
// 钢墙
wallSteel: imgUrlWallSteel,
// 水域
water: imgUrlWater,
// 敌方坦克
tankTop: imgUrlTankTop,
tankRight: imgUrlTankRight,
tankBottom: imgUrlTankBottom,
tankLeft: imgUrlTankLeft,
// 子弹
bullet: imgUrlBullet,
// boss,己方老巢
boss: imgUrlBoss,
//玩家坦克
playerTop: imgUrlPlayerTop,
playerRight: imgUrlPlayerRight,
playerBottom: imgUrlPlayerBottom,
playerLeft: imgUrlPlayerLeft
}
}
src/canvas/Tank.ts
......
/**
* 画布是单例模式
* 在一个图层，所以只需要new一个实例即可。
*/
export default new (class extends AbstractCanvas implements ICanvas {
render(): void {
// super：调用父类的方法
this.createModels()
// 调用渲染模型，防止每次重新渲染时，又生成新的模型实例
super.renderModels();
console.log("tank", Number((100 / config.tank.speed).toFixed(3)))
// 让坦克画布实时刷新，每config.tank.speed毫秒擦写一次，等于速度。
setInterval(() => {
this.renderModels()
}, Number((100 / config.tank.speed).toFixed(3)))
}
......
}
src/canvas/Bullet.ts
......
/**
* 画布是单例模式
* 在一个图层，所以只需要new一个实例即可。
*/
export default new (class extends AbstractCanvas implements ICanvas {
render(): void {
// super：调用父类的方法
// super.createModels()
// 调用渲染模型，防止每次重新渲染时，又生成新的模型实例
// super.renderModels();
console.log("bullet", Number((100 / config.bullet.speed).toFixed(3)))
//bind:绑定this
setInterval(() => {
// this.createBullet.bind(this)
//自定义子弹的渲染函数：子弹创建
this.createModelsBullet()
// 调用渲染模型，防止每次重新渲染时，又生成新的模型实例
super.renderModels();
}, Number((100 / config.bullet.speed).toFixed(3)))
}
......
}
src/model/Bullet.ts
......
// 一些初始化自定义的动作、行为，都在这里进行
render(): void {
// super.draw()
// ********************* 坐标更新 *********************
let x = this.x;
let y = this.y;
// 子弹速度
let speed = this.tank.name === 'player' ? 4 : 2
switch (this.direction) {
case EnumDirection.top:
y -= speed
break;
case EnumDirection.right:
x += speed
break;
case EnumDirection.bottom:
y += speed
break;
case EnumDirection.left:
x -= speed
break;
}
// // ********************* 坐标更新 *********************
// 打不掉的障碍
let touchNotBlowModel = utils.modelTouch(x, y, [
...wallSteel.models,// 钢墙
],
config.model.bullet.width,
config.model.bullet.height
)
// 打掉的障碍
let touchBlowModel = utils.modelTouch(x, y, [
...wallBrick.models,// 砖墙
...boss.models,// boss
],
config.model.bullet.width,
config.model.bullet.height
)
// 如果是我方坦克的子弹，需要判断是否打中地方坦克
let touchTankModel = undefined
let touchPlayerModel = undefined
if (this.tank.name === 'player') {
touchTankModel = utils.modelTouch(x, y, [
...tank.models,// 敌方坦克
],
config.model.bullet.width,
config.model.bullet.height
)
} else {
touchPlayerModel = utils.modelTouch(x, y, [
...player.models,// 我方坦克
],
config.model.bullet.width,
config.model.bullet.height
)
}
//
if (touchNotBlowModel || utils.isCanvasTouch(x, y, config.model.bullet.width, config.model.bullet.height)) {
// 移除模型
this.destroy()
// 展示爆炸效果
touchNotBlowModel && super.blast(touchNotBlowModel)
} else if (touchPlayerModel || touchTankModel || touchBlowModel) {
// 当前子弹模型消失
this.destroy()
// **************** 可打爆的障碍 ****************
// 展示爆炸效果
touchBlowModel && super.blast(touchBlowModel)
// 碰撞的模型消失
touchBlowModel && touchBlowModel.destroy();
// **************** 可打爆的障碍 ****************
// **************** 玩家坦克打爆敌方坦克 ****************
// 展示爆炸效果
touchTankModel && super.blast(touchTankModel)
// 碰撞的模型消失
touchTankModel && touchTankModel.destroy();
// **************** 玩家坦克打爆敌方坦克 ****************
// **************** 敌方坦克打爆玩家坦克 ****************
// 展示爆炸效果
touchPlayerModel && super.blast(touchPlayerModel)
// 碰撞的模型消失
touchPlayerModel && touchPlayerModel.destroy();
// **************** 敌方坦克打爆玩家坦克 ****************
} else {
this.x = x;
this.y = y;
// 画布重绘, 渲染坦克模型，在这里调用减少重绘次数
this.draw()
}
}
......
玩家坦克被打掉了：
image.png
网友评论