Question

我正在尝试使用画布制作一个正方形并使其跳跃并运行，我遵循了YouTube上PothOnProgramming的宗旨。我已经在html文档中编写了代码，由于某种原因，当我对其进行测试时，浏览器中没有任何显示。

<body>

    <script>
        
        var context, controller, player, loop;

        context=document.querySelector("canvas").getContext("2d");

        context.canvas.height=180;
        context.canvas.width=320;

        player={
            height=32,
            jumping=true,
            width=32,
            x=144,
            x_velocity=0,
            y=0,
            y_velocity:0
        };

        controller={
            left=false,
            right=false,
            up=false,
            keyListener:function(event){
                var kay_state=(event.type=="keydown")?true:false;

                switch(event.keyCode){
                    
                    case 87:
                        controller.up=key_state;
                    break;
                    case 68:
                        controller.right=key_state;
                    break;
                    case 65:
                        controller.left=key_state;
                    break;
                }

            }
        };
        loop=function(){
            
            if(controller.up && player.jumping==false){
                player.y_velocity-=20;
                player.jumping=true;
            }
            if(controller.left){
                player.x_velocity-=0.5; //For at "player" akselererer smooth
            }
            if(controller.right){
                player.x_velocity+=0.5; //For at "player" akselererer smooth
            }

            player.y_velocity+=1.5; //Gravity
            player.x+=player.x_velocity;
            player.y+=player-y_velocity;
            player.x_velocity*=0.9; //Friksjon  (må leggest til eller så synker ikke farten)
            player.y_velocity*=0.9; //Friksjon

            //dersom player faller til y verdien så koliderer den (bunn linjen)
            if(player.y>180-16-32){
                player.jumping=false;
                player.y=180-16-32;
                player.y_velocity=0;
            }
            
            context.fillStyle = "#202020";
            context.fillRect(0, 0, 320, 180);
            context.fillStyle="#ff0000";
            context.beginPath();
            context.rect(player.x, player.y, player.width, player.height);
            context.fill();
            context.strokeStyle="#ff0000";
            context.lineWidth=4;
            context.beginPath();
            context.moveTo(0, 164);
            context.lineTo(320, 164);
            context.stroke();

            window.requestAnimationFrame(loop);
        };
        window.addEventListener("keydown", controller.keyListener);
        window.addEventListener("keyup", controller.keyListener);
        window.requestAnimationFrame(loop);

    </script>

</body>

我对此很陌生，所以它可能是一个简单的错字，但是我很想找出我可以做些什么来使它起作用。

Answer 1

此代码存在很多问题。首先，您需要修复对象声明。对象不使用mat-expansion-panel-header:hover { background-color: currentColor }来分配值。您也有一些拼写错误，其中包含我已修复的变量名。这是一个工作版本：

var context, controller, player, loop

context = document.querySelector('canvas').getContext('2d')

context.canvas.height = 180
context.canvas.width = 320

player = {
  height: 32,
  jumping: true,
  width: 32,
  x: 144,
  x_velocity: 0,
  y: 0,
  y_velocity: 0,
}

controller = {
  left: false,
  right: false,
  up: false,
  keyListener: function(event) {
    var key_state = event.type == 'keydown' ? true : false

    switch (event.keyCode) {
      case 87:
        controller.up = key_state
        break
      case 68:
        controller.right = key_state
        break
      case 65:
        controller.left = key_state
        break
    }
  },
}
loop = function() {
  if (controller.up && player.jumping == false) {
    player.y_velocity -= 20
    player.jumping = true
  }
  if (controller.left) {
    player.x_velocity -= 0.5 //For at "player" akselererer smooth
  }
  if (controller.right) {
    player.x_velocity += 0.5 //For at "player" akselererer smooth
  }

  player.y_velocity += 1.5 //Gravity
  player.x += player.x_velocity
  player.y += player.y_velocity
  player.x_velocity *= 0.9 //Friksjon  (må leggest til eller så synker ikke farten)
  player.y_velocity *= 0.9 //Friksjon

  //dersom player faller til y verdien så koliderer den (bunn linjen)
  if (player.y > 180 - 16 - 32) {
    player.jumping = false
    player.y = 180 - 16 - 32
    player.y_velocity = 0
  }

  context.fillStyle = '#202020'
  context.fillRect(0, 0, 320, 180)
  context.fillStyle = '#ff0000'
  context.beginPath()
  context.rect(player.x, player.y, player.width, player.height)
  context.fill()
  context.strokeStyle = '#ff0000'
  context.lineWidth = 4
  context.beginPath()
  context.moveTo(0, 164)
  context.lineTo(320, 164)
  context.stroke()

  window.requestAnimationFrame(loop)
}
window.addEventListener('keydown', controller.keyListener)
window.addEventListener('keyup', controller.keyListener)
window.requestAnimationFrame(loop)

Answer 2

要将值分配给对象的属性，应使用:而不是=。

因此对于player对象，它应该是：

   player={
        height:32,
        jumping:true,
        width:32,
        x:144,
        x_velocity:0,
        y:0,
        y_velocity:0
    };

如何在JavaScript中运行2D角色并跳转

2 个答案: