玩家有时会在无限流线型游戏原型中分阶段通过平台吗？
玩家有时会在无限流线型游戏原型中分阶段通过平台吗？
提问于 2021-03-22 17:07:06
我正在使用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,
w: 250,
h: 300
}
var plat3 = {
x: -200,
y: 375,
w: 250,
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, 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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-23 19:22:23
不知道是不是故意的但你的平台确实有重叠..。
在下面的示例中可以看到
我确实改进了您的代码，为平台使用了一个数组，而不是单个的项目，然后我们可以循环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, w: 250,h: 302},
{x: -200, y: 75, w: 250,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.x +5, p.y+20);
ctx.stroke();
if (p.x-- === 0 - p.w) p.x = canvas.width;
})
}
function draw() {
ctx.clearRect(0, 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()更有帮助，并且经常会放慢游戏的速度，帮助您查看当您期望它们也发生变化时，这些值是否真的发生了变化。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66750650
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号