I am trying to create a basic platformer game, and I'm working on the gravity section. I am using some if myGameArea.keys statements to allow the player to move their character forwards and backwards, and up. I am using an accelerate function to stop gravity when the up key is pressed, but I can't make it start again when the key is lifted. I know how to implement the onkeyup function (onkeyup = function();) but I don't know how to add it to my code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 240);
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
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 == "keyup");
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
}
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
myGamePiece.gravity = 0.1;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -2;
}
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 2;
}
if (myGameArea.keys && myGameArea.keys[38]) {accelerate(-0.2)}
myGamePiece.newPos();
myGamePiece.update();
}
function accelerate(n) {
myGamePiece.gravity = n;
}
</script>
</body>
</html>
This is only a small portion of the code. If anyone would like the full amount, comment below to tell me, please. Thanks for your help!
Some issues:
In your keyup event handler, you have:
myGameArea.keys[e.keyCode] = (e.type == "keyup");
But this will set the property value to true. You want false, so just do:
myGameArea.keys[e.keyCode] = false;
(BTW, this error was not there in one of your previous question versions, where you had (e.type == "keydown").
You can also simply set to true in the keydown handler (but there was no error there).
Secondly, the gravitySpeed keeps increasing even when you hit the bottom. This will make that value incredible great, and the counter accelaration when pressing the up key will not have any visible effect, unless you wait long enough. Instead, reset `gravitySpeed here::
this.y = rockbottom;
this.gravitySpeed = 0; // <----
See it run:
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 240);
}
var myGameArea = {
canvas: document.createElement("canvas"),
keys: [], // <--- just initialise here
start: function() {
window.focus();
this.canvas.width = 480;
this.canvas.height = 180;
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[e.keyCode] = true; // <---
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = false; // <---
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0; // <----
}
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
myGamePiece.gravity = 0.1;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -2; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 2; }
if (myGameArea.keys && myGameArea.keys[38]) {accelerate(-0.2)}
myGamePiece.newPos();
myGamePiece.update();
}
function accelerate(n) {
myGamePiece.gravity = n;
}
window.onload = startGame;
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
Related
I am very new to coding. I am trying to make a game using java in notepad++. I cant seem to get it so that when the red square (player) hits the purple (TopEdge) the red square will not stop completely but also wont travel through the purple. Like a wall. Right now when the red square hits the purple, you cant move it anymore. I have tried almost everything i could find on the internet. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
<style>
canvas {
border:4px solid #000000;
background-color: #1FB026;
}
</style>
</head>
<body onload="startGame()">
<script>
var player;
var TopEdge;
function startGame() {
player = new component(30, 30, "red", 10, 120);
TopEdge = new component(10000, 300, "purple", 0, -200);
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 1150;
this.canvas.height = 500;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas,
document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 10);
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");
})
},
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.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;
let playerX = this.X + this.speedX;
let playerY = this.Y + this.speedY;
if (playerX >= 0 && this.width + playerX <= this.gamearea.canvas.width)
{
this.X = playerX;
}
if (playerY >= 0 && this.height + playerY <= this.gamearea.canvas.height)
{
this.Y = playerY;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) ||
(mytop > otherbottom) ||
(myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
}
function stopY() {
player.speedY = 0;
}
function updateGameArea() {
if (player.crashWith(TopEdge)) {
} else {
myGameArea.clear();
TopEdge.update();
player.x += player.speedX;
player.y += player.speedY;
player.update();
}
TopEdge.update();
player.speedX = 0;
player.speedY = 0;
if (myGameArea.keys && myGameArea.keys[65]) {player.speedX = -2.5; }
if (myGameArea.keys && myGameArea.keys[68]) {player.speedX = 2.5; }
if (myGameArea.keys && myGameArea.keys[87]) {player.speedY = -2.5; }
if (myGameArea.keys && myGameArea.keys[83]) {player.speedY = 2.5; }
player.newPos();
player.update();
}
</script>
</body>
</html>
The problem starts with your updateGameArea() function.
If your the player crashes with the TopEdge then you do nothing. Your creating a problem with your else-part over there. It will never reach the else like this, so nothing while change, so next time it still won't move and again it will not reach the else.....
How about removing the else part. Just check for everything all the time, but don't allow it to move up when it reached the TopEdge.
This should help.
function updateGameArea() {
// I'd prefer these calls at the end of the function block
// but right now your program would start kinda buggy then
myGameArea.clear();
player.newPos();
player.update();
TopEdge.update();
// In default state (nothing pressed) player shouldn't move up or down
player.speedX = 0;
player.speedY = 0;
// If the player does press a key set correct speed/direction
if (myGameArea.keys[65]) {player.speedX = -2.5; }
if (myGameArea.keys[68]) {player.speedX = 2.5; }
if (myGameArea.keys[87]) {player.speedY = -2.5; }
if (myGameArea.keys[83]) {player.speedY = 2.5; }
// Check if player reached the top
// If it did, then it shouldn't be able to climb any higher.
// So even if the player presses the up-button,
// the vertical speed should still not be aloud to change.
if (player.crashWith(TopEdge) && myGameArea.keys[87]) {
player.speedY = 0;
}
// Move the position of the player
player.x += player.speedX; //
player.y += player.speedY;
}
I want my object to shoot in the direction my object is facing when it rotates or moves, any ideas on how to do it?
I'm a beginner as well i started few days ago so its pretty hard on me to find the codes and to learn them as well as i cant find a good teacher or a website for it.
this is the code, I tried something but I'm pretty sure it was a total failure..
var myGamePiece;
function startGame() {
bullet = new component(5, 5, 'blue', 300, 300);
myGamePiece = new component(30, 30, "red", 225, 225);
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 1400;
this.canvas.height = 750;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
e.preventDefault();
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
stop : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.speedx = 0;
this.speedy = 0;
this.angle = 0;
this.moveAngle = 0;
this.x = x;
this.y = y;
this.s = x;
this.u = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
this.newPos = function() {
this.angle += this.moveAngle * Math.PI / 180;
this.x += this.speedx;
this.y += this.speedy;
this.s += this.speed * Math.sin(this.angle);
this.u -= this.speed * Math.cos(this.angle);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.moveAngle = 0;
myGamePiece.speedx = 0;
myGamePiece.speedy = 0;
bullet.speed = 0;
if (myGameArea.keys && myGameArea.keys[90]) {myGamePiece.moveAngle = -3; }
if (myGameArea.keys && myGameArea.keys[88]) {myGamePiece.moveAngle = 3; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedy= -2; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedy= 2; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedx= 2; }
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedx= -2; }
if (myGameArea.keys && myGameArea.keys[32]) {bullet.speed= -3; }
bullet.newPos();
bullet.update();
myGamePiece.newPos();
myGamePiece.update();
}
window.onload = function() {
var myGamePiece;
var bullet;
var myGameArea;
var ctx;
function startGame() {
bullet = new component(5, 5, 'blue', 300, 300);
myGamePiece = new component(30, 30, "red", 225, 225);
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 1400;
this.canvas.height = 750;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
bullet.speed = 0;
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
e.preventDefault();
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
stop : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.angle = 0;
this.moveAngle = 0;
this.x = x;
this.y = y;
this.speed = 0;
this.speedx = 0;
this.speedy = 0;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
this.newPos = function() {
this.angle += this.moveAngle * Math.PI / 180;
this.x += this.speedx;
this.y += this.speedy;
this.x += this.speed * Math.cos(this.angle);
this.y += this.speed * Math.sin(this.angle);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.moveAngle = 0;
myGamePiece.speedx = 0;
myGamePiece.speedy = 0;
if (myGameArea.keys && myGameArea.keys[90]) {myGamePiece.moveAngle = -3; }
if (myGameArea.keys && myGameArea.keys[88]) {myGamePiece.moveAngle = 3; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedy= -2; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedy= 2; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedx= 2; }
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedx= -2; }
if (myGameArea.keys && myGameArea.keys[32]) {
bullet.angle = myGamePiece.angle;
bullet.x = myGamePiece.x;
bullet.y = myGamePiece.y;
bullet.speed= 3;
}
bullet.newPos();
bullet.update();
myGamePiece.newPos();
myGamePiece.update();
}
startGame();
}
You almost had it working, the biggest issue was bullet.speed = 0; in game loop was making it never move.
You were also updating this.s and this.u but it was never used elsewhere so I fixed this part.
this.s += this.speed * Math.sin(this.angle);
this.u -= this.speed * Math.cos(this.angle);
I've also added some extra code so it fires from the red cube position.
Best comparing yours code against my changes to see what else changed but I think I've highlighted the major point.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am creating a platformer in javascript, and I am making a gravity sytem on it. What happens is that gravity is reduced when the player presses the up arrow key. The problem is that the user can press the up arrow multiple times and jump whilst already jumping. Any way to sort this out?
Here is my code:
<!DOCTYPE>
<html>
<head>
<style>
canvas {
border: 1px solid #000000;
background-color: rgb(0, 200, 200);
}
</style>
</head>
<body onload = "startGame()">
<canvas id="myCanvas" width="750" height="300">
<script>
var myGamePiece;
var floor;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 230);
floor = new component(750, 10, "green", 0, 260);
}
var myGameArea = {
canvas : document.getElementById('myCanvas'),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
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");
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.gamearea = myGameArea;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 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.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height - 10;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
}
function updateGameArea() {
myGameArea.clear();
floor.update();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.keys && myGameArea.keys[37]) {
myGamePiece.speedX = -2.5;
}
if (myGameArea.keys && myGameArea.keys[39]) {
myGamePiece.speedX = 2.5;
}
if (myGameArea.keys && myGameArea.keys[38]) {
accelerate(-0.2)
} else{
accelerate(0.1)
}
if (myGameArea.keys && myGameArea.keys[40]) {
myGamePiece.speedY = 2.5;
}
myGamePiece.newPos();
myGamePiece.update();
}
function accelerate(n) {
myGamePiece.gravity = n;
}
</script>
</canvas>
</body>
</html>
You only need to check myGamePiece.y >=230 before accelarting
I have changed only two things in your code and it works fine
if (myGameArea.keys && myGameArea.keys[40] && myGamePiece.y >= 230) last if block of your function updateGameArea()
Second Last if block of your updateGameArea()
if (myGameArea.keys && myGameArea.keys[38]) {
if(myGamePiece.y >= 230) accelerate(-0.2)
}
var myGamePiece;
var floor;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 230);
floor = new component(750, 10, "green", 0, 260);
}
var myGameArea = {
canvas : document.getElementById('myCanvas'),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
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");
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.gamearea = myGameArea;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 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.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height - 10;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
}
function updateGameArea() {
myGameArea.clear();
floor.update();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.keys && myGameArea.keys[37]) {
myGamePiece.speedX = -2.5;
}
if (myGameArea.keys && myGameArea.keys[39]) {
myGamePiece.speedX = 2.5;
}
if (myGameArea.keys && myGameArea.keys[38]) {
if(myGamePiece.y >= 230) accelerate(-0.2)
} else{
accelerate(0.1)
}
if (myGameArea.keys && myGameArea.keys[40] && myGamePiece.y >= 230) {
myGamePiece.speedY = 2.5;
}
myGamePiece.newPos();
myGamePiece.update();
}
function accelerate(n) {
myGamePiece.gravity = n;
}
<body onload = "startGame()">
<canvas id="myCanvas" width="750" height="300">
Hope it helps
I've been following W3schools tutorial on creating a JavaScript game in a canvas https://www.w3schools.com/graphics/game_obstacles.asp
I've got to the stage where they add an obstacle in. Currently, it has collision detection which stops the game when it hits the wall. I am trying to figure out a way to treat it like a wall where the box could hit it and no longer move that direction and continue the game, making the wall work.
Heres what I've got so far:
https://jsfiddle.net/j9cy1mne/1/
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacle;
var speed = 3;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myObstacle = new component(10, 200, "green", 300, 120);
myGameArea.start();
}
var myGameArea = {
canvas: document.createElement("canvas"),
start: function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
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.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.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
console.log("crash");
} else {
myGameArea.clear();
myObstacle.update();
myGamePiece.x += myGamePiece.speedX;
myGamePiece.y += myGamePiece.speedY;
myGamePiece.update();
}
}
document.onkeydown = checkKeyD;
function checkKeyD(e) {
e = e || window.event;
if (e.keyCode == '38') {
// up arrow
myGamePiece.speedY = -speed;
} else if (e.keyCode == '40') {
// down arrow
myGamePiece.speedY = speed;
} else if (e.keyCode == '37') {
// left arrow
myGamePiece.speedX = -speed;
} else if (e.keyCode == '39') {
// right arrow
myGamePiece.speedX = speed;
}
}
document.onkeyup = clearmove;
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
</body>
I see that you have part of it finished. You just need to have the crash code in the if statement for moving the player right. This will run the code only when the player is pressing the right arrow.
else if (e.keyCode == '39') {
// right arrow
// add crash code here
myGamePiece.speedX = speed;
}
Your game loop only executes when there is no crash:
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
console.log("crash");
} else {
myGameArea.clear();
myObstacle.update();
myGamePiece.x += myGamePiece.speedX;
myGamePiece.y += myGamePiece.speedY;
myGamePiece.update();
}
}
What you want to do is to set the myGamePiece.speedX and myGamePiece.speedX to 0 when a collision is detected. Something like:
function updateGameArea() {
myGameArea.clear();
myObstacle.update();
if (myGamePiece.crashWith(myObstacle)) {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
myGamePiece.x += myGamePiece.speedX;
myGamePiece.y += myGamePiece.speedY;
myGamePiece.update();
}
Edit: You probably want to apply some code to "back up" when a collision is detected, so the pieces are no longer in a collided state
The main object keeps firing bullets and it looks like a lazer. I don't know how to make it fire one bullet at a press of a key. Do I need to use intervals?
var gameBullet=[];
var i=0;
//Starts game
function startGame() {
myGameArea.start();
myGamePiece= new component(20,20,"red",10,120);
}
//Creates canvas , events and how many times per sec should the object redraw
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 1);
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");
})
window.addEventListener('space',function(e){
myGameArea.keys[e.keyCode] = (e.type == "space");
})
},
clear: function(){
this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
}
}
//Bullet constructor
function bullet(width,height,color,x,y){
this.gamearea=myGameArea;
this.width=width;
this.height=height;
this.speedX=5;
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.hitBorder();
}
this.hitBorder = function() {
var right = myGameArea.canvas.width - this.width;
if (this.x > right) {
this.x = right;
}
}
}
//Main Object constructor
function component(width,height,color,x,y){
this.gamearea=myGameArea;
var imageObj = new Image();
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.drawImage(imageObj,this.x,this.y, this.width, this.height);
imageObj.src = 'stalin.png';
*/
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.hitBorder();
}
this.hitBorder = function() {
var down = myGameArea.canvas.height - this.height;
if (this.y > down) {
this.y = down;
}
if (this.y < 0) {
this.y = 0;
}
var right = myGameArea.canvas.width - this.width;
if (this.x > right) {
this.x = right;
}
if (this.x < 0) {
this.x = 0;
}
}
}
I think here is the problem. I need to add something in the loop, but I don't know what.
//Updates game
function updateGameArea() {
myGameArea.clear();
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
if (myGameArea.keys && myGameArea.keys[32])
{
gameBullet[i]=new bullet(5,5,"red",myGamePiece.x,myGamePiece.y);
i=i+1;
}
myGamePiece.newPos();
myGamePiece.update();
for( i=0;i<gameBullet.length;i+=1){
gameBullet[i].newPos();
gameBullet[i].update();
}
}
startGame();
you can use setinterval() in place of for loop
setinterval(yourcode,timespan);