Hello,
I’m having trouble with coding a fighting platformer in Javascript and I’ve got mostly everything down. Collision detection, gravity, movement, but not attacking (still working on that). I’ve seem to run into a problem where if the player is on the main stage the player will not jump. I’ve checked Google and Youtube and I haven’t found a solution to my problem.
(I checked out this video by PothOnProgramming: https://www.youtube.com/watch?v=8uIt9a2XBrw)
Here’s my code: (also I’m fine with some feedback on code changes)
html file
<!DOCTYPE html>
<html>
<head>
<title>Stage Brawlers!</title>
<link href="design.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="world"></canvas>
<script src="setup.js"></script>
<script src="stage.js"></script>
<script src="players.js"></script>
<script src="world.js"></script>
</body>
</html>
setup.js
const canvas = document.getElementById('world');
canvas.width = 2558;
canvas.height = 963;
const ctx = canvas.getContext('2d');
stage.js
const Stage = {
x: 779,
y: 565,
width: 1000,
height: 400,
color: "black",
draw() {
ctx.strokeStyle = this.color;
ctx.lineWidth = 1;
ctx.strokeRect(this.x, this.y, this.width, this.height);
}
};
player.js
function Player(x, y, id) {
this.x = x; this.startingX = x; this.dx = 0; this.xAttackDirection = 0; this.width = 25;
this.y = y; this.startingY = y; this.dy = 0; this.yAttackDirection = 0; this.height = 25;
this.maxSpeed = 5;
this.friction = 0.95;
this.timesJumped = 0;
this.jumping = false;
this.id = id;
this.color = "black";
//<editor-fold> Player appearance
this.draw = function() {
ctx.fillStyle = this.color;
ctx.fillRect(Math.round(this.x), this.y, this.width, this.height);
},
//</editor-fold>
//<editor-fold Animating
this.update = function() {
this.draw();
if(((Stage.y - this.height <= this.y && this.y <= Stage.y) && (Stage.x + this.width <= this.x && this.x <= Stage.x + (Stage.width - this.width*2))) || ((Stage.x - this.width <= this.x && this.x <= Stage.x + this.width) && this.y == Stage.y - this.height) || ((Stage.x + (Stage.width - this.width*2) <= this.x && this.x <= Stage.x + Stage.width) && this.y == Stage.y - this.height)) {
this.jumping = false;
this.y = Stage.y - this.height;
this.dy = 0;
}
if((Stage.y + this.height <= this.y && this.y <= Stage.y + Stage.height) && (Stage.x - this.width <= this.x && this.x <= Stage.x) || ((Stage.x - this.width <= this.x && this.x <= Stage.x) && (Stage.y - (this.height-1) <= this.y && this.y <= Stage.y + Stage.height))) { // Left border
if(this.dx > 0) {
this.dx = 0;
this.x = Stage.x - this.width;
}
}
if((Stage.y + this.height <= this.y && this.y <= Stage.y + Stage.height) && (Stage.x + (Stage.width - this.width) <= this.x && this.x <= Stage.x + Stage.width) || ((Stage.x + Stage.width - this.width <= this.x && this.x <= Stage.x + Stage.width) && (Stage.y - (this.height-1) <= this.y && this.y <= Stage.y + Stage.height))) { // Right border
if(this.dx < 0) {
this.dx = 0;
this.x = Stage.x + Stage.width;
}
}
if(this.y >= canvas.height + this.height || this.y < 0 - this.height) {
this.x = this.startingX;
this.y = this.startingY;
this.jumping = false;
}
if(this.dy < 5) {
this.dy++;
console.log(this.dy);
}
this.dx *= this.friction;
this.x += this.dx;
this.y += this.dy;
},
this.moveLeft = function() {
if(this.dx > -this.maxSpeed) {
this.dx--;
}
this.xAttackDirection = -25;
},
this.moveRight = function() {
if(this.dx < this.maxSpeed) {
this.dx++;
}
this.xAttackDirection = 25;
}
//</editor-fold>
//<editor-fold> Extra Functions
this.jump = function() {
this.dy -= 25;
},
this.touching = function(player) {
return !(this.x + this.width < player.x ||
this.x > player.x + player.width ||
this.y + this.height < player.y ||
this.y > player.y + player.height);
},
this.attack = function(player) {
if(this.touching(player)) {
player.dx += this.xAttackDirection;
player.dy -= 50;
}
}
//</editor-fold>
}
world.js
const Player1 = new Player(1000, 300, 1);
const Player2 = new Player(1300, 300, 2);
//<editor-fold> Controls pt.1
let keys = [];
window.addEventListener("keydown", function(evt) {
keys[evt.keyCode] = true;
if(evt.keyCode == 32 && Player1.jumping == false) {
Player1.dy -= 25;
Player1.jumping = true;
}
});
window.addEventListener("keyup", function(evt) {
keys[evt.keyCode] = false;
//Player1.jumping = false;
});
window.addEventListener("mousedown", function() {
Player1.color = "red";
Player1.attack(Player2);
});
window.addEventListener("mouseup", function() {
Player1.color = "black";
});
//</editor-fold>
function tick() {
requestAnimationFrame(tick);
ctx.clearRect(0, 0, canvas.width, canvas.height);
Stage.draw();
Player1.update();
Player2.update();
//<editor-fold> Controls pt.2
if(keys[65]) { // Left
Player1.moveLeft();
}
if(keys[68]) { // Right
Player1.moveRight();
}
//</editor-fold>
}
tick();
design.css
canvas {
border: 1px solid black;
}
body {
margin: 0;
}
