简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Mengesan perlanggaran antara dua isian. Fungsi rect
P粉145543872
P粉145543872 2023-09-15 13:26:06
0
1
802

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粉145543872
P粉145543872

membalas semua(1)
P粉752812853
P粉7528128532023-09-16 10:18:25 Tingkat 1

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 
}
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！