在我尝试正确完成本教程时,我试图用HTML格式显示我的播放器的x和y坐标,以及我在%格式的迷宫中的显示(例如83%)。我意识到我必须在我的 showProgress()函数中使用三角函数来定位,但是我如何实际显示正在运行的x和y坐标,甚至表示进展?
var player = {
init: function () {
this.x = 14.25;
this.y = 14.25;
this.direction = 0;
this.angle = -190;
this.speed = 0;
this.movementSpeed = 0.040;
this.turnSpeed = 3 * Math.PI / 180;
this.move = function () {
var moveStep = this.speed * this.movementSpeed;
this.angle += this.direction * this.turnSpeed;
var newX = this.x + Math.cos(this.angle) * moveStep;
var newY = this.y + Math.sin(this.angle) * moveStep;
if (!containsBlock(newX, newY)) {
this.x = newX;
this.y = newY;
};
};
this.draw = function () {
var playerXOnMinimap = this.x * minimap.cellWidth;
var playerYOnMinimap = this.y * minimap.cellHeight;
minimap.context.fillStyle = "#000000";
minimap.context.beginPath();
minimap.context.arc(minimap.cellWidth * this.x, minimap.cellHeight * this.y, minimap.cellWidth / 2, 0, 2 * Math.PI, true);
minimap.context.fill();
var projectedX = this.x + Math.cos(this.angle);
var projectedY = this.y + Math.sin(this.angle);
minimap.context.fillRect(minimap.cellWidth * projectedX - minimap.cellWidth / 4, minimap.cellHeight * projectedY - minimap.cellHeight / 4, minimap.cellWidth / 2, minimap.cellHeight / 2);
};
}
}