A
A
Afafks1231321321652020-02-05 10:40:02
JavaScript
Afafks123132132165, 2020-02-05 10:40:02

Why didn't js handle the collision?

<canvas id="canvas" width="320" height="480"></canvas>

#canvas {
    border: 2px solid black;
    cursor: i
}

document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var sprite = new Image();
sprite.src = "sprite.png";
var x = 0;
var y = 0;
var press = 0;
var bullets = [];
var enemys = [];
var explosive = [];
var ax = 0;
var aex = 0;
var t = 0;
var score = 0;
var lives = -1;
var speed = 1;
var spawn = 100;
var fireSpeed = 20;
var enemysbullets = [];
var fireSpeedss = 20;
document.addEventListener("mousemove", function(e) {
    x = e.pageX - 16;
    y = e.pageY - 17;
    if (x + 16 >= 320) {
        x = 304;
    }
    if (x <= 0) {
        x = 1;
    }
    if (y + 17 >= 480) {
        y = 463;
    }
    if (y <= 0) {
        y = 0;
    }
});
document.addEventListener("mousedown", function(e) {
    if (lives < 0) {
        bullets = [];
        enemys = [];
        explosive = [];
        enemysbullets = [];
        lives = 3;
        speed = 1;
        fireSpeed = fireSpeedss;
        score = 0;
        spawn = 100;
    }
});

function game() {
    ctx.clearRect(0, 0, 320, 480);
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, 320, 480);
    ctx.closePath();
    ctx.drawImage(sprite, 0, 0, 16, 17, x, y, 16, 17);
    for (i in enemys) {
        ctx.drawImage(sprite, 0, 17, 16, 16, enemys[i].x, enemys[i].y, 16, 16);
        enemys[i].y += 2;
        for (j in bullets) {
            if (enemys[i].x <= bullets[j].x && enemys[i].x + 16 >= bullets[j].x + 6) {
                if (bullets[i].y + 16 >= bullets[i].y) {
                    enemys.splice(i, 1);
                    bullet.splice(j, 1);
                }
            }
        }
        if (enemys[i].y > 480) {
            enemys.splice(i, 1);
        }
    }
    for (i in bullets) {
        ctx.drawImage(sprite, 0, 32, 6, 6, bullets[i].x, bullets[i].y, 6, 6);
        bullets[i].y -= 5;
        if (bullets[i].y <= 19) {
            bullets.splice(i, 1);
        }
    }
    ctx.beginPath();
    ctx.font = "16px Serif";
    ctx.fillStyle = "white";
    ctx.fillText("Score: " + score, 0, 16);
    ctx.fillText("Lives: " + lives, 250, 17);
    ctx.fillRect(0, 19, 320, 1);
    ctx.closePath();
    if (t % spawn == 0) {
        enemys.push({
            x: Math.floor(Math.random() * (304 - 1)) + 1,
            y: -16
        });
    }
    if (t % 20 == 0) {
        bullets.push({
            x: x + 3,
            y: y
        });
    }
    t += 1
}
setInterval(game, 20);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
dollar, 2020-02-05
@dollar

Because the code is badly written.
Because of this, the probability of a bug is high.
You need to write code as if tomorrow a person 10 times more stupid than you will check it, and according to the results, he will charge you a salary. That is, if he does not understand how it works, then the salary, respectively, is zero. This would not only allow you to easily find or immediately see the error yourself, but also show the code to a programmer friend.
In fact, even without other people, this rule is also important. Because you-today and you-tomorrow are two different people. And the further in time, the greater the difference. In a month or, say, in half a year, you won't be able to figure out your code by yourself. What is x? What does aex mean? There will be questions like this. What does the game function do, what is it responsible for? After all, the name is not clear, but there are no comments. Where is the main loop of the game? Only after a complete reading of the code and long attempts to figure it out will it be possible to understand the logic of the code structure, but in this case it is easier to re-write from scratch.
You need to pay attention first of all to:

  • the way you name variables and functions (need meaningfully)
  • comments to help you understand the code

Start with this Wikipedia article , and if you want to continue in the same direction, then finish with some book on the topic. There are many such books, it is enough to read at least one. For example, "Perfect code" (McConnell) or "Refactoring" (Fowler).

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question