Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (495)
Games in Android Showcase (114)
games submitted by our members
Games in WIP (563)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Sidescroller jumping/collision (Not Java, but Javascript)  (Read 1282 times)
0 Members and 1 Guest are viewing this topic.
Offline Regenuluz
« Posted 2014-04-02 08:05:41 »

'ello guys,

So I have a question about some jumping and collision stuff in a sidescroller, so here goes:

I'm making a sidescroller for my bachelor project(A game for helping kids learn sequences of numders, such as 3,6,9 ... 27, 30)

What I'm doing is exactly this(Couldn't figure out a neat way of writing this, without pasting my _HORRIBLE_ code)

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
54  
55  
56  
57  
58  
59  
60  
61  
62  
63  
Player.prototype.update = function(entities) {
   if(Keyboard.isPressed(Keyboard.D)) {
      this.velocity.x = 10;
   } else if(Keyboard.isPressed(Keyboard.A)) {
      this.velocity.x = -10;
   } else {
      this.velocity.x = 0;
   }

   if(!this.isJumping && Keyboard.isPressed(Keyboard.SPACE)) {
      this.isJumping = true;
      this.velocity.y = -this.jumpSpeed;
   }

   var move = (Math.abs(this.velocity.x) > Math.abs(this.velocity.y)) ? Math.abs(this.velocity.x) : Math.abs(this.velocity.y);

   for(var i = 0; i < move; i++) {
      var lastX = this.x,
         lastY = this.y;

      var nx = this.x + (this.velocity.x / move),
         ny = this.y + (this.velocity.y / move);

      var colX = false,
         colY = false;

      for(var x = 0; x < entities.length; x++) {
         if(entities[x].passable) {
            continue;
         }

         this.setX(nx);
         this.setY(ny);

         if(this.intersects(entities[x])) {

            this.setY(lastY);
            if(this.intersects(entities[x])) {
               nx = lastX;
               colX = true;
            }

            this.setX(nx);
            this.setY(ny);
            if(this.intersects(entities[x])) {
               ny = lastY;
               colY = true;
            }
         }
      }

      if(this.velocity.y > 0 && colY && !colX) {
         this.isJumping = false;
      }

      this.sprite.position.x = this.x;
      this.sprite.position.y = this.y;
   }

   if(this.velocity.y < this.grav) {
      this.velocity.y += this.grav;
   }
};


This sorta kinda works, except that you're able to "cling" to walls, because .. Well, I'm not perfectly sure, tbh, but I'm assuming that it's somehow finding that it doesn't collide with the wall on the side, but it collides with the wall piece below it.

(I'm aware that the code isn't exactly epic, but it's currently just for trying to get it do behave as it should, cleanup comes later, if there's time for it)

Any clever tips would be most appreciated! Smiley
Online LiquidNitrogen
« Reply #1 - Posted 2014-04-02 08:48:30 »

I find that I have to do the horizontal move, check for a horizontal collision, then do the vertical movement and check for vertical collision. I'm not sure you can do both at the same time and get the desired result. I can see you're trying to achieve that, but try doing it as 2 totally separate operations and see if that helps.
Offline Grunnt

JGO Wizard


Medals: 68
Projects: 8
Exp: 5 years


Complex != complicated


« Reply #2 - Posted 2014-04-02 09:42:29 »

Edit: nvm, must learn to read title.

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline wessles

JGO Wizard


Medals: 66
Projects: 4
Exp: 3 years


Profile picture isn't relevant.


« Reply #3 - Posted 2014-04-02 19:56:39 »

Just so you know, Javascript is VERY different from Java.

Offline jonjava
« Reply #4 - Posted 2014-04-02 20:39:19 »

LiquidNitrogen has the right idea. Even better if you separate the hor/ver movement into moving left/right up/down.

Additionally, looping through all entities to check for collisions isn't really efficient at all in the long run - but hey, if it works it works.

Offline DrZoidberg

Senior Member


Medals: 15



« Reply #5 - Posted 2014-04-02 22:45:52 »

There are some things you can do to make this kind of stuff easier to handle.
For once you should start to think in vectors.
http://www.mathsisfun.com/algebra/vectors.html

You can use vectors to represent a position, velocity, acceleration, etc.
It usually simplifies your code if you make mathematical entities - e.g. vectors - immutable.
That means you don't ever change such an object, instead you always create new ones.

Here is an example for a 2d vector.
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
function Vec2D(x,y) {
    this.x = x;
    this.y = y;
};

Vec2D.prototype.dotProduct = function(v) {
    return this.x*v.x+this.y*v.y;
};
Vec2D.prototype.crossProduct = function(v) {
    return this.x*v.y-this.y*v.x;
};
Vec2D.prototype.getLength = function() {
    return Math.sqrt(this.x*this.x+this.y*this.y);
};
Vec2D.prototype.add = function(v) {
    return new Vec2D(this.x+v.x, this.y+v.y);
};
Vec2D.prototype.addX = function(dx) {
    return new Vec2D(this.x+dx, this.y);
};
Vec2D.prototype.addY = function(dy) {
    return new Vec2D(this.x, this.y+dy);
};
Vec2D.prototype.withX = function(x) {
    return new Vec2D(x, this.y);
};
Vec2D.prototype.withY = function(y) {
    return new Vec2D(this.x, y);
};
Vec2D.prototype.sub = function(v) {
    return new Vec2D(this.x-v.x, this.y-v.y);
};
Vec2D.prototype.mul = function(m) {
    return new Vec2D(this.x*m, this.y*m);
};
Vec2D.prototype.div = function(d) {
    return new Vec2D(this.x/d, this.y/d);
};
Vec2D.prototype.neg = function() {
    return new Vec2D(-this.x, -this.y);
};
Vec2D.prototype.toString = function() {
    return "("+this.x+", "+this.y+")";
};
Vec2D.prototype.equals = function(v) {
    return this.x === v.x && this.y === v.y;
};


Another useful strategy is to seperate your code into several small pieces and put every piece into it's own function.
Unfortunately due to JavaScripts bad design, that can be a little tricky.

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
Player.prototype.update = (function() {
  var oldPos, _this;
 
  var move = function(v) {
    oldPos = _this.pos;
    _this.pos = _this.pos.add(v);
  };
 
  var moveBack = function() {
    _this.pos = oldPos;
  };
 
  var checkCollision = function(entities) {
    for(var i = 0; i < entities.length; i++) {
      if(!entities[i].passable && _this.intersects(entities[i])) return true;
    }
    return false;
  };
 
  var tryToMove = function(d, entities) {
    move(d);
    if(checkCollision(entities)) {
      moveBack();
      return true;
    }
    return false;
  };
 
  var update = function(entities) {
    _this = this;
    if(Keyboard.isPressed(Keyboard.D)) {
      this.velocity = this.velocity.withX(10);
    } else if(Keyboard.isPressed(Keyboard.A)) {
      this.velocity = this.velocity.withX(-10);
    } else {
      this.velocity = this.velocity.withX(0);
    }
    if(!this.isJumping && Keyboard.isPressed(Keyboard.SPACE)) {
      this.isJumping = true;
      this.velocity = this.velocity.addY(-this.jumpSpeed);
    }
    if(this.velocity.y < this.grav) {
      this.velocity = this.velocity.addY(this.grav);
    }
    var steps = Math.max(this.velocity.x, this.velocity.y);
    var distance = this.velocity.div(steps);
    var isColliding = false;
    for(var i = 0; i < move && !isColliding; i++) {
      isColliding = tryToMove(distance, entities);
    }
  }
  return update;
})();
Offline Regenuluz
« Reply #6 - Posted 2014-04-03 07:16:05 »

I find that I have to do the horizontal move, check for a horizontal collision, then do the vertical movement and check for vertical collision. I'm not sure you can do both at the same time and get the desired result. I can see you're trying to achieve that, but try doing it as 2 totally separate operations and see if that helps.

Changed to do this, even if it burns my soul a little, seeing as it's now 2n instead of just n in runtime. But it works, and it'll have to do for now. Smiley

Edit: nvm, must learn to read title.

It's always a good idea to actually read stuff Tongue

Just so you know, Javascript is VERY different from Java.

I'm well aware, as I'm writing in both languages. However this is the only forum I am on, that has anything to do with gaming, and seeing as collision detection is a general term, then I deemed it was okay to post it here(Someone correct me if I'm wrong) and I did write in the title that it was Javascript problem and not Java. Smiley


snip ....
Looks like lots of good stuff, I'll have to take a closer look at it later! Smiley
Offline jonjava
« Reply #7 - Posted 2014-04-03 08:18:00 »

Changed to do this, even if it burns my soul a little, seeing as it's now 2n instead of just n in runtime. But it works, and it'll have to do for now. Smiley

<a href="http://www.youtube.com/v/31g0YE61PLQ?version=3&amp;hl=en_US&amp;start=" target="_blank">http://www.youtube.com/v/31g0YE61PLQ?version=3&amp;hl=en_US&amp;start=</a>

Offline wessles

JGO Wizard


Medals: 66
Projects: 4
Exp: 3 years


Profile picture isn't relevant.


« Reply #8 - Posted 2014-04-04 02:29:04 »

Just so you know, Javascript is VERY different from Java.

I'm well aware, as I'm writing in both languages. However this is the only forum I am on, that has anything to do with gaming, and seeing as collision detection is a general term, then I deemed it was okay to post it here(Someone correct me if I'm wrong) and I did write in the title that it was Javascript problem and not Java. Smiley

D'oh! I thought you were using Html+Javascript. *palm*

Pages: [1]
  ignore  |  Print  
 
 

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

Dwinin (29 views)
2014-09-12 09:08:26

Norakomi (57 views)
2014-09-10 13:57:51

TehJavaDev (78 views)
2014-09-10 06:39:09

Tekkerue (38 views)
2014-09-09 02:24:56

mitcheeb (58 views)
2014-09-08 06:06:29

BurntPizza (45 views)
2014-09-07 01:13:42

Longarmx (30 views)
2014-09-07 01:12:14

Longarmx (35 views)
2014-09-07 01:11:22

Longarmx (36 views)
2014-09-07 01:10:19

mitcheeb (40 views)
2014-09-04 23:08:59
List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06

List of Learning Resources
by SilverTiger
2014-07-31 11:54:12

HotSpot Options
by dleskov
2014-07-08 01:59:08
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!