Javascript-форум - Коллизия в платформере. Как это подчинить.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Коллизия в платформере. Как это подчинить. (https://javascript.ru/forum/misc/65052-kolliziya-v-platformere-kak-ehto-podchinit.html)

Коллизия в платформере. Как это подчинить.

<!DOCTYPE html> 

<html> 

<head> 
<canvas id="app">Your browser doesnt support the Canvas. Please update it to actual version.</canvas> 
</head> 

<body> 
<script defend src="js2d.js"></script> 
<script defend src="key.js"></script> 
<script defend src="engine.js"></script> 
<script> 
/*load game script*/ 
'use strict' 
var game = { 
width: 800, 
height: 600, 
scene: 'loader' 
}; 
/*in this variable i contian all game configurations*/ 
/*and load canvas*/ 

var c = document.getElementById('app'); 
var ctx = c.getContext('2d'); 
c.width=game.width; 
c.height=game.height; 

/*load image*/ 

var loader_first = new Image(); 
var loader_second = new Image(); 
var loader_third = new Image(); 

loader_first.src="http://vkapilessons.esy.es/1.png"; 
loader_second.src="http://vkapilessons.esy.es/2.png"; 
loader_third.src="http://vkapilessons.esy.es/3.png"; 

var isLoad = false; 

/*create the loader*/ 
if(game.scene=='loader') { 
window.onload = function getLoader() { 
ctx.drawImage(loader_first,0,0,game.width,game.height); 

setTimeout( 
function() { 
ctx.clearRect(0,0,game.width,game.height); 
ctx.drawImage(loader_second,0,0,game.width,game.height); 
} 
, 900); 
setTimeout( 
function() { 
ctx.clearRect(0,0,game.width,game.height); 
ctx.drawImage(loader_third,0,0,game.width,game.height); 
isLoad=true; 
player.draw(); 
} 
, 1600); 
}; 
}; 

/*change gamescene*/ 
if(isLoad) { 
game.scene='gamelesson' 
}; 
/*global obj player with player.config*/ 
var player = { 
x:150, 
y: 250, 
width: 50, 
height: 50, 

/*player behv.*/ 
isRight: false, 
isLeft: false, 
isJump: false, 
isDestroy: false, 
speed: 3, 

draw: function drawPlayer() { 
clearCanvas(0,0,game.width,game.height); 
draw(player.x, player.y, player.width, player.height); 
map.draw(); 
} 
}; 

/*in this function we create the player-move*/ 
function movePlayerLeft() { 
clearCanvas(player.x, player.y, player.width, player.height); 
player.x-=player.speed 
player.draw() 
}; 

function movePlayerRight() { 
clearCanvas(player.x, player.y, player.width, player.height); 
player.x+=player.speed 
player.draw() 
}; 

var isJump = 0; 

function playerJump() { 
if (isJump==0) { 
setTimeout(function() { 
clearCanvas(player.x, player.y, player.width, player.height); 
player.y-=10; 
player.draw(); 
isJump = 1; 
},100); 
setTimeout(function(){ 
clearCanvas(player.x, player.y, player.width, player.height); 
player.y+=10; 
player.draw(); 
isJump=0; 
},300); 
}; 
}; 

/*big func to clear or draw canvas easy*/ 
function clearCanvas(x,y,width,height) { 
ctx.clearRect(x,y,width,height); 
}; 
function draw(x,y,width,height) { 
ctx.fillRect(x,y,width,height); 
}; 

/*in game loop we give keyCode and dofunc*/ 
startGame( 
function() { 
if(isKeyDown('D')) { 
movePlayerRight(); 
}; 
if(isKeyDown('A')) { 
movePlayerLeft(); 
}; 
if(isKeyDown('LEFT')) { 
movePlayerLeft(); 
}; 
if(isKeyDown('RIGHT')) { 
movePlayerRight(); 
}; 
if(isKeyDown('W')) { 
if(isJump==0) { 
playerJump(); 
}; 
}; 
if(isKeyDown('UP')) { 
if(isJump==0) { 
playerJump(); 
}; 
}; 
}); 


var map = { 

x: [150,350,480], 
y: [290,250, 250], 
w: [100,100, 250], 
h: [30,30,40], 

draw: function() { 
for(var i=map.x.length; i!=-1; i--) 
ctx.fillRect(map.x[i], map.y[i], map.w[i], map.h[i]); 
} 
}; 

var isCollision = 0; 


function checkCollision() { 
for(var i=map.x.length; i!=-1; i--){ 
if (player.x < map.x[i] + map.w[i] && 
player.x + player.width > map.x[i] && 
player.y < map.y[i] + map.h[i] && 
player.height + player.y > map.y[i]) { 
console.log('Hello motherfucker'); 
player.y=map.y[i]+map.w[i]; 
isCollision=1; 
var fall=0; 
} else { 
if(isCollision==0) { 
var fall = setInterval(function() { 
clearCanvas(player.x,player.y,player.width,player.height); 
player.y+=3; 
player.draw(); 
if(player.y>800) { 
clearInterval(fall) 
console.log('Fall has been stoped!:)') 
}; 
},10) 
fall(); 
}; 
}; 
}; 
}; 

var fall; 

function fall() { 
if(isCollision==0) { 
var fall; 
}; 
}; 

</script> 
</body>

Содержимое файлов key.js и engine.js отвечают за клавишу и игровой цикл. Как я себе представляю механизм и вообще в чем проблема?

Дело такое. Мне нужно постоянно (т.е., нужно действие в цикл засунуть, я бы это уже сделал, да только вот оно вообще не работает, цикл в функции startGame) сравнивать значения из массива мапы с координатами игрока, если все совпадает - игрок становится на координату платформы (player.y = map.y[i]+map.w[i]).

Казалось бы все должно работать. но есть одно НО. В массиве несколько значений, а значит что для одной платформы - коллизия есть, для остальных нет, в следствии чего происходит и console.log() и fall();.

Как я представлял себе решение задачи?

var global=0
var try=0

while(global==0) {
for() if() {
global=1
} else {
global==0
try++
If(try==map.x.lenght) {
fall();
};
};
}

но в данном случае значение функции - undefined. для запуска функции использовал консоль(checkCollision();)

Что должно получится? персонаж должен уметь ходить и прыгать по платформам и падать, если не допрыгнул (стандартная механика платформера, короче).

ОЧЕНЬ буду благодарен за помощь, заранее спасибо :)

/*engine.js*/
var _renderer = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
setTimeout(callback,1000/60);
};
})();

var _engine = function() {
	console.log('Игровой цикл не инициализирован!');
};

var startGame = function(game) {
	if(typeof game == 'function') {
		_engine = game;
	};
	gameLoop();
};

var setGame = function(game) {
	if(typeof game == 'function') {
		_engine = game;
	};
};

var gameLoop = function() {
	_engine();
	_renderer(gameLoop);
};

/*key.js*/
var keys = {
'W':87,
'A':65,
'D':68,
'LEFT':37,
'RIGHT':39,
'UP':38
};

var keyDown = {};

var setKey = function (keyCode) {
keyDown[keyCode] = true;
};

var clearKey = function (keyCode) {
keyDown[keyCode] = false;
};

var isKeyDown = function (keyName) {
return keyDown[keys[keyName]]==true;
};

window.onkeydown = function(e) {
setKey(e.keyCode);
};

window.onkeyup = function(e) {
clearKey(e.keyCode);
};

P.S: решения не прошу. если можете - подкиньте идейку

Спасибо за помощь :)

АУ ТОВАРИЩИ?

вы спите? неужели никто не знает? мда..

Цитата:

Как я представлял себе решение задачи?
...
If(try==map.x.lenght)
...
в следствии чего происходит и console.log()

В общем эльфы набигают грабить корованы.

Это господа знаете, что такое?

If(try==map.x.lenght)

Парень поцеловал девушку, после этого она сказала слово из трех букв, и в этом слове сделала три ошибки. Что она сказала?

Цитата:

Сообщение от CANGARIE

ТОВАРИЩИ

Тамбовский волк тебе товарищ. Кури травы меньше.

Цитата:

Сообщение от warren buffet (Сообщение 429750)

а теперь не выебывайся и скажи где здесь ошибка

Ошибка? Какая еще ошибка? Тут нет никакой ошибки, тут просто голимый сюрреализм. Открой консоль браузера и почитай его мнение о твоем произведении.

If(try==map.x.lenght)

js регистро-зависимый, нет такой конструкции If, сейчас js пытается вызвать функцию If(), правильно if

try - зарезервированное слово под оператор блока try... catch

x.lenght - опечатка, .length

С русским у тебя такая же проблема. Я понял только про эльфов. )))

ЗЫ "в следствии". Внезапно это предлог, бывает такое в русском языке. Сейчас у тебя идет следствие по какому-то уголовному делу и в этом следствии - в следствии - происходит "чего" и вывод в консоль. Правильно: вследствие чего.

Цитата:

Сообщение от warren buffet (Сообщение 429983)

о боже,я скинул не тот код :(( прости, действительно бред, я не проверил

var trycount = 0; 

var isCollision = setInterval( 
function checkCollision() { 
for(var i=0; i<=map.x.length; i++) { 
if(player.x < map.x[i] + map.w[i] && 
player.x + player.width > map.x[i] && 
player.y < map.y[i] + map.h[i] && 
player.height + player.y > map.y[i]) { 
i=map.x.length+1; 
/*close if*/} else { 
trycount++ 
var arrlong = 3; 
if (trycount==arrlong) { 
fall(); 
i = map.x.lenght+1 
clearInterval(isCollision); 
}; 
}; 
}; 
},1); 

function fall() { 

var fallCount = 0; 
if(isJump==0) { 
var falIntrv = setInterval(function() { 
clearCanvas(player.x,player.y,player.width,player.height); 
player.y+=20; 
draw(player.x,player.y,player.width,player.height); 
fallCount++; 
if(fallCount==100) { 
clearInterval(falIntrv); 
player.isDestroy = true; 
}; 
},20)

Прощаю. Теперь вопрос ~~почему Володька сбрил усы~~ куда ты дел отступы?

Если проблема реальная, попробуй вернуть отступы в исходный код и без помощи эльфов объяснить, что не работает и как работать должно. )

Цитата:

Сообщение от warren buffet (Сообщение 430061)

Должно работать так: есть координаты объектов (платформ) в массивах map.x,map.y,map.w,map.h. Если между платформой и игроком ЕСТЬ соприкосновение - меняется y персонажа. если нет - он падает. Пока что переделал, и это почти работает(где ошибка и почему "ПОЧТИ" знаю).

<!DOCTYPE html>

  <html >

  <head>
  <canvas id = "app" > Your browser doesnt support the Canvas.Please update it to actual version. </canvas> 
  </head> 

<body>
  <script defend src = "js2d.js"></script>  
  <script defend src = "key.js"></script>  
  <script defend src = "engine.js"> </script>  
  <script>


  /*load game script*/
  'use strict'
var game = {
  width: 800,
  height: 600,
  scene: 'loader'
};
/*in this variable i contian all game configurations*/
/*and load canvas*/

var c = document.getElementById('app');
var ctx = c.getContext('2d');
c.width = game.width;
c.height = game.height;

/*load image*/

var loader_first = new Image();
var loader_second = new Image();
var loader_third = new Image();

loader_first.src = "http://vkapilessons.esy.es/1.png";
loader_second.src = "http://vkapilessons.esy.es/2.png";
loader_third.src = "http://vkapilessons.esy.es/3.png";

var isLoad = false;

/*create the loader*/
if (game.scene == 'loader') {
  window.onload = function getLoader() {
    ctx.drawImage(loader_first, 0, 0, game.width, game.height);

    setTimeout(
      function() {
        ctx.clearRect(0, 0, game.width, game.height);
        ctx.drawImage(loader_second, 0, 0, game.width, game.height);
      }, 900);
    setTimeout(
      function() {
        ctx.clearRect(0, 0, game.width, game.height);
        ctx.drawImage(loader_third, 0, 0, game.width, game.height);
        isLoad = true;
        player.draw();
      }, 1600);
  };
};

/*change gamescene*/
if (isLoad) {
  game.scene = 'gamelesson'
};
/*global obj player with player.config*/
var player = {
  x: 150,
  y: 250,
  width: 50,
  height: 50,
  startX: 150,
  endX: 450,

  /*player behv.*/
  isRight: false,
  isLeft: false,
  isJump: false,
  isDestroy: false,
  speed: 1,

  draw: function drawPlayer() {
    clearCanvas(0, 0, game.width, game.height);
    draw(player.x, player.y, player.width, player.height);
    map.draw();
  },
};

/*in this function we create the player-move*/
function movePlayerLeft() {
  clearCanvas(player.x, player.y, player.width, player.height);
  player.x -= player.speed;
  player.draw()
  camera('right');
};

function movePlayerRight() {
  clearCanvas(player.x, player.y, player.width, player.height);
  player.x += player.speed;
  player.draw();
  camera('left');
};

var isJump = 0;

function playerJump() {
  if (isJump == 0) {
    setTimeout(function() {
      clearCanvas(player.x, player.y, player.width, player.height);
      player.y -= 10;
      player.draw();
      isJump = 1;
    }, 100);
    setTimeout(function() {
      clearCanvas(player.x, player.y, player.width, player.height);
      player.y += 10;
      player.draw();
      isJump = 0;
    }, 300);
  };
};

/*big func to clear or draw canvas easy*/
function clearCanvas(x, y, width, height) {
  ctx.clearRect(x, y, width, height);
};

function draw(x, y, width, height) {
  ctx.fillRect(x, y, width, height);
};

/*in game loop we give keyCode and dofunc*/
startGame(
  function() {
    if (isKeyDown('D')) {
      movePlayerRight();

    };
    if (isKeyDown('A')) {
      movePlayerLeft();

    };
    if (isKeyDown('LEFT')) {
      movePlayerLeft();

    };
    if (isKeyDown('RIGHT')) {
      movePlayerRight();

    };
    if (isKeyDown('W')) {
      if (isJump == 0) {
        playerJump();
      };
    };
    if (isKeyDown('UP')) {
      if (isJump == 0) {
        playerJump();
      };
    };
    if (player.x == 0 || player.x < 0) {
      clearCanvas(player.x, player.y, player.width, player.height);
      player.x = 0;
      draw(player.x, player.y, player.width, player.height);
    };

  });


var map = {
  x: [150, 250, 350],
  y: [290, 250, 290],
  w: [100, 100, 100],
  h: [40, 40, 40],
  draw: function() {
    for (var i = map.x.length; i != -1; i--) {
      ctx.fillRect(map.x[i], map.y[i], map.w[i], map.h[i]);
    }
  }
};

function camera(place) {
  if (place == 'right') {
    if (player.x > 0) {
      for (var i = map.x.length; i != -1; i--) {
        map.x[i]++;
        player.draw();
      };
    } else {
      clearCanvas(player.x, player.y, player.width, player.height);
      player.x = 0;
      draw(player.x, player.y, player.width, player.height);
    };
  } else {
    if (player.x < 630) {
      for (var i = map.x.length; i != -1; i--) {
        map.x[i]--;
        player.draw();
      };
    } else {
      clearCanvas(player.x, player.y, player.width, player.height);
      player.x = 630;
      draw(player.x, player.y, player.width, player.height);
    };
  }
};

var trycount = 0;


function collision() {
  if (isJump == 0) {
    for (var i = 0; i <= map.x.length; i++) {
      if (player.x <= map.x[i] + map.w[i] &&
        player.x + player.width >= map.x[i] &&
        player.y <= map.y[i] + map.h[i] &&
        player.height + player.y >= map.y[i]) {
        console.log('cd');
        i = map.x.lenght + 1;
        clearCanvas(player.x, player.y, player.width, player.height);
        map.draw();
        player.y = map.y[i] - map.h[i] - 10;
        draw(player.x, player.y, player.width, player.height);
      } else {
        trycount++
        if (trycount == map.x.length) {
          fall();
          trycount = 0;
        };
      };
    };
  };
};


function fall() {
  var fall = setInterval(function() {
    clearCanvas(player.x, player.y, player.width, player.height);
    player.y += 5
    draw(player.x, player.y, player.width, player.height);
    map.draw();
    if (player.y > 900) {
      clearInterval(fall);
    };
  }, 1);
};

</script>

</body>
</html>

Ошибку нашел и исправил :)

просто

player.y=
нужно было переместить над i = map.x.lenght++ так как в данном случае i становился 4 а map[4] не существует :)

Цитата:

ЕСТЬ соприкосновение - меняется y персонажа. если нет - он падает.

То есть, когда границы объектов "соприкасаются", то у персонажа "меняется", а если не соприкасаются, он падает с платформы.

Надо просто вычислять эти границы в координатах и сравнивать относительно 0, то есть вычитать. Если <=0, то соприкоснулись.

Тут я дошел до границы своих возможностей. У меня графический моск, который арифметику не принимает. )

Цитата:

Сообщение от CANGARIE

нашел

Вот что ~~крест~~ форум животворящий делает.

Цитата:

Сообщение от warren buffet (Сообщение 430067)

Вот что ~~крест~~ форум животворящий делает.

Именно) :dance: