We Keep Coding

collision detection between moving objects

If all my NPCs are stationary, the collision detection works as expected. However, when they are moving, the objects move through each other. I don't understand the difference between the moving object and the stationary object. I am tracking the hitboxes of all the NPCs and I'm pretty sure they're accurate. Maybe someone has some insight. Thanks in advance.
function Hero(map, x, y, facing, image, chars, type) {
this.map = map;
this.x = x;
this.y = y;
this.width = map.tsize;
this.height = map.tsize;
this.chars = chars
// facing = R=0 U=1 L=2 D=3
this.facing = facing
this.image = Loader.getImage(image)
this.type = type
}
Hero.prototype.hitBox = function(type){
if (this.type === "hero"){
return {
left: this.x - this.width/2,
right: this.x + this.width/2 -1,
top: this.y + this.height/2,
bottom: this.y + this.height -1
}
} else if (this.type === "npc") {
return {
left: this.x - this.width/2,
right: this.x + this.width/2 -1,
top: this.y - this.height/2,
bottom: this.y + this.height -1
}
}
};
Hero.SPEED = 256; // pixels per second
Hero.prototype.move = function (delta, dirx, diry) {
// move hero
this.x += dirx * Hero.SPEED * delta;
this.y += diry * Hero.SPEED * delta;
// clamp values
var maxX = (this.map.cols-2) * this.map.tsize;
var maxY = (this.map.rows-2) * this.map.tsize;
this.x = Math.max(0, Math.min(this.x, maxX));
this.y = Math.max(0, Math.min(this.y, maxY));
// check if we walked into a non-walkable tile
this._collide(delta, dirx, diry);
};
Hero.prototype.objCollision = function (obj){
let objHitBox = obj.hitBox()
let heroHitBox = this.hitBox()
if (objHitBox.left < heroHitBox.right&&
objHitBox.right > heroHitBox.left &&
objHitBox.top < heroHitBox.bottom &&
objHitBox.bottom > heroHitBox.top) {
return true
} else {
return false
}
}
Hero.prototype._collide = function (delta, dirx, diry) {
let row, col;
// check for collisions on sprite sides
let collision =
this.map.isSolidTileAtXY(this.hitBox()["left"], this.hitBox()["top"]) ||
this.map.isSolidTileAtXY(this.hitBox()["right"], this.hitBox()["top"]) ||
this.map.isSolidTileAtXY(this.hitBox()["right"], this.hitBox()["bottom"]) ||
this.map.isSolidTileAtXY(this.hitBox()["left"], this.hitBox()["bottom"])
//loop through all hexes with NPCs
let objCollision = this.chars.all.reduce(function (res, obj) {
let tmp;
if (obj !== this) {
tmp = this.objCollision(obj)
}
else {
return false
}
return res || tmp;
}.bind(this), false)
if (!collision && !objCollision) { return; }
if (diry > 0) {
row = this.map.getRow(this.hitBox()["bottom"]);
this.y = -Hero.SPEED*delta + this.y
}
else if (diry < 0) {
row = this.map.getRow(this.hitBox()["top"]);
this.y = Hero.SPEED*delta + this.y
}
else if (dirx > 0) {
col = this.map.getCol(this.hitBox()["right"]);
this.x = -Hero.SPEED*delta+ this.x;
}
else if (dirx < 0) {
col = this.map.getCol(this.hitBox()["left"]);
this.x = Hero.SPEED*delta + this.x;
}
};
aiMove(delta) {
switch(this.facing){
case 0:
this.dirx= 1
this.diry= 0
break;
case 1:
this.dirx= 0
this.diry= -1
break;
case 2:
this.dirx= -1
this.diry= 0
break;
case 3:
this.dirx= 0
this.diry= 1
break;
}
if (!this.waiting && this.moveTimer < 1) {
//Random direction
this.facing = Math.floor(Math.random() * Math.floor(4))
//random time
this.restStepTimer();
} else if (!this.waiting && this.moveTimer > 0) {
//Move to preset direction
this.move(delta, this.dirx, this.diry)
//subtract timer
this.moveTimer--;
//if timer is empty, switch to waiting and reset timer.
if (this.moveTimer <= 0) {
this.waiting = true;
this.restStepTimer();
}
} else if (this.waiting && this.moveTimer > 0) {
//while waiting, we lower the timer.
this.moveTimer--;
//when the timer runs out, we flip the flag back to not waiting and start again.
if (this.moveTimer <= 0) {
this.waiting = false;
}
}
};
restStepTimer() {
this.moveTimer = Math.floor(Math.random() * 50 + 20);
};
};

Make a bullet object in p5.js javascript

i was making a javascript game in p5.js. I made a lot of the game, then wanted to add some combat. I made a weapon that shoots bullets. But now the bullet is hard to make. So here is how my weapon works:
it starts from the player location
it founds the y rotation of the mouse click (looks from the center of the screen and looks what degree rotation it is (360 degrees))
looks to the y rotation of the mouse click
goes off in the distance
So how do I make the bullet? I have the base script, but the bullet only gets deleted when it hits a enemy, only goes to the mosue, has a dumb algorthm for path finding to the mouse, you can have only one bullet at once , and if it does not hit any enemies, it just sits on the ground like a mine.
Here is the psuedo code(no programming rules at all lol):
Make bullet(playerPositionX,playerPositionY,mouseX,mousey) as a object:
starter x and y = playerPostionX and playerPositionY
lookTowards a point(mouseX,mouseY)
goto the point(mouseX and mouseY) from the starter X and Y
movespeed is 20pixel per frame
So here is what i got in my game right now is:
The sketch script:
var player;
var enemy;
var bullet;
var score = 0;
function setup(){
createCanvas(600,600);
player = new Player();
enemy = new Enemy();
textSize(20);
}
function draw(){
clear();
background(51);
enemy.show();
enemy.moveToPlayer(player.x, player.y);
player.show();
player.MovePlayer();
if (bullet != undefined){
bullet.show();
bullet.toMouse();
if (dist(bullet.x,bullet.y,enemy.x,enemy.y) <= enemy.r){
enemy = new Enemy();
score += 100;
bullet = undefined;
}
}
fill(255);
text(score,500,500,100,100)
}
function mousePressed(){
//if (enemy.clicked(mouseX,mouseY)){
bullet = new Bullet(mouseX,mouseY,player.x,player.y);
//enemy = new Enemy();
//}
}
The bullet script:
function Bullet(X,Y,PX,PY){
this.speed = 20;
this.x = PX;
this.y = PY;
this.r = 5;
this.show = function(){
fill(255,255,0);
stroke(128,128,0);
circle(this.x,this.y,this.r);
}
this.toMouse = function(){
if (Y < this.y){
this.y += -1*this.speed;
} else if (Y > this.y) {
this.y += 1*this.speed;
}
if (X < this.x){
this.x += -1*this.speed;
} else if (X > this.x){
this.x += 1*this.speed;
}
}
}
The enemy script:
function Enemy(){
this.r = 25;
this.x = 0+this.r;
this.y = 0+this.r;
this.chance = random(0,1);
console.log(this.chance);
if (this.chance <= 0.10){
this.speed = 3;
this.r = 15;
this.red = 0;
this.green = 0;
this.blue = 255;
} else {
this.speed = 2;
this.red = 255;
this.green = 0;
this.blue = 0;
}
this.show = function(){
fill(this.red,this.green,this.blue);
stroke(128,0,0);
circle(this.x,this.y,this.r);
}
this.moveToPlayer = function(playerX,playerY){
if (playerY < this.y){
this.y += -1*this.speed;
} else if (playerY > this.y) {
this.y += 1*this.speed;
}
if (playerX < this.x){
this.x += -1*this.speed;
} else if (playerX > this.x){
this.x += 1*this.speed;
}
}
/*
this.clicked = function(mX,mY){
if (dist(mX,mY,this.x,this.y) <= this.r){
return true;
}
return false;
}
*/
}
The player script:
function Player(){
this.x = width/2;
this.y = height/2;
this.r = 20;
this.speed = 4;
this.show = function(){
fill(0,255,0);
stroke(0,128,0);
circle(this.x,this.y,this.r);
}
this.moveY = function(number){
this.y += (number*this.speed);
}
this.moveX = function(number){
this.x += (number*this.speed);
}
this.MovePlayer = function(){
if (keyIsDown(UP_ARROW)){
if (this.y + (-1*20) > 0)
this.moveY(-1);
}
if (keyIsDown(DOWN_ARROW)){
if (this.y + (1*20) < height)
this.moveY(1);
}
if (keyIsDown(LEFT_ARROW)){
if (this.x + (-1*20) > 0)
this.moveX(-1);
}
if (keyIsDown(RIGHT_ARROW)){
if (this.x + (1*20) < width)
this.moveX(1);
}
}
}
The html file has everything it needs
Thanks for advance!
var player;
var enemy;
var bullet;
var score = 0;
function setup(){
createCanvas(600,600);
player = new Player();
enemy = new Enemy();
textSize(20);
}
function draw(){
clear();
background(51);
enemy.show();
enemy.moveToPlayer(player.x, player.y);
player.show();
player.MovePlayer();
if (bullet != undefined){
bullet.show();
bullet.toMouse();
if (dist(bullet.x,bullet.y,enemy.x,enemy.y) <= enemy.r){
enemy = new Enemy();
score += 100;
bullet = undefined;
}
}
fill(255);
text(score,500,500,100,100)
}
function mousePressed(){
//if (enemy.clicked(mouseX,mouseY)){
bullet = new Bullet(mouseX,mouseY,player.x,player.y);
//enemy = new Enemy();
//}
}
function Bullet(X,Y,PX,PY){
this.speed = 20;
this.x = PX;
this.y = PY;
this.r = 5;
this.show = function(){
fill(255,255,0);
stroke(128,128,0);
circle(this.x,this.y,this.r);
}
this.toMouse = function(){
if (Y < this.y){
this.y += -1*this.speed;
} else if (Y > this.y) {
this.y += 1*this.speed;
}
if (X < this.x){
this.x += -1*this.speed;
} else if (X > this.x){
this.x += 1*this.speed;
}
}
}
function Enemy(){
this.r = 25;
this.x = 0+this.r;
this.y = 0+this.r;
this.chance = random(0,1);
console.log(this.chance);
if (this.chance <= 0.10){
this.speed = 3;
this.r = 15;
this.red = 0;
this.green = 0;
this.blue = 255;
} else {
this.speed = 2;
this.red = 255;
this.green = 0;
this.blue = 0;
}
this.show = function(){
fill(this.red,this.green,this.blue);
stroke(128,0,0);
circle(this.x,this.y,this.r);
}
this.moveToPlayer = function(playerX,playerY){
if (playerY < this.y){
this.y += -1*this.speed;
} else if (playerY > this.y) {
this.y += 1*this.speed;
}
if (playerX < this.x){
this.x += -1*this.speed;
} else if (playerX > this.x){
this.x += 1*this.speed;
}
}
/*
this.clicked = function(mX,mY){
if (dist(mX,mY,this.x,this.y) <= this.r){
return true;
}
return false;
}
*/
}
function Player(){
this.x = width/2;
this.y = height/2;
this.r = 20;
this.speed = 4;
this.show = function(){
fill(0,255,0);
stroke(0,128,0);
circle(this.x,this.y,this.r);
}
this.moveY = function(number){
this.y += (number*this.speed);
}
this.moveX = function(number){
this.x += (number*this.speed);
}
this.MovePlayer = function(){
if (keyIsDown(UP_ARROW)){
if (this.y + (-1*20) > 0)
this.moveY(-1);
}
if (keyIsDown(DOWN_ARROW)){
if (this.y + (1*20) < height)
this.moveY(1);
}
if (keyIsDown(LEFT_ARROW)){
if (this.x + (-1*20) > 0)
this.moveX(-1);
}
if (keyIsDown(RIGHT_ARROW)){
if (this.x + (1*20) < width)
this.moveX(1);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

Create an array of bullets rather than a single bullet and append a new bullet to the array, if the mouse button is pressed:
var bullets = [];
function mousePressed(){
if (mouseX != player.x || mouseY != player.y ) {
bullets.push( new Bullet(mouseX,mouseY,player.x,player.y) )
}
}
Use p5.Vector to calculate the normalized direction from the player position to the mouse position in thee class [Bullet]. This is defines the moving direction of the Bullet, which can be used in toMouse, to update the position of the Bullet object.
Further add method onScreen, which verifies if the Bullet is still in bounds of the screen:
function Bullet(X,Y,PX,PY){
this.speed = 2;
this.x = PX;
this.y = PY;
this.dir = createVector(X-PX, Y-PY).normalize()
this.r = 5;
this.show = function(){
fill(255,255,0);
stroke(128,128,0);
circle(this.x,this.y,this.r);
}
this.toMouse = function() {
this.x += this.dir.x * this.speed;
this.y += this.dir.y * this.speed;
}
this.onScreen = function() {
return this.x > -this.r && this.x < width+this.r &&
this.y > -this.r && this.y < height+this.r;
}
}
Traverse the bullets in draw. Check if a bullet has hit the enemy or has left the screen. Keep the remaining bullets for the next run of draw:
let keepbullets = []
let anyhit = false;
for (let i=0; i < bullets.length; ++ i) {
bullets[i].toMouse();
let hit = dist(bullets[i].x, bullets[i].y, enemy.x, enemy.y) <= enemy.r;
anyhit = anyhit || hit
if (!hit && bullets[i].onScreen()) {
keepbullets.push(bullets[i]);
bullets[i].show();
}
}
bullets = keepbullets;
if (anyhit) {
enemy = new Enemy();
score += 100;
}
See the example, where I applied the suggestions to the original code from the question. Note, I've slowed down the speed of the bullets extremely, to make the effect of multiple bullets visible:
var player;
var enemy;
var bullets = [];
var score = 0;
function setup(){
createCanvas(600,600);
player = new Player();
enemy = new Enemy();
textSize(20);
}
function draw(){
clear();
background(51);
enemy.show();
enemy.moveToPlayer(player.x, player.y);
player.show();
player.MovePlayer();
let keepbullets = []
let anyhit = false;
for (let i=0; i < bullets.length; ++ i) {
bullets[i].toMouse();
let hit = dist(bullets[i].x, bullets[i].y, enemy.x, enemy.y) <= enemy.r;
anyhit = anyhit || hit
if (!hit && bullets[i].onScreen()) {
keepbullets.push(bullets[i]);
bullets[i].show();
}
}
bullets = keepbullets;
if (anyhit) {
enemy = new Enemy();
score += 100;
}
fill(255);
text(score,500,500,100,100)
}
function mousePressed(){
if (mouseX != player.x || mouseY != player.y ) {
bullets.push( new Bullet(mouseX,mouseY,player.x,player.y) )
}
}
function Bullet(X,Y,PX,PY){
this.speed = 2;
this.x = PX;
this.y = PY;
this.dir = createVector(X-PX, Y-PY).normalize()
this.r = 5;
this.show = function(){
fill(255,255,0);
stroke(128,128,0);
circle(this.x,this.y,this.r);
}
this.toMouse = function() {
this.x += this.dir.x * this.speed;
this.y += this.dir.y * this.speed;
}
this.onScreen = function() {
return this.x > -this.r && this.x < width+this.r &&
this.y > -this.r && this.y < height+this.r;
}
}
function Enemy(){
this.r = 25;
this.x = 0+this.r;
this.y = 0+this.r;
this.chance = random(0,1);
console.log(this.chance);
if (this.chance <= 0.10){
this.speed = 3;
this.r = 15;
this.red = 0;
this.green = 0;
this.blue = 255;
} else {
this.speed = 2;
this.red = 255;
this.green = 0;
this.blue = 0;
}
this.show = function(){
fill(this.red,this.green,this.blue);
stroke(128,0,0);
circle(this.x,this.y,this.r);
}
this.moveToPlayer = function(playerX,playerY){
if (playerY < this.y){
this.y += -1*this.speed;
} else if (playerY > this.y) {
this.y += 1*this.speed;
}
if (playerX < this.x){
this.x += -1*this.speed;
} else if (playerX > this.x){
this.x += 1*this.speed;
}
}
/*
this.clicked = function(mX,mY){
if (dist(mX,mY,this.x,this.y) <= this.r){
return true;
}
return false;
}
*/
}
function Player(){
this.x = width/2;
this.y = height/2;
this.r = 20;
this.speed = 4;
this.show = function(){
fill(0,255,0);
stroke(0,128,0);
circle(this.x,this.y,this.r);
}
this.moveY = function(number){
this.y += (number*this.speed);
}
this.moveX = function(number){
this.x += (number*this.speed);
}
this.MovePlayer = function(){
if (keyIsDown(UP_ARROW)){
if (this.y + (-1*20) > 0)
this.moveY(-1);
}
if (keyIsDown(DOWN_ARROW)){
if (this.y + (1*20) < height)
this.moveY(1);
}
if (keyIsDown(LEFT_ARROW)){
if (this.x + (-1*20) > 0)
this.moveX(-1);
}
if (keyIsDown(RIGHT_ARROW)){
if (this.x + (1*20) < width)
this.moveX(1);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

Rewrite of an vanilla JS Pong with the help of PixiJS

I tried to rewrite a vanilla JavaScript Pong game in addition with PixiJS, mainly because I had resizing issues to get the canvas responsive.
The resizing works fine with PixiJS, but all the objects started to have trailing paths: Fiddle1
I figured that's because added new instances on update instead of just updating the position, so I tried to rework it from scratch again. The movement of the player works so far but I can't manage to get the ball working...I am kinda lost and willed to learn. Help is much appreciated ...Thanks a lot!
Fiddle2
import 'pixi.js';
// define gamne variables
const appWidth = window.innerWidth;
const appHeight = window.innerHeight;
const paddleWidth = 150;
const paddleHeight = 30;
const ballSize = 15;
const halfBall = ballSize / 2;
const appWidthHalf = appWidth / 2;
const appHeightHalf = appHeight / 2;
const paddleWidthHalf = paddleWidth / 2;
const pongColor = 0x57dfbf;
const bgColor = 0x282625;
const computerPositionX = appWidthHalf - paddleWidthHalf;
const computerPositionY = 50;
const playerPositionX = computerPositionX;
const playerPositionY = appHeight - computerPositionY - paddleHeight;
const ballPositionX = appWidthHalf - halfBall;
const ballPositionY = appHeightHalf - halfBall;
const playerSpeed = 4;
const computerSpeed = 4;
const ballSpeed = 3;
// Setup the ticker and the root stage PIXI.Container.
const app = new PIXI.Application(appWidth, appHeight, {
antialias: false,
backgroundColor: bgColor,
transparent: false,
resolution: 1,
});
// append app to body
document.body.appendChild(app.view);
// create graphic elements
const player = new PIXI.Graphics();
const computer = new PIXI.Graphics();
const ball = new PIXI.Graphics();
// Player
player
.beginFill(pongColor)
.drawRect(playerPositionX, playerPositionY, paddleWidth, paddleHeight)
.endFill();
// Computer
computer
.beginFill(pongColor)
.drawRect(computerPositionX, computerPositionY, paddleWidth, paddleHeight)
.endFill();
// Ball
ball
.beginFill(pongColor)
.drawRect(ballPositionX, ballPositionY, ballSize, ballSize)
.endFill();
// Player Movement
player.update = function () {
for (const key in keysDown) {
const value = Number(key);
if (value === 37) {
player.move(-playerSpeed, 0);
} else if (value === 39) {
player.move(playerSpeed, 0);
} else {
player.move(0, 0);
}
}
};
player.move = function (x, y) {
this.x += x;
this.y += y;
this.x_speed = x;
this.y_speed = y;
if (this.x < -appWidthHalf + paddleWidthHalf) {
this.x = -appWidthHalf + paddleWidthHalf;
this.x_speed = 0;
} else if (this.x + this.width - paddleWidthHalf > appWidthHalf) {
this.x = appWidthHalf - this.width + paddleWidthHalf;
this.x_speed = 0;
}
};
// computer Movement
// eslint-disable-next-line
computer.update = function(ball) {
const x_pos = ball.x;
let diff = -(computer.x + paddleWidthHalf - x_pos);
if (diff < 0 && diff < -computerSpeed) {
diff = -ballSize;
} else if (diff > 0 && diff > computerSpeed) {
diff = ballSize;
}
computer.position.set(diff, 0);
if (computer.x < 0) {
computer.x = 0;
} else if (computer.x + paddleWidthHalf > appWidth) {
computer.x = appWidth - paddleWidthHalf;
}
};
// Ball Movement
ball.update = function (paddle1, paddle2) {
this.x += this.x_speed;
this.y += this.y_speed;
const top_x = this.x - ballSize;
const top_y = this.y - ballSize;
const bottom_x = this.x + ballSize;
const bottom_y = this.y + ballSize;
if (this.x - ballSize < 0) {
this.x = ballSize;
this.x_speed = -this.x_speed;
} else if (this.x + ballSize > appWidth) {
this.x = appWidth - ballSize;
this.x_speed = -this.x_speed;
}
if (this.y < 0 || this.y > appHeight) {
this.x_speed = 0;
this.y_speed = ballSpeed;
this.x = appWidthHalf;
this.y = appHeightHalf;
}
if (top_y > appHeightHalf) {
if (
top_y < paddle1.y + paddle1.height &&
bottom_y > paddle1.y &&
top_x < paddle1.x + paddle1.width &&
bottom_x > paddle1.x
) {
this.y_speed = -ballSpeed;
this.x_speed += paddle1.x_speed / 2;
this.y += this.y_speed;
}
} else if (
top_y < paddle2.y + paddle2.height &&
bottom_y > paddle2.y &&
top_x < paddle2.x + paddle2.width &&
bottom_x > paddle2.x
) {
this.y_speed = ballSpeed;
this.x_speed += paddle2.x_speed / 2;
this.y += this.y_speed;
}
};
// controls
const keysDown = {};
window.addEventListener('keydown', (event) => {
keysDown[event.keyCode] = true;
});
window.addEventListener('keyup', (event) => {
delete keysDown[event.keyCode];
});
// update function
function update() {
player.update();
computer.update(ball);
ball.update(player, computer);
}
// append childs to app
app.stage.addChild(player);
app.stage.addChild(computer);
app.stage.addChild(ball);
// game loop
app.ticker.add(update);

Fiddle 1 definitely had issue, as you were not changing the ball.x and y there, but instead changing the graphics object, in fiddle2 it seemed, you were doing
good job with it. You just have some logical errors in the code, regarding setting the x- and y-coordinates and the ball movement.
So if you add console.log(this.x, this.y) inside the ball.update function in fiddle2, you will notice the NaN values.
To see the ball moving, if you set the initial values with:
ball.x_speed = 0;
ball.y_speed = 0;
And then
paddle.x_speed
paddle.y_speed
To
paddle.x
paddle.y
You see the ball moving at least (though collision logic doesn't work), (modified example in the fiddle below)
https://jsfiddle.net/4L6zbd01/

Functions return NaN in JavaScript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to write a game in JavaScript, and it has some simple car physics that determines that RPM, torque, speed of the car, etc. I have some functions that convert RPM/hp values into different units, and when the RPM gets past a certain point the gear is incremented. However, for some reason, when the car passes the RPM at which it's supposed to shift up on the final gear, the functions start returning NaN and the object disappears from the canvas. What could be the problem? Here is the code:
function gameObject(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.weight = 2500;
this.health = 100;
this.hp = 276;
this.accelTime = 1;
this.gearRatios = [1.98, 1.64, 1.4, 1.23, 1.04];
this.gear = 1;
this.RPM = 0;
this.shiftUpRPM = 7000;
this.shiftDownRPM = 1100;
ctx = game.canvas.getContext('2d');
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
this.update = function() {
if (this.RPM >= this.shiftUpRPM && this.gear < 5) {
this.RPM = 1400;
this.gear += 1;
} else if (this.RPM <= this.shiftDownRPM && this.gear > 1) {
this.RPM = 5200;
this.gear -= 1;
}
ctx = game.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;
};
}
var torqueToNewton = function(torque) {
return torque * 1.36;
}
var calculateTorqueOutput = function(hp, RPM) {
console.log("cTO:" + (hp * 5252) / RPM)
return (hp * 5252) / RPM;
}
var velocity = function(kn_energy, mass) {
var v = Math.sqrt(2*kn_energy/mass);
return v;
}
var detectCollision = function(object1, object2) {
object1.left = object1.x;
object1.right = object1.x + object1.width;
object1.bottom = object1.y
object1.top = object1.y + object1.height;
object2.left = object2.x;
object2.right = object2.x + object2.width;
object2.bottom = object2.y
object2.top = object2.y + object2.height;
}
var updateGame = function() {
game.clear();
if (window.key && window.key == 83) {
yourObject.speedX = -1;
}
if (window.key && window.key == 87) {
yourObject.RPM += 1;
nm_s = torqueToNewton(calculateTorqueOutput(yourObject.hp, yourObject.RPM));
yourObject.speedX += velocity(nm_s, yourObject.weight)/10;
yourObject.RPM /= (1/yourObject.gearRatios[yourObject.gear]);
console.log(yourObject.speedX + ":" + yourObject.RPM + ":" + yourObject.gear);
}
else {
if (yourObject.RPM > 0 && yourObject.speedX > 0) {
yourObject.RPM -= yourObject.speedX * (.25 / yourObject.speedX);
yourObject.speedX -= .25;
console.log(yourObject.speedX + ":" + yourObject.RPM + ":" + yourObject.gear);
} else {
yourObject.RPM = 0;
yourObject.speedX = 0;
}
}
if (window.key && window.key == 38) {yourObject.speedY = -1; }
if (window.key && window.key == 39) {yourObject.speedY = 1; }
yourObject.newPos();
yourObject.update();

While I didn't inspect all your code, one bug is certainly here:
&& this.gear < 5
This would allow the gear to go up to 5, while the last gear you defined is 4 (you have a total of 5 gears, and since the indexing is zero based, the last one is not 5, but 4).
To fix it, change it to
&& this.gear < 4

How to check collision with player and ball?

I'm trying to make a brick game with a ball and a player (platform). If the ball hits the player, it should go off in the other direction like ping pong. However, it's not detecting the collision.
Here's the code
html:
<canvas id="canvas" width= "400" height= "400"></canvas>
css:
#canvas{border:1px solid black}
Js:
var width = 400
var height = 400
var drawRect = function (x, y) {
ctx.fillRect(x, y, 30, 5)
};
// The Ball constructor
var Player = function () {
this.x = 395
this.y = 395
this.xSpeed = 5;
this.ySpeed = 0;
};
// Update the ball's position based on its speed
Player.prototype.move = function () {
this.x += this.xSpeed;
this.y += this.ySpeed;
if (this.x < 0) {
this.x = width;
} else if (this.x > width) {
this.x = 0;
} else if (this.y < 0) {
this.y = height;
} else if (this.y > height) {
this.y = 0;
}
};
// Draw the ball at its current position
Player.prototype.draw = function () {
drawRect(this.x, this.y);
};
// Set the ball's direction based on a string
Player.prototype.setDirection = function (direction) {
if (direction === "left") {
this.xSpeed = -5;
this.ySpeed = 0;
} else if (direction === "right") {
this.xSpeed = 5;
this.ySpeed = 0;
} else if (direction === "stop") {
this.xSpeed = 0;
this.ySpeed = 0;
}
};
// Create the ball object
var player = new Player();
// An object to convert keycodes into action names
var keyActions = {
32: "stop",
37: "left",
38: "up",
39: "right",
40: "down"
};
// The keydown handler that will be called for every keypress
$("html").keydown(function (event) {
var direction = keyActions[event.keyCode];
player.setDirection(direction);
});
var Ball = function () {
this.x = 100;
this.y = 100;
this.xSpeed = -2
this.ySpeed = 3;
};
var circle = function (x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false)
if (fillCircle) {
ctx.fill();
} else {
ctx.stroke();
}
}
Ball.prototype.move = function () {
this.x += this.xSpeed
this.y += this.ySpeed
};
Ball.prototype.draw = function () {
circle(this.x, this.y, 3, true);
};
Ball.prototype.checkCollision = function () {
if (this.x < 0 || this.x > 400) {
this.xSpeed = -this.xSpeed
}
if (this.y < 0) {
this.ySpeed = -this.ySpeed
}
};
Ball.prototype.checkCollisionPlayer = function () {
if (this.x === Player.x || this.y === player.y) {
this.ySpeed = -this.ySpeed
this.xSpeed = -this.xSpeed
}
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
setInterval(function () {
ctx.clearRect(0, 0, 400, 400);
player.draw();
player.move();
ball.draw();
ball.move();
ball.checkCollision();
ball.checkCollisionPlayer();
}, 40);
var ball = new Ball();
Thanks for your support. :)

I've added a simple box collision and update the classes to have the box dimensions of the ball and player. Remember that the ball box has to adjust for radius offset.
update
The kind of collision detection needed for the boxes you have to know side or corner that was hit. I updated the example as a starting point for this but it's needs to have the corners added and I also don't know the optimal detection. The blocks are setup for testing. I hope this helps.
var width = 400
var height = 400
function Brick(x, y, w, h, color) {
this.x = x;
this.y = y;
this.color = color;
this.w = w;
this.h = h;
this.hits = 0;
}
Brick.prototype.draw = function() {
ctx.save();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
ctx.fillStyle = "white";
ctx.fillText(this.hits, this.x + 2, this.y + 10);
ctx.restore();
};
var bricks = [
new Brick(80, 120, 15, 15, 'red'),
new Brick(220, 90, 15, 15, 'blue'),
new Brick(340, 100, 50, 20, 'green')
];
// The Ball constructor
var Player = function() {
this.x = 395
this.y = 395
this.xSpeed = 5;
this.ySpeed = 0;
this.w = 30;
this.h = 5;
};
// Update the ball's position based on its speed
Player.prototype.move = function() {
this.x += this.xSpeed;
this.y += this.ySpeed;
if (this.x < 0) {
this.x = width;
} else if (this.x > width) {
this.x = 0;
} else if (this.y < 0) {
this.y = height;
} else if (this.y > height) {
this.y = 0;
}
};
// Draw the ball at its current position
Player.prototype.draw = function() {
ctx.fillRect(this.x, this.y, this.w, this.h);
};
// Set the ball's direction based on a string
Player.prototype.setDirection = function(direction) {
if (direction === "left") {
this.xSpeed = -5;
this.ySpeed = 0;
} else if (direction === "right") {
this.xSpeed = 5;
this.ySpeed = 0;
} else if (direction === "stop") {
this.xSpeed = 0;
this.ySpeed = 0;
}
};
// Create the ball object
var player = new Player();
// An object to convert keycodes into action names
var keyActions = {
32: "stop",
37: "left",
38: "up",
39: "right",
40: "down"
};
// The keydown handler that will be called for every keypress
$("html").keydown(function(event) {
var direction = keyActions[event.keyCode];
player.setDirection(direction);
});
var Ball = function() {
this.x = 100;
this.y = 100;
this.xSpeed = -2
this.ySpeed = 3;
this.radius = 3;
};
var circle = function(x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false)
if (fillCircle) {
ctx.fill();
} else {
ctx.stroke();
}
}
Ball.prototype.move = function() {
this.x += this.xSpeed
this.y += this.ySpeed
if ((this.y + this.radius) > ctx.canvas.height) {
// floor to ceiling
this.y = 0;
}
};
Ball.prototype.draw = function() {
circle(this.x, this.y, this.radius, true);
};
Ball.prototype.getBox = function() {
return {
x: this.x - this.radius,
y: this.y - this.radius,
w: this.radius * 2,
h: this.radius * 2
};
};
Ball.prototype.checkCollision = function() {
if (this.x < 0 || this.x > 400) {
this.xSpeed = -this.xSpeed
}
if (this.y < 0) {
this.ySpeed = -this.ySpeed
} else {
var boxA = this.getBox();
switch (boxCollide(boxA, player)) {
case 1:
case 3:
this.ySpeed = -this.ySpeed;
break;
case 2:
case 4:
this.xSpeed = -this.xSpeed;
break;
}
}
};
// does box a collide with box b
// box = {x:num,y:num,w:num,h:num}
function boxCollide(a, b) {
var ax2 = a.x + a.w;
var ay2 = a.y + a.h;
var bx2 = b.x + b.w;
var by2 = b.y + b.h;
// simple hit true, false
//if (ax2 < b.x || a.x > bx2 || ay2 < b.y || a.y > by2) return false;
// return true
var xInRange = (a.x >= b.x && a.x <= bx2 || ax2 >= b.x && ax2 <= bx2);
var yInRange = (a.y >= b.y && a.y <= by2 || ay2 >= b.y && ay2 <= by2);
// Clockwise hit from top 1,2,3,4 or -1
if (ay2 > b.y && a.y < by2 && xInRange) return 1; // A hit the top of B
if (a.x < bx2 && ax2 > b.x && yInRange) return 2; // A hit the right of B
if (a.y < by2 && ay2 > b.y && xInRange) return 3; // A hit the bottom of B
if (ax2 > b.x && a.x < bx2 && yInRange) return 4; // A hit the right of B
return -1; // nohit
}
Ball.prototype.checkCollisionPlayer = function() {
if (this.x === Player.x || this.y === player.y) {
this.ySpeed = -this.ySpeed
this.xSpeed = -this.xSpeed
}
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
setInterval(function() {
ctx.clearRect(0, 0, 400, 400);
player.draw();
player.move();
ball.draw();
ball.move();
ball.checkCollision();
ball.checkCollisionPlayer();
var boxA = ball.getBox();
for (var i = 0; i < bricks.length; i++) {
switch (boxCollide(boxA, bricks[i])) {
case 1:
ball.y = bricks[i].y - ball.radius - 1;
ball.ySpeed = -ball.ySpeed;
bricks[i].hits++;
break;
case 3:
ball.y = bricks[i].y + ball.radius + bricks[i].h + 1;
ball.ySpeed = -ball.ySpeed;
bricks[i].hits++;
break;
case 2:
ball.x = bricks[i].x + ball.radius + bricks[i].w + 1;
ball.xSpeed = -ball.xSpeed;
bricks[i].hits++;
break;
case 4:
ball.x = bricks[i].x - ball.radius - 1;
ball.xSpeed = -ball.xSpeed;
bricks[i].hits++;
break;
}
bricks[i].draw();
}
},
40);
var ball = new Ball();
#canvas {
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>