Reputation: 61

How to make a 2d character run and jump in JavaScript

I'm trying to make a square using canvas and making it jump and run, and I have followed the toturial of PothOnProgramming on youtube. I have written the code in a html document and for some reason nothing shows up on the browser when i test it.

<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>

I'm quite new to this so it may be a simple typo, but I would love to find out what I can do differently to make it work.

Upvotes: 1

Answers (3)

Ikuria

Reputation: 1

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>

Upvotes: 0

James Coyle

Reputation: 10398

You have numerous issues with this code. First you need to fix the object declarations. Objects don't use = for assigning values. You also have several typos with your variable names that I have fixed. Here is a working version:

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>

Upvotes: 2

Moe007

Reputation: 68

To assign values to properties of an object you should use : instead of =.

So for player object it should be:

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

Upvotes: 1

How to make a 2d character run and jump in JavaScript

Answers (3)

Related Questions