[英]Check collision, and the do something in js
我有一個 2d、自上而下的游戲，其中有 2 個玩家； 一個由方向鍵控制，另一個由 WASD 鍵控制。 我想讓它到達兩個玩家重疊的地方，我可以到達它停止程序的地方，或者我可以在控制台中打印一些東西，類似的東西，真的。（查看代碼片段，你有單擊“查看整頁”，查看整個程序。）
這是我在HTML、CSS和JS中整個游戲的代碼：
//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);
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> <font color = 'red'> <h1>Player2 = red</h1></font> </head> <body> <main> </main> <script src="script.js"></script> </body> </html>
在這里，我希望這會有所幫助，基本上，每次玩家移動時我都會調用一個處理程序方法。 檢查 2 個玩家的坐標是否匹配，如果匹配。 更新信息文本說明。 我還清理了關鍵處理代碼。
碰撞檢測目前是相當基本的，如果您需要更高級的檢測（例如檢測碎片是否只是部分碰撞等），請打開另一個問題。
//Canvas mycan.style.display = "block"; mycan.height = 600; mycan.width = 600; //make players let player = {x:510, y: 541, w:30, h:30}; let player2 = {x:60, y:31, w:30, h:30}; //Context const ctx = mycan.getContext("2d"); const moveHandler = (isPlayer1) => { if (player.x == player2.x && player.y == player2.y) { document.getElementById('info').textContent = isPlayer1? 'Player1 killed player2': 'Player2 killed player1' } } //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.key; //player1(red) switch (key) { case 'w': player2.y -= 30; moveHandler(false); break; case 'a': player2.x -= 30; moveHandler(false); break; case 's': player2.y += 30; moveHandler(false); break; case 'd': player2.x += 30; moveHandler(false); break; case 'ArrowRight': player.x += 30; moveHandler(true); break; case 'ArrowLeft': player.x -= 30; moveHandler(true); break; case 'ArrowDown': player.y += 30; moveHandler(true); break; case 'ArrowUp': player.y -= 30; moveHandler(true); break; } } 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);
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> <p id="info"></p> <font color = 'blue'> <h1>Player1 = blue</h1></font> <font color = 'red'> <h1>Player2 = red</h1></font> </head> <body> <main> </main> <script src="script.js"></script> </body> </html>
在 JS 中檢查一個按鈕是否被點擊，然后在 PHP 中做一些事情
[英]Check a button has been clicked in JS and then do something in PHP
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.