Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Platformówka treningówka problem kolizje.
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
KotWButach
22.11.2013, 00:58:42
Witam
Mam problem mam nadzieję że ktoś z was mógłby mi pomóc. Otóż mam prostą platformówkę ale mam problem z kolizjami wykrywa kolizje dla X ale dla Y już nie sad.gif. Więc wchodzi przez ściany.

Załączam kod.

[HTML] pobierz, plaintext 
  1. <html>
  2.     <body onkeydown="keyDown(event)" onkeyup="keyUp(event)" ></body>
  3.     <canvas id="graphics" width="800" height="600" style="position: absolute; top: 0; left: 0; background: red;"></canvas>
  4.     <script>
  5.  
  6.         // VARIBLES
  7.         var gameCanvas = document.getElementById("graphics");
  8.         var grafx = gameCanvas.getContext("2d"); //or gameCanvas
  9.         var player = new object("mario_right.png", 300, 100, 50, 100);
  10.  
  11.         var block = [];
  12.  
  13.         function build(x, y, xStart, yStart) {
  14.             for (var z = 0; z < y; z++) {
  15.                 xStart2 = xStart
  16.                 for (var i = 0; i < x; i++) {
  17.  
  18.                     xStart += 50;
  19.                     block[block.length] = new object("block.jpg", xStart, yStart, 50, 50);
  20.  
  21.                 }
  22.                 xStart = xStart2;
  23.                 yStart += 50;
  24.             }
  25.  
  26.         }
  27.         build(5, 8, 350, 300);
  28.         build(5, 5, 0, 400);
  29.  
  30.         var isLeft = false;
  31.         var isRight = false;
  32.         var prevKey = false;
  33.         var isSpace = false;
  34.  
  35.         player.gravity = 20;
  36.         player.weight = 0.1;
  37.  
  38.  
  39.         //EVENTS
  40.         function keyDown(e) {
  41.  
  42.             if (String.fromCharCode(e.keyCode) === "%")
  43.                 isLeft = true;  // player.x -= 5;
  44.             if (String.fromCharCode(e.keyCode) === "'")
  45.                 isRight = true; // player.x += 5;
  46.             if (String.fromCharCode(e.keyCode) === " ")
  47.                 isSpace = true; // player.x += 5;
  48.  
  49.         }
  50.         function keyUp(e) {
  51.  
  52.             if (String.fromCharCode(e.keyCode) === "%")
  53.                 isLeft = false;  // player.x -= 5;
  54.             if (String.fromCharCode(e.keyCode) === "'")
  55.                 isRight = false; // player.x += 5;
  56.             if (String.fromCharCode(e.keyCode) === " ")
  57.                 isSpace = false; // player.x += 5;
  58.  
  59.         }
  60.  
  61.         // Main Loop
  62.         mainLoop();
  63.         function mainLoop() {
  64.  
  65.  
  66.  
  67.             // PRE VARRIABLE ADJUSTMENTS
  68.             //for(var i=0 ; i<=maxBlock ; i++)
  69.             // block[i].x += -player.Velocity_x;
  70.             for (var i = 0; i < block.length; i++) {
  71.                 block[i].x += -player.Velocity_x;
  72.                 //player.x += player.Velocity_x;
  73.             }
  74.             player.y += player.Velocity_y;
  75.  
  76.             // LOGIC
  77.             if (isLeft)
  78.                 player.Velocity_x = -5;
  79.             if (isRight)
  80.                 player.Velocity_x = 5;
  81.             if (!isLeft && !isRight)
  82.                 player.Velocity_x = 0;
  83.  
  84.             if (player.Velocity_y < player.gravity)
  85.                 player.Velocity_y += player.weight;
  86.  
  87.             for (var i = 0; i < block.length; i++) {
  88.                 if (player.isColliding(block[i]) && player.y + player.height < block[i].y + player.Velocity_y) {
  89.                     player.y = block[i].y - player.height;
  90.                     player.Velocity_y = 0;
  91.                 }
  92.             }
  93.  
  94.  
  95.             if (isSpace && player.Velocity_y === 0) {
  96.                 player.Velocity_y = -5;
  97.  
  98.             }
  99.  
  100.             if (player.y > 700) {
  101.                 alert('Game Over');
  102.                 player.y = 100;
  103.                 player.x = 100;
  104.             }
  105.  
  106.             // IMAGE CHANGE
  107.             if ((isRight && !isLeft) || (!isRight && isLeft)) { // by postac nie znikala
  108.                 if (isLeft && prevKey === false) {
  109.                     player.Sprite.src = "mario_left.png";
  110.                     prevKey = true;
  111.                 }
  112.  
  113.                 if (isRight && prevKey === true) {
  114.                     player.Sprite.src = "mario_right.png";
  115.                     prevKey = false;
  116.                 }
  117.             }
  118.  
  119.  
  120.             // POST VARRIABLE ADJUSTMENTS
  121.  
  122.  
  123.             // RENDERING
  124.             // czyszczenie obrazu
  125.             grafx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
  126.  
  127.             // rysowanie postaci
  128.             grafx.drawImage(player.Sprite, player.x, player.y);
  129.  
  130.             // rysowanie blokow            
  131.             for (var i = 0; i < block.length; i++) {
  132.                 grafx.drawImage(block[i].Sprite, block[i].x, block[i].y);
  133.             }
  134.             setTimeout(mainLoop, 1000 / 60);
  135.         }
  136.  
  137.         function object(img, x, y, width, height) {
  138.             this.Sprite = new Image();
  139.             this.Sprite.src = img;
  140.             this.x = x;
  141.             this.y = y;
  142.             this.width = width;
  143.             this.height = height;
  144.             this.Previous_x;
  145.             this.Previous_y;
  146.             this.Velocity_x = 0;
  147.             this.Velocity_y = 0;
  148.             this.gravity = 0;
  149.             this.weight = 0;
  150.  
  151.             // wytworzenie kolizji z obiektami. <---------------------- KOLIZJE
  152.             this.isColliding = function(obj) {
  153.                 if (this.x > obj.x + obj.width)
  154.                     return false;
  155.                 if (this.x + this.width < obj.x)
  156.                     return false;
  157.                 if (this.y > obj.y + obj.height)
  158.                     return false;
  159.                 if (this.y + this.height < obj.y)
  160.                     return false;
  161.                 return true;
  162.             };
  163.  
  164.  
  165.         }
  166.     </script>
  167. </html>
[HTML] pobierz, plaintext
SmokAnalog
22.11.2013, 01:42:26
Na moje oko Twoja funkcja do detekcji kolizji wygląda w porządku. Czy problem nie tkwi w rozmiarze kroku? Może postać w jednym kroku "przeskakuje" przez ścianę? Idealnie byłoby, gdyby jeden krok w logice wynosił maksymalnie 1 piksel.
KotWButach
22.11.2013, 04:36:46
Niestety nie sad.gif zmieniłem na 1 ale dalej nie wykrywa kolizji.

może coś tutaj? 

[PHP] pobierz, plaintext 
  1.             for (var i = 0; i < block.length; i++) {
  2.                 if (player.isColliding(block[i]) && player.y + player.height < block[i].y + player.Velocity_y) {
  3.                     player.y = block[i].y - player.height;
  4.                     player.Velocity_y = 0;
  5.                 }
  6.             }
[PHP] pobierz, plaintext
SmokAnalog
22.11.2013, 09:30:14
Ja bym w ogóle usunął ten fragment i zrobił inaczej. Zamiast "cofać" gracza w przypadku kolizji z blokiem, lepiej sprawdzać kolizję przed wykonaniem kroku. Zamiast sprawdzać kolizję z blokiem, lepiej też uogólnić logikę i sprawdzać czy nie koliduje z jakimkolwiek obiektem, przez który nie można przejść. Obiekty te możesz definiować na dwa sposoby:
  • trzymać je w tablicy
  • nadawać im określoną właściwość, np. object.obstacle = true
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.