Registrarse

control de juego javascript

chuck2

Pequeño saltamontes
It is my initial JavaScript game attempt. I am trying to make a javascript game in which you control a yellow block using the w a s d keys. The blue square is meant to be an opponent that will make you lose if you hit it. I plan to add additional features eventually. The thing is, the game works perfectly until you drop one of the buttons. ¿How can I prevent the player block from flying when the controller buttons are released?

I also can't make the buttons work when I activate the w a s d keys as drivers, but that's not a big problem right now. However, I would be delighted if anyone could

[ CODE = javascript ] var myGamePiece;
var myFi;

function startGame ( ) {
myGameArea.start ( );
myGamePiece = new component ( 30, 30, "rgba ( 200,200,0,0.5 )", 10, 175 );
//blueGamePiece = new component ( 20, 20, "blue", 300, 110 );
myFi = new component ( 15, 15, "blue", 300, 120 );
}
var myGameArea = {
canvas: document.createElement ( "canvas" ),
start: function ( ) {
this.canvas.width = 680;
this.canvas.height = 420;
this.context = this.canvas.getContext ( "2d" );
document.body.insertBefore ( this.canvas, document.body.childNodes [ 0 ] );
this.interval = setInterval ( updateGameArea, 20 );
window.addEventListener ( 'keydown', function ( e ) {
myGameArea.keys = ( myGameArea.keys | | [ ] );
myGameArea.keys [ e.keyCode ] = ( e.type = = "keydown" );
} )
window.addEventListener ( 'keyup', function ( e ) {
myGameArea.keys [ e.keyCode ] = ( e.type = = "keydown" );
} )
}, // I don't get why the comma is so important and what it does!

clear: function ( ) {
this.context.clearRect ( 0, 0, this.canvas.width, this.canvas.height );
},

stop: function ( ) {
clearInterval ( this.interval );
}
}

function component ( width, height, color, x, y ) {
this.gamearea = myGameArea;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function ( ) {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect ( this.x, this.y, this.width, this.height );
}
this.newPos = function ( ) {
this.x + = this.speedX;
this.y + = this.speedY;
},
this.crashWith = function ( enemy ) {
var myleft = this.x;
var myright = this.x + ( this.width );
var mytop = this.y;
var mybottom = this.y + ( this.height );
var fileft = enemy.x;
var firight = enemy.x + ( enemy.width );
var fitop = enemy.y;
var fibottom = enemy.y + ( enemy.height );
var crash = true;
if ( ( mybottom < fitop ) | | mytop ( fibottom > ) | | myright ( fileft <
crash = false;
}
return crash;
}
}

function updateGameArea ( ) {
if ( myGamePiece.crashWith ( myFi ) ) {
myGameArea.stop ( );
} else {
myGameArea.clear ( );
myGamePiece.speedX + = myGamePiece.speedX;
myGamePiece.speedY + = myGamePiece.speedY;
if ( myGameArea.keys && myGameArea.keys [ 65 ] ) {
myGamePiece.speedX = -1;
}
if ( myGameArea.keys && myGameArea.keys [ 68 ] ) {
myGamePiece.speedX = 1;
}
if ( myGameArea.keys && myGameArea.keys [ 87 ] ) {
myGamePiece.speedY = -1;
}
if ( myGameArea.keys && myGameArea.keys [ 83 ] ) {
myGamePiece.speedY = 1;
}
myGamePiece.newPos ( );
//blueGamePiece.x - = 1;
//blueGamePiece.y + = 2;
//blueGamePiece.update ( );
myGamePiece.update ( );
myFi.update ( );
}
}

function moveup ( ) {
myGamePiece.speedY = 1;
}

function moved ( ) {
myGamePiece.speedY = 1;
}

function moveleft ( ) {
myGamePiece.speedX = 1;
}

function moveight ( ) {
myGamePiece.speedX = 1;
}

function clearmove ( ) {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
} [ / CODE ]


[ CODE = javascript ] body {
text-align: center;
}
canvas {
border: 1px solid # d3d3d3;
background-color: # f4f4f4;
}
div {
text-align: center;
width: 300px;
height: 100px;
}
button {
background-color: black;
color: yellow;
} [ / CODE ]


[ CODE = javascript ] < div >
< button onmousedown = "moveup ( )" onmouseup = "clearmove ( ) "> UP < / button >
< br >
< br >
< button onmousedown = "moveleft ( )" onmouseup = "clearmove ( ) "> LEFT < / button >
< button onmousedown = "moveright ( )" onmouseup = "clearmove ( ) "> RIGHT < /button >
< br >
< br >
< button onmousedown = "movedown ( )" onmouseup = "clearmove ( ) "> DOWN < / button >
< / div >

< p > I have created a game area!< / p >
< p > Then I created a component to my game! I is a yellow square!< / p >
< p > I continued to add frames and movement < / p >
< p > After I had added movement, I could finally add controllers < / p >
< p > First I added the buttons that was controlled by the mouse,
< br > then I added the keystroke controllers for the w, s, a, d keys. < / p > [ / CODE ]
 
Arriba