I'm writing a game using canvas in html, CSS and vanilla Javascript. I have made two characters and added in their controls for movement. The only problem is that when I execute it I have to wait for player 1 to press whatever key for his character to move, and then player 2 is allowed to input how his character moves.
Player 1 uses the wad keys to move and player 2 the arrow keys. I can't figure out how to have them press the buttons at the same time and move at the same time. When I try this the character that's input key was pressed first, will not move while the second character will move. Also if a player wants to jump and move to the right, at the same time, it isn't possible. At the moment the program works by redrawing the characters(squares) in a different space depending on which key is pressed.
var canvas;
var context;
var framesPerScond=30;
//player1
var player1X=110;
var player1Y=650;
var gravity1=1;
//player2
var player2X=810;
var player2Y=650;
var gravity2=1;
window.onload = function(){
canvas=document.getElementById("canvas");
context=canvas.getContext("2d");
console.log("Onload Working");
setInterval(function(){
drawEverything();
}, 1000/framesPerScond);
document.addEventListener('keydown', function(event){
MoveEverything(event);
});
}
function drawEverything(){
//move player 1
if(player1Y<450){
player1Y=450;
}
else if(player1Y<650){
player1Y+=gravity1;
gravity1+=1;
}
else if(player1Y=650){
player1Y=650;
gravity1=1;
}
//move Player2
if(player2Y<450){
player2Y=450;
}
else if(player2Y<650){
player2Y+=gravity2;
gravity2+=1;
}
else if(player2Y=650){
player2Y=650;
gravity2=1;
}
colorRect(0,0,canvas.width,canvas.height, 'white');
colorRect(0,690, canvas.width,10, '#7e7e7e');
colorRect(player1X,player1Y,40,40,'#7F0019');
colorRect(player2X,player2Y,40,40, '#003366');
}
function MoveEverything(event){
var key_press=String.fromCharCode(event.keyCode);
var key_code=event.keyCode;
console.log(key_code,key_press);
//player 1 movement
if(key_press=="D"){
player1X+=10;
}
else if(key_press=="A"){
player1X-=10;
}
else if(key_press=="W"){
player1Y-=200;
}
else if(key_code==39){
player2X+=10;
}
else if(key_code==37){
player2X-=10;
}
else if(key_code==38){
player2Y-=200;
}
}
function colorRect(leftX, leftY, width, height, color){
context.fillStyle=color;
context.fillRect(leftX,leftY,width,height);
}
I was wondering if, simultaneously performing the 'if statements' would solve this. If it won't are there any other solutions to this problem?
Aucun commentaire:
Enregistrer un commentaire