JS + Canvas 碰撞检测

标签：Canvas hero collision wall direction height 碰撞检测 var JS


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="chart">
    <canvas id="canvas" width="540px" height="300px"></canvas>
  </div>
</body>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  var direction = ' ';
  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawHero();
    drawWall();
    drawTxt(direction);
  }

  var then = Date.now();
  var hero = {
    speed: 90,
    x: 0,
    y: 0,
    width: 30,
    height: 30,
  }

  var wall = {
    x: 100,
    y: 100,
    width: 100,
    height: 50,
  }

  var collision = {
    top: false,
    left: false,
    bottom: false,
    right: false,
  };

  function drawHero() {
    ctx.fillStyle = 'skyblue';
    ctx.fillRect(hero.x, hero.y, hero.width, hero.height)
  }

  function drawWall() {
    ctx.fillStyle = '#000'
    ctx.fillRect(wall.x, wall.y, wall.width, wall.height)
  }

  function drawTxt(direction){
    var text = '不能再往' + direction + '边走了';
    ctx.font = "20px serif";
    ctx.fillText(text, 380, 250);
  }

  render();

  var keyDown = {};
  addEventListener('keydown', function (e) {
    keyDown[e.keyCode] = true;
  }, false)

  addEventListener('keyup', function (e) {
    delete keyDown[e.keyCode]
  }, false)

  function move(time) {

    if (87 in keyDown) {  //W
      if (collision.top == true) {
        hero.y -= 0
      } else {
        hero.y -= hero.speed * time
      }
    }
    if (65 in keyDown) {  //A
      if (collision.left == true) {
        hero.x -= 0
      } else {
        hero.x -= hero.speed * time
      }
    }
    if (83 in keyDown) {  //S
      if (collision.bottom == true) {
        hero.y += 0
      } else {
        hero.y += hero.speed * time
      }
    }
    if (68 in keyDown) {  //D
      if (collision.right == true) {
        hero.y += 0
      } else {
        hero.x += hero.speed * time;
      }
    }
    // 右
    if (hero.x <= wall.x) {
      if (hero.x + hero.width + 2 >= wall.x && hero.y + hero.height > wall.y && hero.y < wall.y + wall.height) {
        collision.right = true;
        direction = '右';
      } else {
        collision.right = false;
        direction = ' ';
      }
    }
    if (hero.x >= wall.x + wall.width) {
      if (hero.x - 2 <= wall.x + wall.width && hero.y + hero.height > wall.y && hero.y < wall.y + wall.height) {
        collision.left = true;
        direction = '左';
      } else {
        collision.left = false;
        direction = ' ';
      }
    }
    if(hero.y + hero.height < wall.y){
      if(hero.x - 2 <= wall.x + wall.width && hero.x + hero.width + 2 >= wall.x && hero.y + hero.height + 2 >= wall.y){
        collision.bottom = true;
        direction = '下';
      }else{
        collision.bottom = false;
        direction = ' ';
      }
    }
    if(hero.y > wall.y + wall.height){
      if(hero.x - 2 <= wall.x + wall.width && hero.x + hero.width + 2 >= wall.x && hero.y  <= wall.y + wall.height + 2){
        collision.top = true;
        direction = '上';
      }else{
        collision.top = false;
        direction = ' ';
      }
    }

    // if (
    //   hero.x < wall.x + wall.width &&
    //   hero.x + hero.width > wall.x &&
    //   hero.y < wall.y + wall.height &&
    //   hero.height + hero.y > wall.y
    // ) {
    //   console.log('触碰到了')
    // }
  }
  function moveTime() {
    var now = Date.now();
    var deleta = now - then;
    let time = deleta / 1000;
    move(time);
    render();
    then = now;
    requestAnimationFrame(moveTime);
  }
  moveTime();

</script>

</html>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  #chart {
    display: block;
    margin: 200px auto;
    width: 540px;
  }

  #canvas {
    border: 1px solid #000;
  }
</style>
标签：Canvas,hero,collision,wall,direction,height,碰撞检测,var,JS
From： https://www.cnblogs.com/zgjg/p/16759700.html
相关文章

赞助商

阅读排行
