Как заставить двухмерного персонажа бегать и прыгать в JavaScript - PullRequest
Новая
       0

Как заставить двухмерного персонажа бегать и прыгать в JavaScript

0 голосов
/ 04 февраля 2019

Я пытаюсь создать квадрат, используя canvas и заставляя его прыгать и бегать, и я следовал за всем, что касается PothOnProgramming на youtube.Я написал код в 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>

Я довольно новичок в этом, так что это может быть простая опечатка, но я хотел бы узнать, что я могу сделать по-другому, чтобы заставить его работать.

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Чтобы присвоить значения свойствам объекта, вы должны использовать : вместо =.

Так что для player объекта это должно быть: 

   player={
        height:32,
        jumping:true,
        width:32,
        x:144,
        x_velocity:0,
        y:0,
        y_velocity:0
    };
0 голосов
/ 04 февраля 2019

У вас много проблем с этим кодом.Сначала нужно исправить объявления объекта.Объекты не используют = для присвоения значений.У вас также есть несколько опечаток с именами переменных, которые я исправил.Вот рабочая версия: 

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)
<canvas></canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...