Article directory
1. Project preparation
structure
<canvas id="app"></canvas>
Performance
#app {
outline: solid pink 2px;
}
behavior
<script src="./Game.js"></script>
Handmade, a little 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. How to use
Create a new Game instance with width and height:
new Game("app", 800, 800);
Add an element:
addItem(r1)
Associated Events:
bindClick()
bindKey()
Timer start and stop:
start(频率)
end()
3. Control the movement of the block
For easy reuse, objects are created from classes:
class Rect {
constructor(data0) {
this.data = data0
}
draw(pen, width, height) {
}
key(key) {
}
}
Several states:
coordinates, size, orientation, color.
let r1 = new Rect({
x: 0, y: 0, size: 100, direction: "down", color: "red"
})
Keyboard event: change direction.
key(key) {
this.data.direction = key;
console.log(this.data.direction)
}
Drawing method: modify the coordinates and redraw.
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);
}
Full code:
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);
Effect:
