曾几何时，我发现，他们说，“最难的游戏”（http://caniplay.ru/flash/4565），现在，几年后，我决定做一些类似的事情，但不是很硬核. 事实是我学会了如何检测碰撞，但是如何在碰撞期间使物体成为实体已经更加复杂了。完全看不懂代码哪里出了问题，一切似乎都是合乎逻辑的，但是js不这么认为。
也与地图的关卡问题：上半部分移出。你不能用逻辑来接受这个。请帮帮我。
PS只是一个清晰而准确的答案，而不是来自habr的伪代码或愚蠢的解释，即一个工作示例。
<!DOCTYPE html>
<html>
<head>
<title>.</title>
<meta charset="UTF-8">
</head>
<body style="margin: 0">
<canvas id="can" style="display: block"></canvas>
<script type="text/javascript">
function getId(o){return document.getElementById(o)};
class Block {
constructor(position, size, color, type) {
this.position = position,
this.size = size,
this.sys = {color: color}
}
};
let can = getId("can"), ctx = can.getContext('2d'), game = {
size: 35
},
player = {
position: {
x: innerWidth / 2 - 25,
y: innerHeight - 25 - 300
},
size: {
width: 50,
height: 50
},
sys: {
color: "#AA00FF",
velocity: {
x: 0,
y: 0,
friction: .9,
plus: 1
},
keys: {
w: false,
a: false,
s: false,
d: false
},
scroll: {
x: 0,
y: 0
}
}
}, blocks = [], createBlock = (x, y, w, h, color) => blocks.push( new Block({x: x, y: y}, {width: w, height: h}, color)),
collides = (pl1, pl2) => (pl1.position.x + pl1.size.width < pl2.position.x ||
pl2.position.x + pl2.size.width < pl1.position.x ||
pl1.position.y + pl1.size.height < pl2.position.y ||
pl2.position.y + pl2.size.height < pl1.position.y) ? false : true,
map = `
bbbbbbbbbbbbbbbbbbbbbbbbbbbb-b
b----------------------------b
b----------------------------b
b----------------------------b
b----------------------------b
b----------------------------b
b-------------P--------------b
b-------------b--------------b
b----------------------------b
b----------------------------b
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
`.trim().split('\n');
// Тут какая-то фигня: блоки вверху "слетают" почему-то.
for(let y = 0; y < map.length; y++) {
for(let x = 0; x < map[y].length; x++) {
let sym = map[y][x],
w = game.size,
h = game.size;
if(sym == "P") {
player.position.x = x * w;
player.position.y = y * h;
player.size.width = w;
player.size.height = h
} else if(sym == "b") {
createBlock(x * w, y * h, w, h, "#902")
}
}
};
onresize = () => {
can.width = innerWidth;
can.height = innerHeight
};
onresize();
document.onkeydown = e => {
let kc = e.keyCode;
if(kc == 'W'.charCodeAt()) player.sys.keys.w = true;
if(kc == 'A'.charCodeAt()) player.sys.keys.a = true;
if(kc == 'S'.charCodeAt()) player.sys.keys.s = true;
if(kc == 'D'.charCodeAt()) player.sys.keys.d = true;
if(kc == 'Z'.charCodeAt()) blocks.pop()
};
document.onkeyup = e => {
let kc = e.keyCode;
if(kc == 'W'.charCodeAt()) player.sys.keys.w = false;
if(kc == 'A'.charCodeAt()) player.sys.keys.a = false;
if(kc == 'S'.charCodeAt()) player.sys.keys.s = false;
if(kc == 'D'.charCodeAt()) player.sys.keys.d = false
};
(loop = () => {
ctx.fillStyle = "rgba(0, 0, 0, .24903)";
ctx.fillRect(-3e38, -3e38, 3e38 * 2, 3e38 * 2);
// Скроллинг
player.sys.scroll.x = -player.position.x + innerWidth / 2 - player.size.width / 2;
player.sys.scroll.y = -player.position.y + innerHeight / 2 - player.size.height / 2;
ctx.save();
ctx.translate(player.sys.scroll.x, player.sys.scroll.y);
if(player.sys.keys.w) player.sys.velocity.y -= player.sys.velocity.plus;
if(player.sys.keys.s) player.sys.velocity.y += player.sys.velocity.plus;
if(player.sys.keys.a) player.sys.velocity.x -= player.sys.velocity.plus;
if(player.sys.keys.d) player.sys.velocity.x += player.sys.velocity.plus;
player.sys.velocity.y *= player.sys.velocity.friction;
player.sys.velocity.x *= player.sys.velocity.friction;
player.position.y += player.sys.velocity.y;
player.position.x += player.sys.velocity.x;
blocks.forEach(block => {
// ВОТ ТУТ ВООБЩЕ НИЧЕГО НЕ ПОНЯТНО
if(collides(block, player)) {
if(player.position.y + player.size.height + player.sys.velocity.y > block.position.y) {
player.position.y = block.position.y - block.size.height
} else if(player.position.y - player.sys.velocity.y < block.position.y + block.size.height) {
player.position.y = block.position.y + block.size.height
}
};
ctx.fillStyle = block.sys.color;
ctx.fillRect(block.position.x, block.position.y, block.size.width, block.size.height)
});
ctx.fillStyle = player.sys.color;
ctx.fillRect(player.position.x, player.position.y, player.size.width, player.size.height);
ctx.restore();
requestAnimationFrame(loop)
})();
</script>
</body>
</html>