游戏引擎——控制方块移动

1，项目准备

结构

<canvas id="app"></canvas>

表现

#app {
    
    
	outline: solid pink 2px;
}

行为

<script src="./Game.js"></script>

手造的，有点low。

class Game {
    
    
	constructor(id, width, height) {
    
    
		//参数绑定
		this.element = document.getElementById(id);
		this.width = this.element.width = width;
		this.height = this.element.height = height;
		this.pen = this.element.getContext("2d");
		this.items = [];
	}
	addItem(obj) {
    
    
		this.items.push(obj);
	}
	/*计时器开始，清除*/
	start = (interval) => {
    
    
		this.timer = setInterval(() => {
    
    
			this.repaint()
		}, interval);
	}
	end() {
    
    
		clearInterval(this.timer);
	}
	repaint() {
    
    
		//清除上次画的
		this.pen.clearRect(0, 0, this.width, this.height);
		//画这次的
		this.items.forEach(obj => {
    
    
			if (obj.draw) {
    
    
				obj.draw(this.pen, this.width, this.height);
			}
		})
	}
	bindClick() {
    
    
		this.element.addEventListener('click', e => {
    
    
			e.preventDefault()
			this.items.forEach(obj => {
    
    
				if (obj.click) {
    
    
					obj.click(e.offsetX, e.offsetY);
				}
			})
		})
	}
	bindKey() {
    
    
		document.addEventListener('keydown', e => {
    
    
			e.preventDefault()
			this.items.forEach(obj => {
    
    
				if (obj.key) {
    
    
					obj.key(e.key);
				}
			})
		})
	}
}

2，使用方法

新建一个Game实例，具有宽高：

new Game("app", 800, 800);

添加一个元素：

addItem(r1)

关联事件：

bindClick()
bindKey()

计时器启动与终止：

start(频率)
end()

3，控制方块移动

方便复用，由类创建对象：

class Rect {
    
    
	constructor(data0) {
    
    
		this.data = data0
	}
	draw(pen, width, height) {
    
    
	}
	key(key) {
    
    
	}
}

几个状态：
坐标，大小，方向，颜色。

let r1 = new Rect({
    
    
	x: 0, y: 0, size: 100, direction: "down", color: "red"
})

键盘事件：换方向。

key(key) {
    
    
	this.data.direction = key;
	console.log(this.data.direction)
}

绘制方法：修改坐标，重画。

draw(pen, width, height) {
    
    
	//移动坐标
	if (this.data.direction === "ArrowLeft" && this.data.x > 0) {
    
    
		this.data.x -= 10
	} else if (this.data.direction === "ArrowRight" && this.data.x + this.data.size < width) {
    
    
		this.data.x += 10
	}
	if (this.data.direction === "ArrowUp" && this.data.y > 0) {
    
    
		this.data.y -= 10
	} else if (this.data.direction === "ArrowDown" && this.data.y + this.data.size < height) {
    
    
		this.data.y += 10
	}
	//绘制
	pen.fillStyle = this.data.color;
	pen.fillRect(this.data.x, this.data.y, this.data.size, this.data.size);
}

全部代码：

class Rect {
    
    
	constructor(data0) {
    
    
		this.data = data0
	}
	draw(pen, width, height) {
    
    
		//移动坐标
		if (this.data.direction === "ArrowLeft" && this.data.x > 0) {
    
    
			this.data.x -= 10
		} else if (this.data.direction === "ArrowRight" && this.data.x + this.data.size < width) {
    
    
			this.data.x += 10
		}
		if (this.data.direction === "ArrowUp" && this.data.y > 0) {
    
    
			this.data.y -= 10
		} else if (this.data.direction === "ArrowDown" && this.data.y + this.data.size < height) {
    
    
			this.data.y += 10
		}
		//绘制
		pen.fillStyle = this.data.color;
		pen.fillRect(this.data.x, this.data.y, this.data.size, this.data.size);
	}
	key(key) {
    
    
		this.data.direction = key;
		console.log(this.data.direction)
	}
}

const app = new Game("app", 800, 800);
let r1 = new Rect({
    
    
	x: 0, y: 0, size: 100, direction: "ArrowDown", color: "red"
})
app.addItem(r1)
app.bindKey()
app.start(24);

效果：