1

Когда-то давно я нашёл, дескать, "самую сложную игру" ( http://caniplay.ru/flash/4565 ), и вот, спустя несколько лет, решил сделать что-то подобное, только не шибко хардкорное. Дело в том, что столкновения-то я обнаруживать научился, но вот как сделать объект твёрдым при столкновении - это уже посложнее. Я вообще не понимаю что в коде не так, вроде всё логично, но js так не считает.

Ещё с картой уровня проблемы: верхняя часть съезжает. Логикой это дело не возьмёшь. Помогите, пожалуйста.

P.s. только чёткий и ясный ответ, не псевдокод или тупо объяснение с хабра, а именно рабочий пример.

<!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>

3
  • Грубо говоря, чтобы красные блоки были твёрдыми.
    – helloworld
    6 июл 2019 в 15:51
  • А подпрыгивание которое есть сейчас это нежелательно? 6 июл 2019 в 15:54
  • Разумеется. Просто сделать так, как в нормальных 2D играх, твёрдый блок. Без багов, просто, коснулся игрок блока, но пройти сквозь него не может.
    – helloworld
    6 июл 2019 в 18:06

1 ответ 1

4

Вот, я думаю как-то так, даже кое где тверже чем хотелось бы =).

Баги с картой уровня - распечатайте содержимое строки, образующей уровень и увидите там \t

Добавил там Вам всякого рисования для отладки:

class Block {
  constructor(position, size, color, type) {
    this.position = position,
      this.size = size,
      this.sys = {
        color: color
      }
  }
};
let debug = false;
let 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: .99},
      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),
  map = `
		bbbbbbbbbbbbbbbbbbbbbbbbb----b
		b----------------------------b
		b-------------------------bbbb
		b----------------------------b
		b----b-----------------------b
		b----------------------------b
		b-------------P--------------b
		b-------------b--------------b
		b-----------------------b----b
		b----------------------------b
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		`.trim().split('\t').join('').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 = () => {

  requestAnimationFrame(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;

  let top = null, bottom = null, left = null, right = null;
  blocks.forEach(block => {
    let a, collision = collides(block, player);
    if (collision) {
      // определяем с какой стороны стена и запоминаем ограничения
      let dy = player.position.y - block.position.y;
      let dx = player.position.x - block.position.x;
      a = Math.atan2(dy, dx)/Math.PI*180;
      if (a> 45 && a< 135) top = block.position.y+block.size.height;
      if (a<-45 && a>-135) bottom = block.position.y-player.size.height;
      if (a< 45 && a> -45) left = block.position.x+block.size.width;
      if (a>135 || a<-135) right = block.position.x-player.size.width;
    };

    ctx.fillStyle = debug && collision ? 'wheat' : block.sys.color;
    ctx.fillRect(block.position.x, block.position.y, block.size.width, block.size.height)
    if (debug && collision){
      let cx = block.position.x+block.size.width/2;
      let cy = block.position.y+block.size.height/2;
      ctx.beginPath(); 
      ctx.moveTo(cx,cy);
      ctx.lineTo(cx+Math.cos(a/180*Math.PI)*15,cy+Math.sin(a/180*Math.PI)*15);
      ctx.stroke();
    }
  });
  let f = 0.66; // имитация трения об препятствия
  let fritcion = (bottom?f:1)*(top?f:1)*(left?f:1)*(right?f:1);
  player.position.y += player.sys.velocity.y * fritcion;
  player.position.x += player.sys.velocity.x * fritcion;
  
  if (bottom != null)
    player.position.y = Math.min(player.position.y, bottom);
  if (top != null)
    player.position.y = Math.max(player.position.y, top);
  if (left != null)
    player.position.x = Math.max(player.position.x, left);
  if (right != null)
    player.position.x = Math.min(player.position.x, right);
    
  ctx.fillStyle = player.sys.color;
  ctx.fillRect(player.position.x, player.position.y, player.size.width, player.size.height);
  
  if (!debug)
    return ctx.restore();
  
  ctx.fillStyle = 'green';
  if (player.sys.velocity.y < 0 && top)
   ctx.fillRect(player.position.x, player.position.y, player.size.width, 4);
  if (player.sys.velocity.y > 0 && bottom)
   ctx.fillRect(player.position.x, player.position.y+player.size.height-4, player.size.width, 4);
  if (player.sys.velocity.x < 0 && left)
   ctx.fillRect(player.position.x, player.position.y, 4, player.size.height);
  if (player.sys.velocity.x > 0 && right)
   ctx.fillRect(player.position.x+player.size.width-4, player.position.y, 4, player.size.height); 
  
  ctx.restore();
  
})();
body, canvas {margin: 0; display: block}
<canvas id="can"></canvas>

8
  • Спасибо, конечно, но есть одна проблема (баг): если прижаться к земле и начать двигаться куда-л., то ничего не выйдет (Клавиша S & A или D). Но иногда получается двигаться и таким способом. Ещё если прижаться к боковым стенам, такой же глюк. То получается передвигаться, то нет. Очень много багов, а код я почти не понял :) Ладно, я ПОЧТИ понял как всё-таки сделать правильно. Я просто отсчитывал столкновение от середины блока. P.s. сейчас я этот вопрос "переопубликую", но с другим примером кода.
    – helloworld
    12 июл 2019 в 15:10
  • @H336 подправил баг, который мешал перемещаться... 12 июл 2019 в 18:40
  • Ого, да вы гений! Спасибо огромное, но принцип работы кода мне всё равно не очень ясен, можете объяснить, если не затруднит?
    – helloworld
    12 июл 2019 в 20:22
  • @H336 какое место пояснить? 12 июл 2019 в 20:23
  • В цикле, где atan2 используется. Даже и не догадывался, что с его помощью можно сделать ЭТО (づ◔ ͜ʖ◔)づ Кстати, если игрок (или блок) станет другого размера, то будут баги.
    – helloworld
    12 июл 2019 в 20:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.