个人中心
gpt4 book ai didi

javascript - JS Canvas 游戏碰撞检测有问题

转载 作者：行者123 更新时间：2023-12-03 01:07:00 25 4
gpt4 key购买 nike

我正在尝试构建一个类似于Chicken Invaders的小游戏，但我遇到了碰撞检测问题。当玩家射击时，如果击中敌人，该敌人就会消失。但我无法让它发挥作用。这是笔:

https://codepen.io/Undefined_Variable/pen/bxxqBo

代码如下:

//Drawing & Animating: Classes & Variables Definitions
let canvas = document.body.querySelector("#gameCanvas");
let ctx = canvas.getContext("2d");
canvas.width =  window.innerWidth;
canvas.height = 0.9 * window.innerHeight;
let CW = canvas.width;
let CH = canvas.height;
let easyPlaneArr = [];
let hotShotsArr = [];
let easyPlaneCounter = 0;
class plane {
    constructor(x, y, size, color) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
    }
    drawPlane() {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.scale(this.size, this.size)
        ctx.strokeStyle = this.color;
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(10, -30);
        ctx.lineTo(10, -100);
        ctx.lineTo(40, -100);
        ctx.lineTo(40, -120);
        ctx.lineTo(-10, -100);
        ctx.lineTo(-40, -100);
        ctx.lineTo(-40, -120);
        ctx.lineTo(10, -100);
        ctx.lineTo(-10, -100);
        ctx.lineTo(-10, -75);
        ctx.lineTo(-70, -75);
        ctx.lineTo(-60, -60);
        ctx.lineTo(-10, -60);
        ctx.lineTo(10, -60);
        ctx.lineTo(60, -60);
        ctx.lineTo(70, -75);
        ctx.lineTo(10, -75);
        ctx.lineTo(-10, -60);
        ctx.lineTo(-10, -30);
        ctx.stroke();
        ctx.fill();
        ctx.closePath();
        ctx.clearRect(-140, 0, 0, -120)
        ctx.restore();
    }
    animatePlane() {
        this.y += 5;
    }
}
class hotShot {
    constructor(x) {
        this.x = x;
        this.y = 0.95 * CH;
    }
}
let player = {
    x: CW / 2,
    y: 0.95 * CH
}
//Drawing & Animating: Functions Definitions
function drawPlayer() {
    ctx.save();
    ctx.translate(player.x, player.y);
    ctx.clearRect(-20, -40, 20, 0);
    ctx.beginPath();
    ctx.moveTo(0, -40);
    ctx.lineTo(-20, 0);
    ctx.lineTo(0, -10);
    ctx.lineTo(20, 0);
    ctx.closePath();
    ctx.stroke();
    ctx.fill()
    ctx.restore();
}
function drawHotShots() {
    for (let shot of hotShotsArr) {
        ctx.save()
        ctx.translate(shot.x, shot.y)
        ctx.fillRect(-10,0,20,20)
        ctx.restore()
        shot.y -= 10
    }
}
function detectHits() {
    for (let shot in hotShotsArr) {
        easyPlaneCounter = 0;
        for (let plane in easyPlaneArr) {
            if (shot.y > 0) {
                easyPlaneArr.splice(easyPlaneCounter, 1)
            }
            easyPlaneCounter++;
        }
    }
}
function mainLoop() {
    canvas.width = window.innerWidth;
    canvas.height = 0.9 * window.innerHeight;
    CW = canvas.width;
    CH = canvas.height;
    player.y = 0.95 * CH;

    for (let plane of easyPlaneArr) {
        plane.drawPlane();
        plane.animatePlane();
    }

    drawHotShots();
    drawPlayer();
    detectHits()
    requestAnimationFrame(mainLoop);
}
//Drawing & Animating: Program Flow
let easyPlanes = setInterval(function () {
    easyPlaneArr.push(new plane(Math.random() * ((CW - 150) - 150) + 150, -100, 1, "green"));
}, 1000)
canvas.addEventListener("mousemove", function (e) {
    player.x = e.clientX;
})
canvas.addEventListener("click", function (e) {
    hotShotsArr.push(new hotShot(player.x))
})
mainLoop();
body{
    margin: 0px auto;
    overflow:hidden;
}
#levelDiv {
    height:10vh;
    width:100vw;
    border-bottom: 1px solid black;
    background:linear-gradient(90deg, yellow 40%, red)
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Attack On Ship!</title>
</head>
<body>
    <div id="levelDiv"></div>
    <canvas id="gameCanvas"></canvas>
    <script src="AttackOnShip.js"></script>
</body>
</html>

我已经尝试过碰撞检测，但没有成功:

function detectHits() {
    for (let shot in hotShotsArr) {
        easyPlaneCounter = 0;
        for (let plane in easyPlaneArr) {
            if ((shot.x - 10) > (plane.x - 70) && (shot.x + 10) < (plane.x + 70)) {
                easyPlaneArr.splice(easyPlaneCounter, 1)
            }
            easyPlaneCounter++;
        }
    }
}

最佳答案

您的detectHits函数 - 虽然它不是真正正确的碰撞检测 - 不起作用，因为它使用 for..in而不是for..of循环。尝试这样实现:

function detectHits() {
    for (let shot of hotShotsArr) {
        easyPlaneCounter = 0;
        for (let plane of easyPlaneArr) {
            if (shot.y > 0) {
                easyPlaneArr.splice(easyPlaneCounter, 1)
            }
            easyPlaneCounter++;
        }
    }
}

更好的碰撞检测可以检查镜头 X 和 Y 是否在飞机的边界框内，例如:

const PlaneWidth = 100.0;
const PlaneHeight = 100.0;
function detectHits() {
    for (let shot of hotShotsArr) {
        easyPlaneCounter = 0;
        for (let plane of easyPlaneArr) {
            if (Math.abs(shot.x - plane.x) < 0.5 * PlaneWidth && Math.abs(shot.y - plane.y) < 0.5 * PlaneHeight) {
                easyPlaneArr.splice(easyPlaneCounter, 1)
            }
            easyPlaneCounter++;
        }
    }
}

关于javascript - JS Canvas 游戏碰撞检测有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52352200/

25 4 0
文章推荐： azure - Azure 上的 Kubernetes : assign different external IP to different services
文章推荐： c# - 使用 [FromUri] 属性 - 将复杂对象与嵌套数组绑定(bind)
文章推荐： c# - 访问文件系统 Azure 应用服务
文章推荐： javascript - 无法访问 Template Vue 中的状态属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com