Question

所以，这是交易，我一直在用javascript构建一个小跑步游戏似乎工作正常（ish）。我有两个我的玩家能够同时移动，我有一个对象构造函数从我拥有的数组构建对象。这些物体也成功地移动了我想要的方向和速度，但是我在设计碰撞检测方面遇到了麻烦。我知道javascript在这些东西上相当不稳定，我以一种奇怪的方式构建我的游戏，所以也有，但我认为必须有一些方法来添加它。这是我的所有代码。如果有人知道这些东西你能解释我能做些什么吗？

var obstacles;
var $char1 = $('#character1');
var $char2 = $('#character2');

var object = 
[{name: 'Jerry', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Tammy', width: '9px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'yellow'},
{name: 'Mr. Meeseeks', width: '10px', height: '35px', position: 'absolute', left: '100%', bottom: '0px', background: 'blue'},
{name: 'Mr. Meeseeks', width: '10px', height: '35px', position: 'absolute', left: '100%', bottom: '0px', background: 'blue'},
{name: 'Mr. Meeseeks', width: '10px', height: '35px', position: 'absolute', left: '100%', bottom: '0px', background: 'blue'},
{name: 'Mr. Meeseeks', width: '10px', height: '35px', position: 'absolute', left: '100%', bottom: '0px', background: 'blue'},
{name: 'Mr. Meeseeks', width: '10px', height: '35px', position: 'absolute', left: '100%', bottom: '0px', background: 'blue'},
{name: 'Telepathic Spider', width: '40px', height: '15px', position: 'absolute', left: '100%', bottom: '0px', background: 'black'},
{name: 'Telepathic Spider', width: '40px', height: '15px', position: 'absolute', left: '100%', bottom: '0px', background: 'black'},
{name: 'Telepathic Spider', width: '40px', height: '15px', position: 'absolute', left: '100%', bottom: '0px', background: 'black'},
{name: 'Telepathic Spider', width: '40px', height: '15px', position: 'absolute', left: '100%', bottom: '0px', background: 'black'},
{name: 'Counciler Rick 1', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'white'},
{name: 'Counciler Rick 2', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'white'},
{name: 'Counciler Rick 3', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'white'},
{name: 'Counciler Rick 4', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'white'},
{name: 'Federation Police', width: '12px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Federation Police', width: '12px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Federation Police', width: '12px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Federation Police', width: '12px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Federation Police', width: '12px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Snowball', width: '15px', height: '45px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Jellybean King', width: '15px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Abradolf Linkler', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Cousin Nicki', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Fart', width: '15px', height: '15px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Fart', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Fart', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'},
{name: 'Fart', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, 
{name: 'Fart', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}];


function jump($el){
  $el.animate({bottom: '+=10px'}, .5);
}

function fall($el){
  $el.animate({bottom: 0});
}




keys = [false, false, false, false, false, false];



$(document).ready(function(){
  console.log('hi')
  obstacles
  // obstacles = new component(10, 200, "green", 300, 120);

  $(document).on('keydown', function(ex){
    switch(ex.keyCode) {
      case 38:
        keys[1] = true; //LEFT
        break;
      case 37:
        keys[0] = true; //UP
        break;
      case 39:
        keys[2] = true; //RIGHT
        break;
      case 65:
        keys[3] = true;
        break;
      case 87:
        keys[4] = true;
        break;
      case 68:
        keys[5] = true;
        break;
    }
  })

  $(document).on('keyup', function(ex){
    switch(ex.keyCode) {
      case 38:
        keys[1] = false;
        console.log('bottom');
        $char1.finish().animate({bottom: '0px'});
        break;
      case 37:
        keys[0] = false;
        break;
      case 39:
        keys[2] = false;
        break;
      case 65:
        keys[3] = false;
        break;
      case 87:
        keys[4] = false;
        console.log('2bottom');
        $char2.finish().animate({bottom: '0px'});
        break;
      case 68:
        keys[5] = false;
        break;
    }

  })

  function checkKeys(e) {
  if(keys[1] || keys[0] || keys[2] || keys[3] || keys[4] || keys[5]) {
              
        if (keys[2]) {
          console.log('right')
          $char1.finish().animate({left: '+=5px'});
        }

        if (keys[0]) {
          console.log('left');
          $char1.finish().animate({left: '-=5px'});
        }
        if (keys[1]) {
          console.log('up');
          jump($char1);
        }
        if (keys[3]) {
          console.log('2left')
          $char2.finish().animate({left: '-=5px'})
        }
        if (keys[4]) {
          console.log('2up')
          jump($char2);
        }
        if (keys[5]) {
          console.log('2right')
          $char2.finish().animate({left: '+=5px'})
        }
    }
  }

  window.setInterval(checkKeys, 1000 / 60);
  if ($char1.bottom > '150px') {
    $char1.bottom = '150px';
  }



  function Enemy (name, width, height, background, position, left, bottom, move) {
    this.name = name;
    this.width = width;
    this.height = height;
    this.background = background;
    this.position = position;
    this.left = left;
    this.bottom = bottom;
    this.move = move;
  }

  Enemy.prototype.render = function() {

    $('#upperSky').append($('<div>').addClass('enemyObject')
      .css('width', this.width)
      .css('height', this.height).css('background', this.background).css('position', this.position).css('left', this.left).css('bottom', this.bottom));
  };

  var enemyArray = [];

  for (var i = 0; i < object.length; i++) {
    var r = makeRandomNum(object.length);
    var myObject = new Enemy(object[r].name, object[r].width, object[r].height, object[r].background, object[r].position, object[r].left, object[r].bottom);
    enemyArray.push(myObject);
  };
  var intervalId;
  var paintEnemies = function(){
    if(!enemyArray.length) {
      clearInterval(intervalId)
    }

    enemyArray.pop().render();
  };
  intervalId = setInterval(paintEnemies, 2000)

  function makeRandomNum(max) {
    return Math.floor(Math.random() * max)
  }

  function moveObjectLeft() {
    $('.enemyObject').finish().animate({left: '-=50px'})
  }

  walkInterval = setInterval(moveObjectLeft, 1000)

  // collision1();
  // function collision1() {
  //   if ($char1.position().left < $('.enemyObject').position().left + $('.enemyObject').width && $char1.left + $char1.width > $('.enemyObject').left && $char1.bottom < $('.enemyObject').bottom + $('.enemyObject').height && $char1.bottom + $char1.height > $('.enemyObject').bottom) {
  //     console.log('collision detected');
  //   }
  // }

  

})

.container {
  border: 5px solid black;
  height: 400px;
  width: 600px;
  margin: 0 auto;
}
#upperSky {
  height: 300px;
  width: 600px;
  background-color: rgb(26, 167, 203);
  position: relative;
  overflow: auto;
}
#character1 {
  height: 30px;
  width: 10px;
  background-color: red;
  position: absolute;
  bottom: 0px;
}

#character2 {
  height: 30px;
  width: 10px;
  background-color: blue;
  position: absolute;
  bottom: 0px;
}

#cloud1 {
  height: 30px;
  width: 60px;
  background: url(../images/cloud1.png);
  position: absolute;
  
}
/*  animation-duration: 15s;
  animation-name: character1;*/

/*@keyframes character1 {
  from {
    margin-left: 0%;
    width: 5%;
  }
  to {
    margin-left: 100%;
    width: 5%;
  }
}*/

#topGround {
  height: 15px;
  width: 600px;
  background-color: rgb(76, 40, 25);
}
#midGround {
  height: 30px;
  width: 600px;
  background-color: rgb(90, 51, 11);
}
#lowGround {
  height: 55px;
  width: 600px;
  background-color: rgb(136, 86, 21);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">
    <title>THE RICK AND MORTY SUPER SHOWDOWN THIIIIIIIIING!!!!!</title>
  </head>
  <body>
    <div class="allBody">
      <div class="headings">
        <h1 class="h1" id="gameTitle">The RICK AND MORTY SUPER SHOWDOWN OF STUUUUUUUUFFFFFFF!!!!</h1>
        <h6 class="h6" id="gameSubTitle">Blitz n Chips is not legally responsible for any real world psychotic damages this game causes.</h6>
      </div>
      <div class="container">
        <div class="environment sky" id="background">
          <div class="environment sky" id="upperSky">
            <div class="environment sky clouds" id="cloud1"></div>
            <div class="environment sky clouds" id="cloud2"></div>
            <div class="environment sky clouds" id="cloud3"></div>
            <div class="objects foreground characters" id="character1"></div>
            <div class="objects foreground characters" id="character2"></div>
          </div>
          <div class="environment backgroundWorld">
            <div class="environment backgroundWorld mountains" id="mountain1"></div>
            <div class="environment backgroundWorld mountains" id="mountain2"></div>
            <div class="environment backgroundWorld mountains" id="mountain3"></div>
          </div>
        </div>
        <div class="environment ground" id="topGround"></div>
        <div Class="environment ground" id="midGround"></div>
        <div Class="environment ground" id="lowGround"></div>
      </div>
      <div class="buttons gameButtons"
        <button class="buttons gameButtons" id="gameReturn">Return Home</button>
        <button class="buttons gameButtons" id="gamePlayGame">Play Game</button>
        <button class="buttons gameButtons" id="gameReset">Reset</button>
      </div>
    </div>
  </body>
  <script src="./js/jquery.2.2.0.min.js"></script>
  <script type="text/javascript" src="./js/app.js"></script>
</html>

Answer 1

最基本的碰撞检测，非转换矩形碰撞的类型包括以下内容：

需要检查碰撞的对象。例如，我可以拥有一系列硬币和一个玩家角色。我想要一直检查的是玩家是否与硬币发生碰撞。编写性能良好的碰撞检测最重要的部分之一就是找出需要与什么进行交互的内容。
检查以确认发生了碰撞。就像我提到的那样，使用普通矩形非常简单（顺便说一下，大多数HTML元素都是这样）。所以我们可以这样做：

var coins = []; var player = {};

让我们假设硬币阵列充满了具有x，y，宽度和高度的物体。玩家对象在这方面是相似的。

// This function is called every frame, or less often if you want to optimize.
function checkCollisions() {
  for (var coinIdx= 0; coinIdx < coins.length; coinIdx++) {
    var coin = coins[coinIdx];

    if (coin.x < player.x + player.width &&
       coin.x + coin.width > player.x &&
       coin.y < player.y + player.height &&
       coin.height + coin.y > player.y) {
     console.log('COLLISION');
   }
  }
}

如何在我的javascript游戏中添加碰撞检测？

1 个答案: