不能讓一個球員兩個

我想添加第二個球員到JavaScript遊戲，但代碼不工作。我需要一些關於如何遵循這一點的指導。第二個球員不需要花哨，一個不同的顏色正方形就足夠了。我現在的球員是綠色廣場。任何信息將有助於謝謝你。不能讓一個球員兩個

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>

請幫助，如果你可以，謝謝。

來源

2017-05-23 MilkyBoii

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

來源

2017-05-23 19:28:49

呦呦耶真正的MVP！ – MilkyBoii

好吧，我無法抗拒......我加入了更多OOP。所以，現在你可以添加儘可能多的球員，只要你願意。重要的區別是顏色和關鍵映射。我的例子（任意）增加了三名球員：

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>

來源

2017-05-23 20:59:26 wrlee

不能讓一個球員兩個

回答

相關問題