Question

我正在做类似马里奥兄弟的平台游戏我已经有左右移动，但现在我需要使用javascript，css和html模拟跳转我有这个代码right now

<div id="container">
<div id="roll"></div>
<div id="tube1" class="tube"></div>
<div id="tube2" class="tube"></div>
<div id="tube3" class="tube"></div>
<script>      
  var reqID, dir;    
  var left = 0;
  var top = 0;
  var player, tube, pw, ph, px, py, tw, th, tx, ty;     

  function detectCollisions() {
    //Access the current location and dimension of both objects
    for(let i = 0; i < tube.length; i++)
    {
      pw = player.offsetWidth;
      ph = player.offsetHeight;
      px = player.offsetLeft;
      py = player.offsetTop;
      tw = tube[i].offsetWidth;
      th = tube[i].offsetHeight;
      tx = tube[i].offsetLeft;
      ty = tube[i].offsetTop;
      console.log(tw);      
      //check to see if tube has intersected width player in any direction

      if((px+pw) > tx && px < (tx+tw) && (py+ph) > ty && py < (ty+th)) {
        //Do anything you want in the program when collision is detected
        console.log("collision detected with" + tube[i].id);
        this.player.style.left = (player.offsetLeft -= 3) + 'px';
        /*document.body.removeChild(tube[i]);*/

      }        
    }
    window.requestAnimationFrame(detectCollisions);
  }   

  function stopAnimation() {
    console.log('stop');
    /*window.cancelAnimationFrame(reqID);*/
    player.style.animation = "face-forward 0.9s steps(4) infinite";
  }

  function move(e) {
    console.log(e.keyCode)
    //up
    if(e.keyCode == 38) {              
      player.style.top = (player.offsetTop -= 3) + 'px';
    } else if(e.keyCode == 39) { //right arrow                
      player.style.left = (player.offsetLeft += 3) + 'px';
      player.style.animation = "walk-right 0.9s steps(4) infinite";
    } else if(e.keyCode == 40) { //down arrow                
      player.style.top = (player.offsetTop += 3) + 'px';
    } else if(e.keyCode == 37) { //left arrow                
      player.style.left = (player.offsetLeft -= 3) + 'px';
      player.style.animation = "walk-left 0.9s steps(4) infinite";
    }

    /*reqID = window.requestAnimationFrame(startAnimation);*/
  }

  function createScenario() {
    var positionLeft = 0;
    for(let i = 0; i < 40; i++) {
        let iDiv = document.createElement('div');
        iDiv.id = 'floor' + i;
        iDiv.className = 'floor';
        iDiv.style.left = positionLeft + 'px';
      iDiv.style.top = 170 + 'px';
        document.getElementById('container').appendChild(iDiv);
        positionLeft += 35;     
    }

    /*let iDiv = document.createElement('div');
    iDiv.id = "roll";
    iDiv.style.zIndex = "5";
    document.getElementByTagName('body').appendChild(iDiv);*/
  }

  /*Setting everything at the beggining*/
  var spriteSheet = new Image();
  spriteSheet.src = './resources/king_left_right.png';
  function docReady() {    
    /*player = document.createElement("div");
    player.id = "roll";
    player.style.backgroundPosition = "background-position: 200px -5px;"
    player.style.background = "url("+spriteSheet.src+")";
    document.body.appendChild(player);*/
    player = document.getElementById('roll');
    player.style.backgroundPosition = "background-position: 200px -5px;"
    player.style.background = "url("+spriteSheet.src+")";
    tube = document.getElementsByClassName("tube");
    detectCollisions();
        createScenario();
  }

  document.onkeydown = move;
  document.onkeyup = stopAnimation;
  window.addEventListener("load", function(event) {
    docReady();
  });
</script>

请你给我一个approch，当然我的角色必须跳过并返回到地面或代码中的管子上。

任何帮助将不胜感激......

Answer 1

我不久前制作了这个网站Mindhive。如果您单击六边形，它们会全部掉落，但根据您点击它们的方式，它们会有所不同。你也可以用鼠标将它们扔掉。

我使用Box2D这是一个javascript物理引擎，应该为您提供所需的所有工具，以获得具有真实重力和移动的Javascript，html等内置功能。

希望有所帮助

Answer 2

试试这个..

https://www.w3schools.com/graphics/game_bouncing.asp

可以给你基本的想法。

如何使用html，css和javascript模拟重力或跳转div？

2 个答案: