CODEWITHSUNDEEP
javascript
MilkyBoii
MilkyBoii

Reputation: 47

Can't Make a Player Two

I am trying to add a second player to javascript game but the code isn't working. I need some instruction on how to follow through with this. The second player doesn't need to be fancy, a different color square would suffice. My current player is the green square. Any information would be helpful thank you.

var myObstacle;
(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();
function startGame() {}
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 700,
    height =600,
    player = {
      x : 1,
      y : 7,
      width : 25,
      height : 25,
      speed: 10,
      velX: 0,
      velY: 0,
      jumping: false
    },
    keys = [],
    friction = .9,
    gravity = .8;
 
canvas.width = width;
canvas.height = height;

function update(){
  // check keys
    if (keys[38] || keys[32]) {
        // up arrow or space
      if(!player.jumping){
       player.jumping = true;
       player.velY = -player.speed*.1;
      }
    }
    if (keys[39]) {
        // right arrow
        if (player.velX < player.speed) {             
            player.velX++;         
         }     
    }     
    if (keys[37]) {         
        // left arrow         
        if (player.velX > -player.speed) {
            player.velX--;
        }
    }
 
    player.velX *= friction;
 
    player.velY += gravity;
 
    player.x += player.velX;
    player.y += player.velY;
 
    if (player.x >= width-player.width) {
        player.x = width-player.width;
    } else if (player.x <= 0) {         
        player.x = 0;     
    }    
  
    if(player.y >= height-player.height){
        player.y = height - player.height;
        player.jumping = false;
    }
 
  ctx.clearRect(0,0,width,height);
  ctx.fillStyle = "green";
  ctx.fillRect(player.x, player.y, player.width, player.height);
 
  requestAnimationFrame(update);
}
 
document.body.addEventListener("keydown", function(e) {
    keys[e.keyCode] = true;
});
 
document.body.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
});
 
window.addEventListener("load",function(){
    update();
});
<html>
<head>
    <title>Square Stairs™</title>
</head>
<body bgcolor="#000">
 <canvas id="canvas" style="border:3px solid #fff"></canvas>
</body>
</html>

Please help if you can, Thank You.

Upvotes: 0

Views: 72

Answers (2)

bill.lee
bill.lee

Reputation: 2375

Okay, I couldn't resist... I added even more OOP. So, now you can add as many players as you'd like. The important distinction is the color and the key mappings. My example (arbitrarily) adds three players:

var players=[];
players.push(new Player('green', {
   32: 'jump',
   37: 'left',
   38: 'jump',
   39: 'right'
}))
players.push(new Player('red', {
   56: 'jump',
   52: 'left',
   54: 'right'
}, width-25))
players.push(new Player('blue', {
   87: 'jump',
   65: 'left',
   68: 'right'
}, (width-25)/2))


var myObstacle;
(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();
function startGame() {}

function Player(color,keymap,x) {
   this.x = (typeof x === 'undefined') ? 1 : x;
   this.y = 7;
   this.width  = 25;
   this.height = 25;
   this.speed  = 10;
   this.velX   = 0;
   this.velY   = 0;
   this.jumping= false;

   this.keymap = {}
   for (let key in keymap) {
      switch (keymap[key]) {
         case 'jump':
            this.keymap[key] = this.jump
            break;
         case 'left':
            this.keymap[key] = this.moveLeft
            break;
         case 'right':
            this.keymap[key] = this.moveRight
            break;
      }
   }
   this.color  = color;
} // Player()

Player.prototype.jump=function () {
   if (!this.jumping) {
    this.jumping = true;
    this.velY = -this.speed*1.5;
   }
}
Player.prototype.moveRight = function () {
   if (this.velX < this.speed) {
       this.velX++;
    }
}
Player.prototype.moveLeft = function () {
   if (this.velX > -this.speed) {
       this.velX--;
   }
}
// Globals
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 700,
    height =600,
    keys = [],
    friction = .9,
    gravity = .8;

canvas.width = width;
canvas.height = height;

// Set up players
var players=[];
players.push(new Player('green', {
   32: 'jump',
   37: 'left',
   38: 'jump',
   39: 'right'
}))
players.push(new Player('red', {
   56: 'jump',
   52: 'left',
   54: 'right'
}, width-25))
players.push(new Player('blue', {
   87: 'jump',
   65: 'left',
   68: 'right'
}, (width-25)/2))

function update() {
   ctx.clearRect(0,0,width,height);
   players.forEach(player => {
      // check player-specific keys
      for (let i in player.keymap)
      {
         if (keys[i] && typeof player.keymap[i] === 'function')
            player.keymap[i].bind(player)();
      }

      player.velX *= friction;

      player.velY += gravity;

      player.x += player.velX;
      player.y += player.velY;

      if (player.x >= width-player.width) {
         player.x = width-player.width;
      } else if (player.x <= 0) {
         player.x = 0;
      }

      if (player.y >= height-player.height) {
         player.y = height - player.height;
         player.jumping = false;
      }

      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);
   }) // player.forEach
   requestAnimationFrame(update);
}

document.body.addEventListener("keydown", function(e) {
//  console.log(e.keyCode);
   keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function(e) {
   keys[e.keyCode] = false;
});

window.addEventListener("load",function(){
    update();
});
html>
<head>
    <title>Square Stairs™</title>
</head>
<body bgcolor="#000">
 <canvas id="canvas" style="border:3px solid #fff"></canvas>
</body>
</html>

Upvotes: 1

Michał Sałaciński
Michał Sałaciński

Reputation: 2266

Use a little bit of OOP:

var myObstacle;
(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

function Player(color){
  this.x =  1;
  this.y = 7
  this.width = 25
  this.height= 25
  this.speed= 10
  this.velX= 0
  this.velY= 0
  this.jumping= false
  this.color = color;
}

function startGame() {}
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 700,
    height =600,
    player = new Player('green'),
    player2 = new Player('red')
    keys = [],
    friction = .9,
    gravity = .8;
 
canvas.width = width;
canvas.height = height;

function update(){
  // check keys
    if (keys[38] || keys[32]) {
        // up arrow or space
      if(!player.jumping){
       player.jumping = true;
       player.velY = -player.speed*.1;
      }
    }
    if (keys[39]) {
        // right arrow
        if (player.velX < player.speed) {             
            player.velX++;         
         }     
    }     
    if (keys[37]) {         
        // left arrow         
        if (player.velX > -player.speed) {
            player.velX--;
        }
    }
 
    player.velX *= friction;
 
    player.velY += gravity;
 
    player.x += player.velX;
    player.y += player.velY;
 
    if (player.x >= width-player.width) {
        player.x = width-player.width;
    } else if (player.x <= 0) {         
        player.x = 0;     
    }    
  
    if(player.y >= height-player.height){
        player.y = height - player.height;
        player.jumping = false;
    }
    
    
    player2.velY += gravity;
 
    player2.x += player2.velX;
    player2.y += player2.velY;
 
    if (player2.x >= width-player2.width) {
        player2.x = width-player2.width;
    } else if (player2.x <= 0) {         
        player2.x = 0;     
    }    
  
    if(player2.y >= height-player2.height){
        player2.y = height - player2.height;
        player2.jumping = false;
    }
 
  ctx.clearRect(0,0,width,height);
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);
  ctx.fillStyle = player2.color;
  ctx.fillRect(player2.x, player2.y, player2.width, player2.height);
  requestAnimationFrame(update);
}
 
document.body.addEventListener("keydown", function(e) {
    keys[e.keyCode] = true;
});
 
document.body.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
});
 
window.addEventListener("load",function(){
    update();
});
<html>
<head>
    <title>Square Stairs™</title>
</head>
<body bgcolor="#000">
 <canvas id="canvas" style="border:3px solid #fff"></canvas>
</body>
</html>

Upvotes: 1

Related Questions