У меня проблемы с обнаружением столкновений - PullRequest
Новая
       24

У меня проблемы с обнаружением столкновений

0 голосов
/ 07 ноября 2019

Я впервые работаю с html, хотя mygamepiece останавливается у основания, он проходит через боковые стороны и верх холста. Кто-нибудь знает, как это исправить? Вот код, который я использую. 

  <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
    canvas {
        border:10px solid skyblue;
        background-color: powderblue;
    	
    	
    	
    
    }
    </style>
    </head>
    <body onload="startGame()">
    <script>
    
    
    var myGamePiece;
    
    
    function startGame() {
        myGamePiece = new component(30, 30, "purple", 80, 75);
        myGameArea.start();
    }
    
    
    var myGameArea = {
        canvas : document.createElement("canvas"),
        start : function() {
            this.canvas.width = 1550;
            this.canvas.height = 745;
            this.context = this.canvas.getContext("2d");
            document.body.insertBefore(this.canvas, document.body.childNodes[0]);
            this.interval = setInterval(updateGameArea, 20);
            window.addEventListener('keydown', function (e) {
                myGameArea.keys = (myGameArea.keys || []);
                myGameArea.keys[e.keyCode] = (e.type == "keydown");
            })
            window.addEventListener('keyup', function (e) {
                myGameArea.keys[e.keyCode] = (e.type == "keydown");            
            })
        }, 
        clear : function(){
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
    }
    
    
    function component(width, height, color, x, y, type) {
        this.type = type;
        this.width = width;
        this.height = height;
        this.x = x;
        this.y = y;    
        this.speedX = 0;
        this.speedY = 0;    
        this.gravity = 0.1;
        this.gravitySpeed = 0;
        this.bounce = 0.5;
        this.update = function() {
            ctx = myGameArea.context;
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
        this.newPos = function() {
            this.gravitySpeed += this.gravity;
            this.x += this.speedX;
            this.y += this.speedY + this.gravitySpeed;
            this.hitBottom();
        }
        this.hitBottom = function() {
            var rockbottom = myGameArea.canvas.height - this.height;
            if (this.y > rockbottom) {
                this.y = rockbottom;
                this.gravitySpeed = -(this.gravitySpeed * this.bounce);
            }
        }
    }
    
    
    function updateGameArea() {
        myGameArea.clear();
    	myGamePiece.speedX = 0;
        myGamePiece.speedY = 0;    
        if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -2; }
        if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 2; }
        if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -3; }
        if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 4; }
        myGamePiece.newPos();
        myGamePiece.update();
    }
    
    
    </script>
    </body>
    </html>

Надеюсь, это даст вам хорошее представление о том, с чем я работаю, и надеюсь, что кто-нибудь сможет дать какой-нибудь совет.

1 Ответ

0 голосов
/ 10 ноября 2019

Точно так же, как вы предотвращаете выход окна из нижней части экрана, вы можете соответственно изменить значения x и speedX, чтобы предотвратить смещение экрана слева и справа.

Проверьте левую и правую границы 

// hit left
if (this.x < 0) {
  this.x = 0;
  this.speedX = 0;
}

// hit right
var right = myGameArea.canvas.width - this.width;
  if (this.x > right) {
    this.x = right;
    this.speedX = 0;
}

Если x меньше 0, мы сбрасываем его на 0 и сбрасываем speedX на 0. Та же логика для правой стороны. Если x больше ширины холста минус ширина символов, установите x на это и установите speedX на 0.

Вот рабочий фрагмент: 

var myGamePiece;


function startGame() {
  myGamePiece = new component(30, 30, "purple", 80, 75);
  myGameArea.start();
}


var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 300;
    this.canvas.height = 200;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function(e) {
      myGameArea.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
    window.addEventListener('keyup', function(e) {
      myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}


function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.speedX = 0;
  this.speedY = 0;
  this.gravity = 0.1;
  this.gravitySpeed = 0;
  this.bounce = 0.5;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;
    this.hitBottom();
    
    // hit left
    if (this.x < 0) {
      this.x = 0;
      this.speedX = 0;
    }
    
     // hit right
    var right = myGameArea.canvas.width - this.width;
    if (this.x > right) {
      this.x = right;
      this.speedX = 0;
    }
  }
  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;
    if (this.y > rockbottom) {
      this.y = rockbottom;
      this.gravitySpeed = -(this.gravitySpeed * this.bounce);
    }
  }
}


function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  if (myGameArea.keys && myGameArea.keys[37]) {
    myGamePiece.speedX = -2;
  }
  if (myGameArea.keys && myGameArea.keys[39]) {
    myGamePiece.speedX = 2;
  }
  if (myGameArea.keys && myGameArea.keys[38]) {
    myGamePiece.speedY = -3;
  }
  if (myGameArea.keys && myGameArea.keys[40]) {
    myGamePiece.speedY = 4;
  }
  myGamePiece.newPos();
  myGamePiece.update();
}
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    canvas {
      border: 10px solid skyblue;
      background-color: powderblue;
    }
  </style>
</head>

<body onload="startGame()">
</body>

</html>

Для верхней стены вы хотите проверить, меньше ли y 0, а затем изменить y и speedYсоответственно.

...