Question

我有这个碰撞功能，最初是为两个div编写的。我想添加更多div，这样我就可以在道路上创建一个包含多辆汽车的游戏（目标是让用户穿过它而不会碰撞）。问题是我不明白为什么只有一个div触发方法而不是两者。我不知道问题是否在if语句中。

JavaScript的：

if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2 )  { 
          return false;
        }else {
            $frog.fadeOut();
        }

编辑：

如果我有类似的话：

   function collision($car, $frog) {

      var x1 = $car.offset().left;
      var y1 = $car.offset().top;
      var h1 = $car.outerHeight();
      var w1 = $car.outerWidth();

      var b1 = y1 + h1;
      var r1 = x1 + w1;

      var x2 = $frog.offset().left;
      var y2 = $frog.offset().top;
      var h2 = $frog.outerHeight();
      var w2 = $frog.outerWidth();
      var b2 = y2 + h2;
      var r2 = x2 + w2;

      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2  )  { 

          return true;

        }else {

            $frog.fadeOut();
        }

    }

function secondCollision($secondCar, $frog){
     var x3 = $secondCar.offset().left;
      var y3 = $secondCar.offset().top;
      var h3 = $secondCar.outerHeight();
      var w3 = $secondCar.outerWidth();

      var b3 = y3 + h3;
      var r3 = x3 + w3; 

      var x2 = $frog.offset().left;
      var y2 = $frog.offset().top;
      var h2 = $frog.outerHeight();
      var w2 = $frog.outerWidth();
      var b2 = y2 + h2;
      var r2 = x2 + w2;

    if ( b3 < y2 || y3 > b2 || r3 < x2 || x3 > r2 )  { 

          return true;

        }else {

            $frog.fadeOut();
        }

}


window.setInterval(function() {
  (collision($('#car'), $('#frog')));

}, 0);
window.setInterval(function() {
  (secondCollision($('#secondCar'), $('#frog')));

}, 0);

适用于第一辆车。但两辆车的参数都没有发生......

或者即使这样写，它也有效，但它的重复代码......

rentrez

小提琴： events

Answer 1

实际上解决方案非常简单。只需要在每次添加新div时调用碰撞函数，并将其ID作为参数传递。整个剧本：

import { Component} from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

import { FirebaseService } from '../../services/firebase.service';
import { Storage } from '@ionic/storage';
import { Lot } from '../../classes/lot'
import { Handler } from '../../classes/handler';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  //variable to track the app state
  appState: string = "default";
  loginError: boolean = false;

  login: boolean = false;
  logout: boolean = false;

  //active variables
  activeLotKey: string;
  activeLot: Lot;

  //lots variable that contains a list of parking lots in that area
  handlers: Handler[];
  handler: Handler;

  //constructor function => initializes the lots variable
  constructor(public navCtrl: NavController, public platform: Platform, public _fs: FirebaseService, public storage: Storage) {
    this._fs.getHandlers().subscribe(handlers => this.handlers = handlers);
    platform.ready().then(() => {
      storage.ready().then(() => {
        storage.get('handler').then((handler) => {
          if(handler){ 
            this.handler = handler;
            console.log(this.handler);
            this._fs.getLot(this.handler.lotKey).subscribe(lot => {
              this.activeLot = lot[0];
              console.log(this.activeLot); 
            });
            //console.log(this.lot);
          } else {
            this.appState = 'login';
            console.log('chaning state to ' + this.appState);
          }
        });
      });
    });
  }

  logIn(username: string, password: string){
    for(let handler of this.handlers){
      if(handler.username == username && handler.password == password){
        console.log("Username : " + username + " and Password " + password + " is correct...");
        this.handler = handler;
        this.handler.isLoggedIn = true;
        this._fs.updateHandler(this.handler.$key, this.handler);
        this.loginError = false;
        this.setHandler();
        this.getHandler();
        return;
      }
    }
    console.log("Username : " + username + " and Password " + password + " is incorrect!!!");
    this.loginError = true;
  }

  logOut(){
    this.handler.isLoggedIn = false;
    this._fs.updateHandler(this.handler.$key, this.handler);
    this.removeHandler();
    this.getHandler();
  }

  setHandler(){
    this.storage.ready().then(() => {
      this.storage.set("handler", this.handler).then((d) => {
        console.log("the handler is written to local storage", d);
      }, (e) => {
        console.log("Error while inserting ", e);
      });
    });
  }

  getHandler(){
    this.storage.ready().then(() => {
      this.storage.get('handler').then((handler) => {
        if(handler){
          this.handler = handler;
          console.log('get storage function' + handler);
          this._fs.getLot(handler.lotKey).subscribe(lot => {
            this.activeLot = lot[0];
            console.log(this.activeLot); 
          });
          this.appState = 'default';
          console.log('Changing appState to default');
        } else {
          this.appState = 'login';
          console.log('chaning state to ' + this.appState);
        }
      });
    });
  }

  removeHandler(){
    this.storage.ready().then(() => {
      this.storage.clear().then((d) => {
        console.log("the handler is removed from the local storage", d);
      }, (e) => {
        console.log("Error while removing ", e);
      });
    });
  }

  changeState(state: string, lot?: Lot){
    if(lot){
      this.activeLot = lot;
      this.activeLotKey = lot.$key;
    }
    console.log('changing state from ' + this.appState + ' to ' + state);
    this.appState = state;
  }
}

JavaScript：碰撞divs问题

1 个答案: