cari

Rumah  >  Soal Jawab  >  teks badan

Mengesan perlanggaran antara dua isian. Fungsi rect

Saya mempunyai permainan di mana seorang pemain dikawal oleh kekunci anak panah dan pemain lain dikawal oleh kekunci WSAD. Saya mempunyai peta yang disediakan dalam kanvas 600x600 dan ingin menambah perlanggaran antara dua pemain dalam pengisian permainan. Betulkan apabila dua pemain berada dalam radius tertentu, sama ada menamatkan program atau memaparkan teks seperti "Game The end"

Berikut ialah kod js, Html dan Css saya (untuk melihat coretan kod anda perlu pergi ke "Skrin Penuh"): 

//Canvas
mycan.style.display = "block";
mycan.height = 600;
mycan.width = 600;
//make players
let player = {x:511, y: 541, w:29, h:29};
let player2 = {x:60, y:31, w:30, h:29};


//Context
const ctx = mycan.getContext("2d");


//Start-position
ctx.fillRect(player.x, player.y, player.w, player.h);
ctx.fillRect(player2.x, player2.y, player2.w, player2.h);
//No-smooth-movement
window.onkeydown = move = (e) => {
    let key = e.keyCode;
  //player1(red)
    if     (key === 68 && player2.x <= mycan.width-30) {player2.x += 30;} //right
    else if(key === 65 && player2.x >= 10) {player2.x -= 30;} //left
    else if(key === 83 && player2.y <= mycan.height-30) {player2.y += 30;} //down
    else if(key === 87 && player2.y >= 10) {player2.y -= 30;} //up  
  
  
  //player2(blue)
    if     (key === 39 && player.x <= mycan.width-25) {player.x += 30;} //right
    else if(key === 37 && player.x >= 10) {player.x -= 30;} //left
    else if(key === 40 && player.y <= mycan.height-25) {player.y += 30;} //down
    else if(key === 38 && player.y >= 10) {player.y -= 30;} //up
}

const draw = ()=>{
//player draw, and player colors
  ctx.clearRect(0,0, mycan.width, mycan.height);
  ctx.fillRect(player.x, player.y, player.w, player.h);
  ctx.fillStyle = "blue";
  ctx.fillRect(player2.x,player2.y, player2.w, player2.h);
  ctx.fillStyle = 'red';
  
  
  
};

setInterval(()=>{
  draw();
},1000/60);

//collision
//thsi is where i want to add collision
html, body {
  margin:20;
  padding: 20;
}
canvas {
  display: block;
}

#mycan {
  background-size: 30px 30px;
  background-image:
    linear-gradient(to right, black 1px, transparent 1px),
    linear-gradient(to bottom, black 1px, green 1px);

}
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
<canvas id = mycan > </canvas>
    
    <font color = 'blue'> <h1>Player1 = blue</h1></font color>
    <font color = 'red'> <h1>Player2 = red</h1></font color>

  </head>
  <body>
    <main>
    </main>
    <script src="script.js"></script>

  </body>
</html>

P粉145543872P粉145543872435 hari yang lalu826

membalas semua(1)saya akan balas

  • P粉752812853

    P粉7528128532023-09-16 10:18:25

    Saya telah menulis anda fungsi yang menyemak perlanggaran.

    Kami melakukannya dengan terlebih dahulu menyemak sama ada tepi kiri rect1 lebih jauh ke kanan daripada tepi kanan rect2. Kami juga menyemak sama ada tepi kanan rect1 lebih jauh ke kiri daripada tepi kiri rect2.

    Perkara yang sama untuk tepi bawah.

    jika semua itu palsu, segi empat tepat mesti bertindih.

    const checkCollision = (rect1, rect2) => {
  return rect1.x < rect2.x + rect2.w &&rect1.x + rect1.w > rect2.x &&rect1.y < rect2.y + rect2.h &&rect1.y + rect1.h > rect2.y 
}

    balas
    0
  • Batalbalas