JQuery CSS Fighting Game – Source Code – lesson 7

BACK TO LESSON 6

 

Moving…

The Original Sprite Sheets:
walk.png

I add the Source 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
...
  $("#buttonwalk").click(function(){
  $("div").removeClass("stand");
  $("div").addClass("walk");  // walk in place as a boxer
   
  // Terry Bogard position
  var positionX = $("#terrybogard").css("left"); // store the css position left into var positionX variable the value is 1000px
  var positionXsubstr = positionX.substring(0,positionX.length-2); // Remove the characters px, the positionXnum = 1000 without px characters
  var positionXnum = parseInt(positionXsubstr,10); // Convert the string in a integer number
  // alert(positionXnum);  // verify Terry Bogard position
   
  // Robert Garcia position
  var enemypositionX = $("#robertgarcia").css("left"); // store the css position left into var positionX variable the value is 300px
  var enemypositionXsubstr = enemypositionX.substring(0,enemypositionX.length-2); // Remove the characters px, the positionXnum = 300 without px characters
  var enemypositionXnum = parseInt(enemypositionXsubstr,10); // Convert the string in a integer number
  // alert(enemypositionXnum);  // verify Robert Garcia position
   
  // Collision detection START
  if (positionXnum > enemypositionXnum+150){
  // if the enemy position < your position, you have the enemy in front and you can walk on the left of the screen
  // if the enemy position > your position, you have the enemy rear and you can't walk  on the left of the screen
  // I add +150 px to not overlay the characters
   $("#terrybogard").css({left:"-=60px"}); // I change the ccs property position of 60px to move on the left of the screen
  }
  // Collision detection END
 
  });
...

I need a simple collision detection system. I am going to store the css property – position – in a integer variable and after I am going to verify the distance between the two characters with a simple subtraction. If the enemy is far away I move the character on the left of the screen, if the enemy is too close I stop the translation. If something does not work I can use the line of code alert(enemypositionXnum); to verify the variable’s value.

DEMO

 

GO TO LESSON 8

 

My official WebSite >