如何解决玩家有时会在无限亚军游戏的原型中逐步穿越平台？
我正在使用 html5 画布在 javascript 中编写无限跑酷游戏，到目前为止一切进展顺利，但我已经建立了跳跃机制，有时玩家会逐步通过他们着陆的平台，他们不应该这样做，因为我有代码可以防止这种情况发生。顺便说一句，虽然玩家将无法在完成的游戏中逐步穿过平台的两侧，但我还没有代码来阻止它。这只会发生在一个对象的平台上。知道为什么要这样做吗？我的代码在这里-
const canvas = document.getElementById('gameframe')
const ctx = canvas.getContext('2d')
var player = {
y: 250,x: 250,w: 30,h: 30
}
var plat1 = {
x: 250,y: 350,w: 250,h: 300
}
var plat2 = {
x: 50,y: 400,h: 300
}
var plat3 = {
x: -200,y: 375,h: 300
}
var currentPlat = {
x: 1,y: 1,w: 1,h: 1
}
function renderPlatforms() {
ctx.fillStyle = 'black';
ctx.rect(plat1.x,plat1.y,plat1.w,plat1.h);
ctx.rect(plat2.x,plat2.y,plat2.w,plat2.h);
ctx.rect(plat3.x,plat3.y,plat3.w,plat3.h);
ctx.fill();
plat1.x--;
plat2.x--;
plat3.x--;
if (plat1.x === 0 - plat1.w) {
plat1.x = 500;
}
if (plat2.x === 0 - plat2.w) {
plat2.x = 500;
}
if (plat3.x === 0 - plat3.w) {
plat3.x = 500;
}
}
function renderPlayer() {
ctx.rect(player.x,player.y,player.w,player.h)
ctx.fill();
}
function draw() {
getCurrentPlat();
doGravity();
ctx.beginPath();
ctx.clearRect(0,canvas.width,canvas.height);
renderPlayer();
renderPlatforms();
ctx.fill();
setTimeout(draw,3)
}
draw();
function getCurrentPlat() {
if (player.x + player.w >= plat1.x && player.x <= plat1.x + plat1.w) {
currentPlat.x = plat1.x;
currentPlat.y = plat1.y;
currentPlat.w = plat1.w;
currentPlat.h = plat1.h;
console.log('on platform one')
console.log()
}
if (player.x + player.w >= plat2.x && player.x <= plat2.x + plat2.w) {
currentPlat.x = plat2.x;
currentPlat.y = plat2.y;
currentPlat.w = plat2.w;
currentPlat.h = plat2.h;
}
if (player.x + player.w >= plat3.x && player.x <= plat3.x + plat3.w) {
currentPlat.x = plat3.x;
currentPlat.y = plat3.y;
currentPlat.w = plat3.w;
currentPlat.h = plat3.h;
}
}
function doGravity() {
if (player.y + 30 < currentPlat.y && jumping === false) {
player.y++;
}
}
var cntr = 0
var jumping = false
function jump() {
jumping = true;
if (cntr < 90) {
cntr++;
player.y--;
setTimeout(jump,2);
} else {
function fls() {
jumping = false;
}
cntr = 0;
setTimeout(fls,50)
}
}<!DOCTYPE html>
<html>
<canvas width='500' height='500' id='gameframe' style='border-style: solid;'>Sorry,canvas is not supported for your browser. </canvas>
<button onclick='jump()'>jump</button>
<script src='script.js'></script>
</html>解决方法
不确定是否是故意的，但您的平台确实重叠...
在下面的示例中看到它
我确实改进了您的代码以使用平台数组而不是单个项目，然后我们可以循环 platforms.forEach 这应该可以帮助您减少重复代码，并且将来添加更多平台将非常容易.
const canvas = document.getElementById('gameframe')
const ctx = canvas.getContext('2d')
var platforms = [
{x: 250,y: 50,w: 250,h: 301},{x: 50,y: 100,h: 302},{x: -200,y: 75,h: 303}
]
function renderPlatforms() {
platforms.forEach(function(p) {
ctx.beginPath();
ctx.rect(p.x,p.y,p.w,p.h);
ctx.fillText(p.x,p.x +5,p.y-5);
ctx.fillText(p.w + " / " +p.h,p.y+20);
ctx.stroke();
if (p.x-- === 0 - p.w) p.x = canvas.width;
})
}
function draw() {
ctx.clearRect(0,canvas.width,canvas.height);
renderPlatforms();
setTimeout(draw,10)
}
draw();<canvas width='500' height='150' id='gameframe' style='border-style: solid;'></canvas>如果你打算像这样重叠平台，你必须改变你的逻辑并检查玩家是否与任何平台相撞，你只检查一个（当前平台）的方法会产生问题。
在排除游戏故障时，我发现 ctx.fillText() 比 console.log() 更有帮助，您可以在屏幕上显示对象的值，而且通常会减慢游戏速度，帮助您查看值是否真的在您预期的时候发生变化他们也发生了变化。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
