我正试图在javascript上制作我的第一个游戏,我遇到了这个问题......在一段时间后他们开始分离时,敌人没有留下一条线。有什么办法吗?我哪里做错了?谢谢!
window.onload = function game() {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = 700;
canvas.height = 500;
var enemieLeft =
[{ "id": "enemie1", "x": 660, "y": 75, "w": 40, "h": 40 },
{ "id": "enemie3", "x": 660, "y": 225, "w": 40, "h": 40 },
{ "id": "enemie5", "x": 660, "y": 375, "w": 40, "h": 40 }];
var enemieRight =
[{ "id": "enemie2", "x": 10, "y": 150, "w": 40, "h": 40 },
{ "id": "enemie4", "x": 10, "y": 300, "w": 40, "h": 40 },
{ "id": "enemie6", "x": 10, "y": 450, "w": 40, "h": 40 }];
var velXR = 6;
var velXL = 6;
function eRenderR() {
for (var i = 0; i < enemieRight.length; i++) {
var EnR = enemieRight[i];
ctx.fillStyle = "black";
ctx.fillRect(EnR.x, EnR.y, EnR.w, EnR.h);
EnR.x += velXR;
if (EnR.x >= 660) {
velXR -= 6;
}
else if (EnR.x <= 9) {
velXR += 6;
}
}
}
function eRenderL() {
for (var i = 0; i < enemieLeft.length; i++) {
var EnL = enemieLeft[i];
ctx.fillStyle = "black";
ctx.fillRect(EnL.x, EnL.y, EnL.w, EnL.h);
EnL.x -= velXL;
if (EnL.x <= 10) {
velXL -= 6;
}
else if (EnL.x >= 661) {
velXL += 6;
}
}
}
function run() {
ctx.save();
ctx.clearRect(0, 0, 700, 500);
eRenderL();
eRenderR();
ctx.restore();
}
var runGame = setInterval(run, 10);
}
答案 0 :(得分:1)
速度,就像位置,而不是共享属性。当你的第一个enemieRight击中右墙时,它会切换velXR,但是每个跟随的enemieRight还没有碰壁。但是因为他们对速度属性产生了影响,所以他们都转过身来,退后一步,虽然没有自己撞到墙上。
var canvas = document.createElement('canvas');
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = 700;
canvas.height = 500;
var enemies = [
{"id": "enemie1", "x":660, "y":75,"w":40,"h":40, vx: -6},
{"id": "enemie3", "x":660, "y":225,"w":40,"h":40, vx: -6},
{"id": "enemie5", "x":660,"y":375,"w":40,"h":40, vx: -6},
{"id": "enemie2","x":10,"y":150,"w":40,"h":40, vx: 6},
{"id": "enemie4","x":10,"y":300,"w":40,"h":40, vx: 6},
{"id": "enemie6","x":10,"y":450,"w":40,"h":40, vx: 6}
];
function runEnemy(enemy){
hitTest(enemy);
move(enemy);
render(enemy);
}
function move(enemy){
enemy.x += enemy.vx;
}
function hitTest(enemy){
if(enemy.x > 660 || enemy.x < 9)
enemy.vx = -enemy.vx;
}
function render(enemy){
ctx.fillStyle = "black";
ctx.fillRect(enemy.x, enemy.y, enemy.w, enemy.h);
}
function run(){
ctx.save();
ctx.clearRect(0, 0, 700, 500);
enemies.forEach(runEnemy);
ctx.restore();
}
var runGame = setInterval(run,10);
答案 1 :(得分:0)
我假设它可能与可能的种族调节有关。您的代码没有预料到在上次执行完成之前再次执行run
的情况。
这可以通过以这种方式将setInterval
替换为setTimeout
来解决:
function run(){
ctx.save();
ctx.clearRect(0, 0, 700, 500);
eRenderL();
eRenderR();
ctx.restore();
runGame = setTimeout(run,10);
}
var runGame = setTimeout(run,10);
或者,更好的方法IMO,使用requestAnimationFrame,确保每帧只运行一次,只有当前一帧完成渲染时才会运行。