Question

我有这个代码，当点击 WASD 键时，我的主块已经移动，但现在我希望我的块在接触黑色方框时进行简单的命中检测，我将如何处理代码 --> https://codepen.io/jsmirga22/pen/QWGZmzG 任何关于如何让我的块移动到方框中的答案检测另一个盒子运行到它会很有帮助

  `// left 37 right 39 down 40 up 38

// left 37 right 39 down 40 up 38
// D 68 S 83 A 65 W 87
// pi var is actually guyleft
var obstacle1 = document.getElementById('obstacle1');
var guy = document.getElementById('guy')
var con = document.getElementById('con')

var pi = 0
var guytop = 0
var joe = window.getComputedStyle(guy)
function test(){
  var joe = window.getComputedStyle(guy)
 guy.textContent = joe.getPropertyValue('right')
  console.log(guy.textContent)
  var canvas = document.getElementById('canvas')
  var ctx = canvas.getContext('2d');
console.log(ctx);
}
function sa(e) {
 
 
   if(e.keyCode === 68){
      pi += 12
     guy.style.left = pi + 'px'
       if(pi >= 3165) {
      pi -= 12
     }
     if(pi >= 540) {
       window.scrollBy(12, 0)
     }
     
   }
   if(e.keyCode === 65){
      pi -= 12
     guy.style.left = pi + 'px'
     if(pi >= -540){
              window.scrollBy(-12, 0)
     }
     
   }
  if(e.keyCode === 83){
      guytop += 12
     guy.style.top = guytop + 'px'
    if(guytop >= 770){
      guytop -= 12
  
    }
     
   }
   if(e.keyCode === 87){
      guytop -= 12
     guy.style.top = guytop + 'px'
     
   }
}

document.onkeydown = sa

#con{
height: 1000px;
width: 2500px;
outline: 1px solid black;
position: relative;
}

#guy{
  position: absolute;
  height: 50px;
  width: 50px;
  background-color: red;
 
}

#obstacle1{
  position: absolute;
  height: 50px;
  width: 50px;
  background-color: black;
  top: 120px;
  bottom: 120px;
  left: 120px;
  right: 120px;
  
}
.b{
  position: absolute;
  right: 20px;
}

<!DOCTYPE html>
<head>
  <canvas id="canvas" class="b" style="background: #000"></canvas>
  <body>
    <div id="con">
      <img src="https://lh3.googleusercontent.com/cjiUr93zFLG2ijslHBOh5wBa9FNhHYIsTSSVu_lsv2pVkv6tX8TYMmTQBshaMVmuHipfsXVyIY2WrQ8vKTauD9xb6Bc-gGISECUkRlnxLnhnGoEBNN9VzW7WA_kyR6W7Psknqf9pYDDRPl8nRmtck02Ljy9E3zhhXHdfPBF_3KjhxrD4X6jm57L6vd98dIAs0nDe80Pue06FJAuqSY1T6r-j1T1nFnuo2753XYJEYZc_tjnnvnNsQEBSGQRmKAYtSPiAWXFyCc62Q6fKRdzHR5esGhxo01fGggtbGU8v_AKr24l-CE5bR-2RRI1R_w_SKQSBiQs4Td6Fk7vFfPQK0wX3NvVVqlHxQ6ZMBFs9acEHNd_i8q99CFKJqDXux01xBnUFi4lMpyyewufxHZJTevcJLNTu26M-RmTTOf_91By1gbppW_AnR-OGH6GUxVXGi0YdEAJoO-O8QOTWsymX_IClQUXX8XJUyHk8udEzzCunXRfKkF6GTv9-xeFLZJ-PKbSYCtHPh1oErnkaF1QA6tIweSyHOfbRZF4TlvC37rZ85ZWPXIjTA73LQFlHJC7NetpAoDFjT7zMHu3mjmSjaEK-_xFT3NNh9QnAP-aGW7762Y1X8PKCHbP0JqiB0H2ej3P6ZesN0tyrGtlm1aoKOfo5-NJmPv735cwA02avk6NAb1vvJFyLkcKv1JjAZ56H5u2Z3r6ygWdj3XublxdI7YlH=w64-h83-no?authuser=0" <div id="guy">></div>
      <div id="obstacle1" onclick="test()"></div>
      <div id="obstacle2"></div>
    </div>
  </body>
</head>

Javascript,Html,CSS 如何让障碍物撞墙而不穿过墙/障碍物

0 个答案: