javascript - HTML 游戏的 HTML 画布和面向对象的 JavaScript 字符的问题
问题描述
问题是,HTML 画布没有在画布内输出字符对象。画布定义为gameArea
,字符定义为字符。两者都是用 JavaScript 编写的,并且字符被制作成一个对象。
这是针对 2D 平台游戏的,到目前为止,我已经尝试将角色形式的对象更改为变量,以查看对象的封装是否导致问题,但这没有奏效。我还尝试在角色对象中添加一个名为 update 的新函数,以确保角色(矩形)在移动时被填充。
这是我的代码:
第一部分声明字符变量,还有一个函数,它首先在 HTML 中使用onload
:
var Character;
function startGame(){
gameArea.start();
Character = new character(40, 80, "#4286f4", 30, 500, true, 0, 0);
}
角色对象的参数是width
, height
, colour
, x, y, jumping state, speedX
and speedY
(在后面的代码中也会显示)。
第二部分显示了gameArea 变量(画布),我在这里也调用了 Keydown 和 Keyup 的 EventListeners:
var gameArea = {
canvas: document.getElementById("canvas"), //Defining the canvas'
//dimensions
start: function() {
this.canvas.width = 700;
this.canvas.height = 500;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas,document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {//EventListener
functions
gameArea.keys = (gameArea.keys || []);
gameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
gameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
下一部分是字符对象:
function character(width, height, color, x, y, jumping, speedX, speedY)
{//Character object, blue rectangle
this.jumping=jumping;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = speedX;
this.speedY= speedY;
ctx = gameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.width, this.height, this.x, this.y);
this.update = function() {//Updating the gameArea function
ctx = gameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
据我所知,上面的代码是与该问题唯一相关的代码。如果需要,可以在下面找到其余代码(控制器逻辑和运动机制):
function updateGameArea() {
gameArea.clear();
character.speedX = 0;
character.speedY = 0;
character.update();
var controller = {
up: false,
down: false,
left: false,
right: false,
keyListener: function (event) {
var keyPosition = (event.type == "keydown") ? true : false;
switch (event.keyCode) {
case 87:
controller.up = keyPosition;
break;
case 83:
controller.down = keyPosition;
break;
case 65:
controller.left = keyPosition;
break;
case 68:
controller.right = keyPosition;
break;
}
}
};
if (controller.up && character.jumping == false) {
character.speedY -= 2.5
character.jumping = true;
}
if (controller.down) {
character.speedY += 2.5;
}
if (controller.left) {
character.speedX -= 2.5;
}
if (controller.right) {
character.speedX += 2.5;
}
character.speedY += 1.5;
character.x = character.speedX;
character.y = character.speedY;
character.speedX *= 0.9;
character.speedY *= 0.9
var ground = gameArea.canvas.height - this.height;
if (this.y > ground) {
character.jumping = false;
character.y = ground;
character.speedY = 0;
}
}
预期结果:角色显示在画布内并且动作正确
实际结果:字符不显示。
我知道这里有很多代码,但如果有人能指出我正确的方向,我将不胜感激,因为我真的不明白为什么角色没有显示在画布中。
非常感谢!
解决方案
您将角色的位置设置为 500,因此他被绘制在可见区域之外(画布只有 500 高)。x= 0, y= 0 在画布的右上角。
改变Character = new character(40, 80, "#4286f4", 30, 500, true, 0, 0);
至Character = new character(40, 80, "#4286f4", 30, 400, true, 0, 0);
编辑:重写了整个事情。
var character, ctx;
function startGame() {
gameArea.start();
character = new Character(40, 80, "#4286f4", 30, 400, true, 0, 0);
gameArea.clear();
updateGameArea();
}
let gameArea = {
start() {
this.canvas = document.getElementById("canvas"); //Defining the canvas'
this.canvas.width = 700;
this.canvas.height = 500;
this.context = this.canvas.getContext("2d");
},
clear() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
}
function Character(width, height, color, x, y, jumping, speedX, speedY) { //Character object, blue rectangle
this.jumping = jumping;
this.width = width;
this.height = height;
this.position = {
x,
y
};
this.velocity = {
x: speedX,
y: speedY
};
ctx = gameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.width, this.height, this.x, this.y);
this.color = color;
return this;
}
Character.prototype = {
update() { //Updating the gameArea function
character.position.x += character.velocity.x;
character.position.y += character.velocity.y;
let ground = gameArea.canvas.height - this.height;
if (this.position.y > ground) {
character.jumping = false;
character.position.y = ground;
character.velocity.y = 0;
}
ctx = gameArea.context;
ctx.fillStyle = this.color;
ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
}
}
var controller = {
x: 0,
y: 0
};
document.addEventListener('keydown', e => {
switch (e.keyCode) {
case 87:
controller.y = -1;
break;
case 83:
controller.y = 1;
break;
case 65:
controller.x = -1;
break;
case 68:
controller.x = 1;
break;
}
});
document.addEventListener('keyup', e => {
switch (e.keyCode) {
case 87:
controller.y = 0;
break;
case 83:
controller.y = 0;
break;
case 65:
controller.x = 0;
break;
case 68:
controller.x = 0;
break;
}
});
function updateGameArea() {
gameArea.clear();
character.velocity.x = controller.x;
character.velocity.y = controller.y;
character.update();
requestAnimationFrame(updateGameArea);
}
window.onload = startGame;
canvas {
width:100%;
}
<canvas id="canvas"></canvas>
推荐阅读
- google-sheets - Google 表格自定义功能未按预期工作
- python - 理解 Python 交换:为什么 a, b = b, a 并不总是等价于 b, a = a, b?
- python - 按 x 轴移动图形
- python - 使用列表切片和“+”运算符这是如何工作的?
- memory - 嗅探司机的价值
- django-rest-framework - 如何将字段添加到与另一个模型具有反向关系的模型序列化程序
- json - SwiftUI 本地 JSON 保存字符串值
- python - 如何为不和谐机器人 Python 制作仅服务器任务
- javascript - 重新初始化类实例会导致垃圾收集吗?
- unit-testing - 没有像 Karma 这样的运行器,像 Mocha 这样的测试框架如何运行测试?