I have a problem when there is a collision between 2 players (we always see the oppenent shaking).
Here is a video : https://www.youtube.com/watch?v=Xu8DTKngVjg
Here is the client code :
class Player {
static list = new Map();
constructor(properties) {
Player.list.set(properties.id, this);
this.id = properties.id;
this.x = properties.x * zoom;
this.y = properties.y * zoom;
}
update() {
this.sX = this.x - camera.x + document.documentElement.clientWidth / 2;
this.sY = this.y - camera.y + document.documentElement.clientHeight / 2;
//Draw the player
}
}
function animate() {
Player.list.forEach(player => {
player.animate();
});
window.requestAnimationFrame(animate);
}
animate();
socket.on("positions", function (data) {
if (Player.list.has(data.id)) {
if (data.id === clientID && startedGameplay === true) {
camera.x = data.x * zoom;
camera.y = data.y * zoom;
}
Player.list.get(data.id).x = data.x * zoom;
Player.list.get(data.id).y = data.y * zoom;
}
});
And here is the server code :
class Player {
static list = new Map();
constructor(properties) {
Player.list.set(properties.id, this);
this.id = properties.id;
this.x = properties.x;
this.y = properties.y;
}
update() {
//Player moves
move(this);
//Chek for collisions
Player.list.forEach(player => {
if (player.id != this.id) {
const distance = Math.hypot(this.y - player.y, this.x - player.x) || 1;
collisions(distance, this, player);
}
});
io.emit("positions", this.getPosition());
}
getPosition() {
return {
id: this.id,
x: this.x,
y: this.y,
}
}
}
//Collisions function
function collisions(distance, player, obj) {
if (distance <= player.hitboxRadius + obj.hitboxRadius) {
const dX = (player.hitboxRadius + obj.hitboxRadius) * (obj.x - player.x) / distance;
const dY = (player.hitboxRadius + obj.hitboxRadius) * (obj.y - player.y) / distance;
obj.x = player.x + dX;
obj.y = player.y + dY;
}
}
//Function to make the player move
function move(player) {
if (player.movingUp === true) {
player.vy -= player.moveSpeed;
}
else if (player.movingDown === true) {
player.vy += player.moveSpeed;
}
if (player.movingRight === true) {
player.vx += player.moveSpeed;
}
else if (player.movingLeft === true) {
player.vx -= player.moveSpeed;
}
player.x += player.vx;
player.y += player.vy;
player.vx *= 0.9;
player.vy *= 0.9;
}
//Loop every 10ms to update players
setInterval(() => {
Player.list.forEach(player => {
player.update();
});
}, 10);
I dont think the problem come from the collisions detection/response, because if I update sX and sY every time I recieve the position pack and not on the players update function, the collisions work fine without shaking. I actually need to update sX and sY on players update functions.
Can anyone help me ?
(sX and sY are the positions of the players in relation to the position of the client player who is placed in the center of the screen).
I move collision function into the player class. it works for me.
Related
I'm building a space invaders game and the code below works, the ball is fired and if it hits the enemy the isDead() function is triggered which also switches dead to true for that ball and this is also passed to the enemy class so it causes the enemy to get destroyed. however when I increase the ball frequency the enemy isDead function fails to run, I'm really not sure why when the ball interval is higher this whole system breaks.
when this.newBallInterval = 700 the enemy square dies
when this.newBallInterval = 600 it doesn't
why? and how to fix?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: rgb(214, 238, 149);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
background-color: aquamarine;
}
</style>
</head>
<body>
<canvas height="300" width="300"></canvas>
</body>
<script>
class Entity {
constructor(x, y) {
this.dead = false;
this.collision = 'none'
this.x = x
this.y = y
}
update() { console.warn(`${this.constructor.name} needs an update() function`) }
draw() { console.warn(`${this.constructor.name} needs a draw() function`) }
isDead() { console.warn(`${this.constructor.name} needs an isDead() function`) }
static testCollision(a, b) {
if (a.collision === 'none') {
console.warn(`${a.constructor.name} needs a collision type`)
return undefined
}
if (b.collision === 'none') { d
console.warn(`${b.constructor.name} needs a collision type`)
return undefined
}
if (a.collision === 'circle' && b.collision === 'circle') {
return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2) < a.radius + b.radius
}
if (a.collision === 'circle' && b.collision === 'rect' || a.collision === 'rect' && b.collision === 'circle') {
let circle = a.collision === 'circle' ? a : b
let rect = a.collision === 'rect' ? a : b
// this is a waaaaaay simplified collision that just works in this case (circle always comes from the bottom)
const topOfBallIsAboveBottomOfRect = circle.y - circle.radius <= rect.y + rect.height
const bottomOfBallIsBelowTopOfRect = circle.y + circle.radius >= rect.y - rect.height
const ballIsRightOfRectLeftSide = circle.x + circle.radius >= rect.x - rect.width / 4
const ballIsLeftOfRectRightSide = circle.x - circle.radius <= rect.x + rect.width
return topOfBallIsAboveBottomOfRect && bottomOfBallIsBelowTopOfRect && ballIsRightOfRectLeftSide && ballIsLeftOfRectRightSide
}
console.warn(`there is no collision function defined for a ${a.collision} and a ${b.collision}`)
return undefined
}
static testBallCollision(ball) {
const topOfBallIsAboveBottomOfRect = ball.y - ball.radius <= this.y + this.height / 2
const bottomOfBallIsBelowTopOfRect = ball.y + ball.radius >= this.y - this.height / 2
const ballIsRightOfRectLeftSide = ball.x - ball.radius >= this.x - this.width / 2
const ballIsLeftOfRectRightSide = ball.x + ball.radius <= this.x + this.width / 2
return topOfBallIsAboveBottomOfRect && bottomOfBallIsBelowTopOfRect && ballIsRightOfRectLeftSide && ballIsLeftOfRectRightSide
}
}
class Ball extends Entity {
constructor(x, y) {
super(x, y)
this.dead = false;
this.collision = 'circle'
this.speed = 300 // px per second
this.radius = 10 // radius in px
}
update({ deltaTime }) {
// Ball still only needs deltaTime to calculate its update
this.y -= this.speed * deltaTime / 1000 // deltaTime is ms so we divide by 1000
}
/** #param {CanvasRenderingContext2D} context */
draw(context) {
context.beginPath()
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
context.fillStyle = "#1ee511";
context.fill()
}
isDead(enemy) {
const outOfBounds = this.y < 0 - this.radius
const collidesWithEnemy = Entity.testCollision(enemy, this)
if (outOfBounds) {
return true
}
if (collidesWithEnemy){
//console.log('dead')
this.dead = true;
return true
}
}
}
class Enemy extends Entity {
constructor(x, y) {
super(x, y)
this.collision = 'rect'
this.height = 50;
this.width = 50;
this.speed = 0;
this.y = y;
}
update() {
this.x += this.speed;
if (this.x > canvas.width - this.width) {
this.speed -= 5;
}
if (this.x === 0) {
this.speed += 5;
}
}
/** #param {CanvasRenderingContext2D} context */
draw(context) {
context.beginPath();
context.rect(this.x, this.y, this.width, this.height);
context.fillStyle = "#9995DD";
context.fill();
context.closePath();
}
isDead(enemy, ball) {
//// collision detection
// const collidesWithEnemy = Entity.testCollision(enemy, ball)
// if (collidesWithEnemy){
// console.log('enemy dead')
// game.hitEnemy();
// return true
// }
if (ball.dead){
console.log('enemy dead')
game.hitEnemy();
return true
}
}
}
class Paddle extends Entity {
constructor(x, width) {
super(150, 300)
this.collision = 'rect'
this.speed = 200
this.height = 10
this.width = 50
}
update({ deltaTime, inputs }) {
// Paddle needs to read both deltaTime and inputs
this.x += this.speed * deltaTime / 1000 * inputs.direction
}
/** #param {CanvasRenderingContext2D} context */
draw(context) {
context.beginPath();
context.rect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);
context.fillStyle = "#0095DD";
context.fill();
context.closePath();
}
isDead() { return false }
}
class InputsManager {
constructor() {
this.direction = 0 // this is the value we actually need in out Game object
window.addEventListener('keydown', this.onKeydown.bind(this))
window.addEventListener('keyup', this.onKeyup.bind(this))
}
onKeydown(event) {
switch (event.key) {
case 'ArrowLeft':
this.direction = -1
break
case 'ArrowRight':
this.direction = 1
break
}
}
onKeyup(event) {
switch (event.key) {
case 'ArrowLeft':
if (this.direction === -1) // make sure the direction was set by this key before resetting it
this.direction = 0
break
case 'ArrowRight':
this.direction = 1
if (this.direction === 1) // make sure the direction was set by this key before resetting it
this.direction = 0
break
}
}
}
class Game {
/** #param {HTMLCanvasElement} canvas */
constructor(canvas) {
this.entities = [] // contains all game entities (Balls, Paddles, ...)
this.context = canvas.getContext('2d')
this.newBallInterval = 700 // ms between each ball
this.lastBallCreated = -Infinity // timestamp of last time a ball was launched
}
endGame() {
//clear all elements, remove h-hidden class from next frame, then remove h-hidden class from the cta content
console.log('end game')
}
hitEnemy() {
const endGame = 1;
game.loop(endGame)
}
start() {
this.lastUpdate = performance.now()
this.enemy = new Enemy(100, 20)
this.entities.push(this.enemy)
// we store the new Paddle in this.player so we can read from it later
this.player = new Paddle()
// but we still add it to the entities list so it gets updated like every other Entity
this.entities.push(this.player)
//start watching inputs
this.inputsManager = new InputsManager()
//start game loop
this.loop()
}
update() {
// calculate time elapsed
const newTime = performance.now()
const deltaTime = newTime - this.lastUpdate
// we now pass more data to the update method so that entities that need to can also read from our InputsManager
const frameData = {
deltaTime,
inputs: this.inputsManager,
}
// update every entity
this.entities.forEach(entity => entity.update(frameData))
// other update logic (here, create new entities)
if (this.lastBallCreated + this.newBallInterval < newTime) {
// this is quick and dirty, you should put some more thought into `x` and `y` here
this.ball = new Ball(this.player.x, 280)
this.entities.push(this.ball)
this.lastBallCreated = newTime
}0
//draw entities
this.entities.forEach(entity => entity.draw(this.context))
// remember current time for next update
this.lastUpdate = newTime
}
cleanup() {
//to prevent memory leak, don't forget to cleanup dead entities
this.entities.forEach(entity => {
if (entity.isDead(this.enemy, this.ball)) {
const index = this.entities.indexOf(entity)
this.entities.splice(index, 1)
}
})
}
//main game loop
loop(endGame) {
this.myLoop = requestAnimationFrame(() => {
this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)
if(endGame){
cancelAnimationFrame(this.myLoop);
this.endGame();
return;
}
this.update()
this.cleanup()
this.loop()
})
}
}
const canvas = document.querySelector('canvas')
const game = new Game(canvas)
game.start()
</script>
</html>
The problem is that you are overwriting this.ball, so your enemy only checks against the newly spawned one, which is not dead yet.
You could simply store all the balls in their own Array and check all of them in your enemy.isDead() method:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: rgb(214, 238, 149);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
background-color: aquamarine;
}
</style>
</head>
<body>
<canvas height="300" width="300"></canvas>
</body>
<script>
class Entity {
constructor(x, y) {
this.dead = false;
this.collision = 'none'
this.x = x
this.y = y
}
update() { console.warn(`${this.constructor.name} needs an update() function`) }
draw() { console.warn(`${this.constructor.name} needs a draw() function`) }
isDead() { console.warn(`${this.constructor.name} needs an isDead() function`) }
static testCollision(a, b) {
if (a.collision === 'none') {
console.warn(`${a.constructor.name} needs a collision type`)
return undefined
}
if (b.collision === 'none') { d
console.warn(`${b.constructor.name} needs a collision type`)
return undefined
}
if (a.collision === 'circle' && b.collision === 'circle') {
return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2) < a.radius + b.radius
}
if (a.collision === 'circle' && b.collision === 'rect' || a.collision === 'rect' && b.collision === 'circle') {
let circle = a.collision === 'circle' ? a : b
let rect = a.collision === 'rect' ? a : b
// this is a waaaaaay simplified collision that just works in this case (circle always comes from the bottom)
const topOfBallIsAboveBottomOfRect = circle.y - circle.radius <= rect.y + rect.height
const bottomOfBallIsBelowTopOfRect = circle.y + circle.radius >= rect.y - rect.height
const ballIsRightOfRectLeftSide = circle.x + circle.radius >= rect.x - rect.width / 4
const ballIsLeftOfRectRightSide = circle.x - circle.radius <= rect.x + rect.width
return topOfBallIsAboveBottomOfRect && bottomOfBallIsBelowTopOfRect && ballIsRightOfRectLeftSide && ballIsLeftOfRectRightSide
}
console.warn(`there is no collision function defined for a ${a.collision} and a ${b.collision}`)
return undefined
}
static testBallCollision(ball) {
const topOfBallIsAboveBottomOfRect = ball.y - ball.radius <= this.y + this.height / 2
const bottomOfBallIsBelowTopOfRect = ball.y + ball.radius >= this.y - this.height / 2
const ballIsRightOfRectLeftSide = ball.x - ball.radius >= this.x - this.width / 2
const ballIsLeftOfRectRightSide = ball.x + ball.radius <= this.x + this.width / 2
return topOfBallIsAboveBottomOfRect && bottomOfBallIsBelowTopOfRect && ballIsRightOfRectLeftSide && ballIsLeftOfRectRightSide
}
}
class Ball extends Entity {
constructor(x, y) {
super(x, y)
this.dead = false;
this.collision = 'circle'
this.speed = 300 // px per second
this.radius = 10 // radius in px
}
update({ deltaTime }) {
// Ball still only needs deltaTime to calculate its update
this.y -= this.speed * deltaTime / 1000 // deltaTime is ms so we divide by 1000
}
/** #param {CanvasRenderingContext2D} context */
draw(context) {
context.beginPath()
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
context.fillStyle = "#1ee511";
context.fill()
}
isDead(enemy) {
const outOfBounds = this.y < 0 - this.radius
const collidesWithEnemy = Entity.testCollision(enemy, this)
if (outOfBounds) {
return true
}
if (collidesWithEnemy){
//console.log('dead')
this.dead = true;
return true
}
}
}
class Enemy extends Entity {
constructor(x, y) {
super(x, y)
this.collision = 'rect'
this.height = 50;
this.width = 50;
this.speed = 0;
this.y = y;
}
update() {
this.x += this.speed;
if (this.x > canvas.width - this.width) {
this.speed -= 5;
}
if (this.x === 0) {
this.speed += 5;
}
}
/** #param {CanvasRenderingContext2D} context */
draw(context) {
context.beginPath();
context.rect(this.x, this.y, this.width, this.height);
context.fillStyle = "#9995DD";
context.fill();
context.closePath();
}
isDead(enemy, balls) {
//// collision detection
// const collidesWithEnemy = Entity.testCollision(enemy, ball)
// if (collidesWithEnemy){
// console.log('enemy dead')
// game.hitEnemy();
// return true
// }
if (balls.some(ball => ball.dead)){
console.log('enemy dead')
game.hitEnemy();
return true
}
}
}
class Paddle extends Entity {
constructor(x, width) {
super(150, 300)
this.collision = 'rect'
this.speed = 200
this.height = 10
this.width = 50
}
update({ deltaTime, inputs }) {
// Paddle needs to read both deltaTime and inputs
this.x += this.speed * deltaTime / 1000 * inputs.direction
}
/** #param {CanvasRenderingContext2D} context */
draw(context) {
context.beginPath();
context.rect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);
context.fillStyle = "#0095DD";
context.fill();
context.closePath();
}
isDead() { return false }
}
class InputsManager {
constructor() {
this.direction = 0 // this is the value we actually need in out Game object
window.addEventListener('keydown', this.onKeydown.bind(this))
window.addEventListener('keyup', this.onKeyup.bind(this))
}
onKeydown(event) {
switch (event.key) {
case 'ArrowLeft':
this.direction = -1
break
case 'ArrowRight':
this.direction = 1
break
}
}
onKeyup(event) {
switch (event.key) {
case 'ArrowLeft':
if (this.direction === -1) // make sure the direction was set by this key before resetting it
this.direction = 0
break
case 'ArrowRight':
this.direction = 1
if (this.direction === 1) // make sure the direction was set by this key before resetting it
this.direction = 0
break
}
}
}
class Game {
/** #param {HTMLCanvasElement} canvas */
constructor(canvas) {
this.balls = [];
this.entities = [] // contains all game entities (Balls, Paddles, ...)
this.context = canvas.getContext('2d')
this.newBallInterval = 300 // ms between each ball
this.lastBallCreated = -Infinity // timestamp of last time a ball was launched
}
endGame() {
//clear all elements, remove h-hidden class from next frame, then remove h-hidden class from the cta content
console.log('end game')
}
hitEnemy() {
const endGame = 1;
game.loop(endGame)
}
start() {
this.lastUpdate = performance.now()
this.enemy = new Enemy(100, 20)
this.entities.push(this.enemy)
// we store the new Paddle in this.player so we can read from it later
this.player = new Paddle()
// but we still add it to the entities list so it gets updated like every other Entity
this.entities.push(this.player)
//start watching inputs
this.inputsManager = new InputsManager()
//start game loop
this.loop()
}
update() {
// calculate time elapsed
const newTime = performance.now()
const deltaTime = newTime - this.lastUpdate
// we now pass more data to the update method so that entities that need to can also read from our InputsManager
const frameData = {
deltaTime,
inputs: this.inputsManager,
}
// update every entity
this.entities.forEach(entity => entity.update(frameData))
// other update logic (here, create new entities)
if (this.lastBallCreated + this.newBallInterval < newTime) {
// this is quick and dirty, you should put some more thought into `x` and `y` here
const newBall = new Ball(this.player.x, 280);
this.balls.push( newBall );
this.entities.push( newBall )
this.lastBallCreated = newTime
}0
//draw entities
this.entities.forEach(entity => entity.draw(this.context))
// remember current time for next update
this.lastUpdate = newTime
}
cleanup() {
//to prevent memory leak, don't forget to cleanup dead entities
this.entities.forEach(entity => {
if (entity.isDead(this.enemy, this.balls)) {
const index = this.entities.indexOf(entity)
this.entities.splice(index, 1)
}
})
}
//main game loop
loop(endGame) {
this.myLoop = requestAnimationFrame(() => {
this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)
if(endGame){
cancelAnimationFrame(this.myLoop);
this.endGame();
return;
}
this.update()
this.cleanup()
this.loop()
})
}
}
const canvas = document.querySelector('canvas')
const game = new Game(canvas)
game.start()
</script>
</html>
But honestly the whole logic seems odd here and I'm afraid you find out you'll need to rewrite a lot of it later on (e.g when you'll want to have more than a single enemy), but doing this for you would be too much for an SO answer.
I have written some code to simulate a gravitation-free movement of a ship with a single thruster. Most of the time it works, and the ship reaches it's destination perfectly, but just sometimes it accelerates infinitively. But I can't figure out, why?
seek(target) {
var desired = p5.Vector.sub(target, this.position); // A vector pointing from the location to the target
if (desired.mag()>0.1){
this.orientation = desired;
if (this.velocity.heading() - desired.heading() > 0.01 && this.velocity.mag() >0.01) {
this.orientation = this.velocity.copy().mult(-1);
}
if ((this.velocity.mag()*this.velocity.mag())/(2*(this.maxForce/this.mass)) > desired.mag()) {
this.orientation.mult(-1);
}
this.applyForce(this.orientation.normalize().mult(this.maxForce/this.mass));
} else {
this.velocity = createVector(0,0);
}
}
You can test the result here:
https://editor.p5js.org/Ahiru/sketches/r1rQ9-T5m
The issue of the ship object going past the target is caused by the magnitude delta being too small for the increment that the ship moves in.
In order to get the spaceship object to land on the selected point you need to modify the seek method:
seek(target) {
var desired = p5.Vector.sub(target, this.position); // A vector pointing from the location to the target
if (desired.mag()>.01){
The object is moving in increments that can cause desired.mag to go from a number that is greater than .01 as the object approaches to another magnitude that is larger than .01 as the object passes the target and moves away.
modify
if (desired.mag() > .01)
to
if (desired.mag() > 2.0)
for example and the ship will be captured and land on the target and stay there until another target is selected.
Here is a working example with the delta set to equal the diameter of the target so that the ship appears to land on the surface of the target.
let v;
var targetDiameter = 12;
function setup() {
pixelDensity(1);
createCanvas(1000, 1000);
v = new Vehicle(width / 2, height / 2);
target = createVector(200, 200);
}
function draw() {
background(51);
// Draw an ellipse at the mouse position
fill(127);
stroke(200);
strokeWeight(2);
ellipse(target.x, target.y, targetDiameter, targetDiameter);
// Call the appropriate steering behaviors for our agents
v.seek(target);
v.update();
v.display();
}
function mouseClicked() {
target = createVector(mouseX, mouseY);
hex = find_HexCoordinates(100, target);
console.log("click " + hex.x + " " + hex.y + " " + hex.z);
}
class ThrustList {
constructor(thrust, time) {
this.thrust = createVector(thrust);
this.time = time;
}
set(thrust, time) {
this.thrust.set(thrust);
this.time = time;
}
}
class ThrustParams {
constructor (deltaPosition, deltaVelocity, maxForce, mass) {
this.deltaPosition = createVector(deltaPosition);
this.deltaVelocity = createVector(deltaVelocity);
this.maxForce = maxForce;
this.mass = mass;
}
}
class hexmetrics {
constructor (radius) {
this.outerRadius = radius;
this.innerRadius = this.outerradius * sqrt(3)/2;
}
}
function find_HexCoordinates (radius, position) {
this.innerRadius = radius;
this.outerRadius = this.innerRadius * sqrt(3)/2;
this.px = position.x - 1000/2;
this.py = position.y - 1000/2;
this.x = px / this.innerRadius * 2;
this.y = -x;
this.offset = py / this.outerRadius * 3;
this.x -= offset;
this.y -= offset;
this.iX = Math.round(x);
this.iY = Math.round(y);
this.iZ = Math.round(-x -y);
if (iX + iY + iZ != 0) {
dX = Math.abs(x-iX);
dY = Math.abs(y-iY);
dZ = Math.abs(-x -y -iZ);
if (dX > dY && dX > dZ) {
iX = -iY -iZ;
}
else if (dZ > dY) {
iZ = -iX -iY;
}
}
return createVector(this.iX, this.iY, this.iZ);
}
class Vehicle {
constructor(x, y){
this.mass = 1;
this.orientation = createVector(0,1);
this.turning_speed = 90;
this.acceleration = createVector(0, 0);
this.maxForce = .02;
this.position = createVector(x, y);
this.r = 3;
this.velocity = createVector(0, 0);
}
// Method to update location
update() {
// Update velocity
this.velocity.add(this.acceleration);
// Limit speed
this.position.add(this.velocity);
// Reset accelerationelertion to 0 each cycle
this.acceleration.mult(0);
}
applyForce(force) {
this.acceleration.add(force);
}
// A method that calculates a steering force towards a target
// STEER = DESIRED MINUS VELOCITY
seek(target) {
var desired = p5.Vector.sub(target, this.position); // A vector pointing from the location to the target
if (desired.mag() > targetDiameter){
this.orientation = desired;
if (Math.abs(this.velocity.heading() - desired.heading()) > 0.01 && this.velocity.mag() >0.01) {
this.orientation = this.velocity.copy().mult(-1);
}
if ((this.velocity.mag()*this.velocity.mag())/(2*(this.maxForce/this.mass)) > desired.mag()) {
this.orientation.mult(-1);
}
this.applyForce(this.orientation.normalize().mult(this.maxForce/this.mass));
} else {
this.velocity = createVector(0,0);
}
}
display() {
// Draw a triangle rotated in the direction of velocity
var theta = this.orientation.heading() + PI / 2;
fill(127);
stroke(200);
strokeWeight(1);
push();
translate(this.position.x, this.position.y);
rotate(theta);
beginShape();
vertex(0, -this.r * 2);
vertex(-this.r, this.r * 2);
vertex(this.r, this.r * 2);
endShape(CLOSE);
pop();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
I'm never using p5js before but I think it's because of the applyForce() , it's keep adding new force when user click.
applyForce(force) {
this.acceleration.add(force);}
i have a simple pong game where i can shot the ball and check for colisions at the moment. I had the colisions with X and Y working, but since i added angles to the ball trajectory the colisions at X coordinate sometimes fail, dunno why. So this is what i have at the moment, the colisions checking is handled by the ballMovementHandler function.
var canvas;
var ctx;
var player;
var ball;
var gameStarted;
var flagY;
var flagX;
var angle;
function init() {
canvas = document.getElementById('myCanvas')
if (canvas.getContext) {
ctx = canvas.getContext('2d')
setCanvasSize(ctx)
player = new Player()
ball = new Ball()
attachKeyboardListeners()
reset();
animate();
}
}
function reset() {
flagX = -1;
flagY = -1;
angle = 90;
gameStarted = false
player = new Player();
ball = new Ball();
}
function animate () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
drawIce()
player.drawPlayer();
ball.drawBall();
playerMovementeHandler()
if(gameStarted) {
ballMovementHandler();
}
window.requestAnimationFrame(animate);
}
function playerMovementeHandler() {
if(player.left === true) {
if(player.x > 0) {
player.movePlayer(-SPEED);
if(!gameStarted) {
ball.moveBallWithPlayer(-SPEED);
}
}
}
if(player.right === true) {
if(player.x + player.width < ctx.canvas.width) {
player.movePlayer(SPEED);
if(!gameStarted) {
ball.moveBallWithPlayer(SPEED);
}
}
}
}
function ballMovementHandler() {
if(ball.y - ball.radius <= 0) {
flagY = 1;
}
if(ball.y + ball.radius === player.y) {
if(ball.x + ball.radius >= player.x && ball.x < player.x + player.width) {
angle = playerAngleHandler()
flagY = -1;
}
else {
reset();
}
}
if(ball.x - ball.radius <= 0) {
flagX = 1;
}
if(ball.x + ball.radius >= ctx.canvas.width) {
flagX = -1;
}
radians = angle * Math.PI/ 180;
ball.moveBallY(Math.sin(radians) * ball.speed * flagY);
ball.moveBallX(Math.cos(radians) * ball.speed * flagX);
}
function playerAngleHandler() {
var angle = 90;
if(ball.x + ball.radius <= player.x + 25) {
angle = 35;
} else if(ball.x + ball.radius >= player.x + player.width - 25) {
angle = 135;
} else if(ball.x + ball.radius >= player.x + player.width - 50) {
angle = 120
} else if(ball.x + ball.radius <= player.x + 50 ) {
angle = 50;
} else if(ball.x + ball.radius <= player.x + 75) {
angle = 75;
} else if( ball.x + ball.radius >= player.x + player.width - 75 ) {
angle = 100;
}
return angle;
}
function drawIce() {
ctx.fillStyle = 'rgb(134,214,216)'
ctx.fillRect(0,ctx.canvas.height - Y_OFFSET + player.height + 10, ctx.canvas.width, Y_OFFSET)
}
function setCanvasSize() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
function keyboardEvent(keyCode, keyStatus) {
switch(keyCode) {
case 37:
player.left = keyStatus;
break;
case 39:
player.right = keyStatus;
break;
case 32:
gameStarted = true;
break;
}
}
function attachKeyboardListeners() {
document.addEventListener('keydown', function(e) {
keyboardEvent(e.keyCode, true)
})
document.addEventListener('keyup', function(e) {
keyboardEvent(e.keyCode, false)
})
}
init();
ball.js
// defines player configuration behaviour
const BALL_POSITION_Y = 100;
const RADIUS = 12;
const BALL_SPEED = 10;
function Ball(x = ctx.canvas.width/2, y = ctx.canvas.height - Y_OFFSET - RADIUS, radius = RADIUS, color = 'rgb(100,149,237)', speed = BALL_SPEED) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.speed = speed;
this.drawBall = function() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);
ctx.fill();
}
// for inital game started
this.moveBallWithPlayer = function(deltaX) {
this.x += deltaX;
}
this.moveBallY = function(flag) {
this.y = this.y + flag;
}
this.moveBallX = function(flag) {
this.x = this.x + flag;
}
}
player.js
// defines player configuration behaviour
const PLAYER_WIDTH = 200;
const Y_OFFSET = 100;
const PLAYER_HEIGHT = 30;
const SPEED = 6;
function Player(x = ctx.canvas.width/2 - PLAYER_WIDTH/2, y = ctx.canvas.height - Y_OFFSET, width = PLAYER_WIDTH, height = PLAYER_HEIGHT, color = 'rgba(0,0,0)') {
this.left = false;
this.right = false;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = color;
this.movePlayer = function(deltaX) {
this.x += deltaX;
}
this.drawPlayer = function() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
I've been working on some studies with animation and with the help of some jquery I've created an animation where when a square that is moved by the users mouse through a mousemove jquery event collides with another square on the screen (square2) thats been hit will move a certain length and if the hitbox is struck near its edges than the object is expected to rotate. The problem ive been running into is that when the object rotates it creates a pseudo afterimage of the outline of the square. At first I thought that I could remove the afterImage by using a clearRect() method to encompass a larger area around square2, but doing this not only leaves my problem unresolved, but also makes a part of my first square invisible which is undesired. If anybody could hep me figure out where ive gone wrong in this code, would definitely appreciate it fellas.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 400;
var width = canvas.width;
var height = canvas.height;
var particles = [];
var mouseSize = 50;
var isColliding = false;
var mouseX;
var mouseY;
var animationForward = false;
function particle() {
var particle = {
originX: width / 2,
originY: height / 2,
x: width / 2,
y: height / 2,
size: 30,
centerPointX: this.x + this.size / 2,
centerPointY: this.y + this.size / 2,
decay: .98,
vx: 0,
vy: 0,
rotate: 0,
vr: 0,
draw: function() {
ctx.fillStyle = "white";
ctx.fillRect(this.x, this.y, this.size, this.size)
// rotation logic
// method found at http://stackoverflow.com/questions/2677671/how-do-i-rotate-a-single-object-on-an-html-5-canvas
function drawImageRot(x, y, width, height, deg) {
ctx.clearRect(x, y, width, height);
//Convert degrees to radian
var rad = deg * Math.PI / 180;
//Set the origin to the center of the image
ctx.translate(x + width / 2, y + height / 2);
//Rotate the canvas around the origin
ctx.rotate(rad);
//draw the image
ctx.fillRect(width / 2 * (-1), height / 2 * (-1), width, height);
//reset the canvas
ctx.rotate(rad * (-1));
ctx.translate((x + width / 2) * (-1), (y + height / 2) * (-1));
}
//check for collision
if (mouseX < particles[0].x + particles[0].size &&
mouseX + mouseSize > particles[0].x &&
mouseY < particles[0].y + particles[0].size &&
mouseSize + mouseY > particles[0].y) {
isColliding = true;
} else {
isColliding = false;
}
//controlling velocity dependending on location of collision.
if (isColliding) {
//x axis
animationForward = true;
// checking below to see if mouseRect is hitting near the center of particleRect.
// if it hits near center the vy or vx will not be as high depending on direction and if it //does not than we will make square rotate
if (mouseX < this.x) {
this.vr = 3 + Math.random() * 10
if (mouseX + mouseSize / 2 > this.x) {
this.vx = 0 + Math.random() * 2;
} else {
this.vx = 3 + Math.random() * 3;
}
} else {
this.vr = -3 - Math.random() * 10
if (mouseX + mouseSize / 2 < this.x + this.size) {
this.vx = 0 - Math.random() * 2;
} else {
this.vx = -3 - Math.random() * 3;
}
}
//y axis checking
if (mouseY < this.y) {
if (mouseY + mouseSize / 2 > this.y) {
this.vy = 0 + Math.random() * 2;
} else {
this.vy = 3 + Math.random() * 3;
}
} else {
if (mouseY + mouseSize / 2 < this.y + this.size) {
this.vy = 0 - Math.random() * 2;
} else {
this.vy = -3 - Math.random() * 3;
}
}
}
//decay all motions each frame while animation is forward
if (animationForward) {
this.vx *= this.decay;
this.vy *= this.decay;
this.vr *= this.decay;
}
//when animation is done, set all velocities to 0
if (this.x != this.originX && Math.abs(this.vx) < .1 && this.y != this.originY && Math.abs(this.vy) < .1) {
animationForward = false;
this.vx = 0;
this.vy = 0;
this.vr = 0
}
//x check to see if animation over. if it is slowly put square back to original location
if (this.x != this.originX && !animationForward) {
if (this.x > this.originX) {
this.vx = -1;
}
if (this.x < this.originX) {
this.vx = 1;
}
if (this.x > this.originX && this.x - this.originX < 1) {
this.vx = 0;
this.x = this.originX;
}
if (this.x < this.originX && this.originX - this.x < 1) {
this.vx = 0;
this.x = this.originX;
}
}
// end x collison
// y check to see if animation over
if (this.y != this.originX && !animationForward) {
if (this.y > this.originY) {
this.vy = -1;
}
if (this.y < this.originY) {
this.vy = 1;
}
if (this.y > this.originY && this.y - this.originY < 1) {
this.vy = 0;
this.y = this.originY;
}
if (this.y < this.originY && this.originY - this.y < 1) {
this.vy = 0;
this.y = this.originY;
}
}
// end y collison
//check rotation
if (this.rotate != 0 && !animationForward) {
this.rotate = Math.round(this.rotate);
if (this.rotate < 0) {
if (this.rotate < -300) {
this.rotate += 10
} else if (this.rotate < -200) {
this.rotate += 7
} else if (this.rotate < -125) {
this.rotate += 5
} else if (this.rotate < -50) {
this.rotate += 3
} else {
this.rotate++;
}
} else {
if (this.rotate > 300) {
this.rotate -= 10;
} else if (this.rotate > 200) {
this.rotate -= 7
} else if (this.rotate > 125) {
this.rotate -= 5
} else if (this.rotate > 50) {
this.rotate -= 3
} else {
this.rotate--;
}
}
}
// move the rect based off of previous set conditions and make square rotate if edges hit
this.x += this.vx;
this.y += this.vy;
this.rotate += this.vr;
drawImageRot(this.x, this.y, this.size, this.size, this.rotate);
// boundary control
if (this.x + this.size > width || this.x < 0) {
this.vx = -this.vx * 2
}
if (this.y + this.size > height || this.y < 0) {
this.vy = -this.vy * 2
}
}
}
return particle;
}
function createParticles() {
particles.push(particle())
//wouldnt be too hard to put more particles. would have to go back and change the isColliding and animationForward global variable and make each object have their own to check. also would have to go back and implement for loops wherever i mention an element in my array
}
createParticles();
function draw() {
console.log(particles[0].rotate);
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = 'white';
ctx.fillRect(mouseX, mouseY, mouseSize, mouseSize);
particles[0].draw();
requestAnimationFrame(draw);
}
$("#canvas").mousemove(function(event) {
mouseX = event.pageX;
mouseY = event.pageY;
})
window.onload = draw();
I think your problem is right here:
draw: function() {
ctx.fillStyle = "white";
ctx.fillRect(this.x, this.y, this.size, this.size)
....
You are drawing 2nd shape here. Comment this lines and pseudo image should be gone.
So for our project my group and I are trying to program a game. The objective of the game is to change the color of the other player's ship.
For example: If Player 1's ship is colored Red, and Player 2's ship is colored green, each bullet from player 1 that hits Player 2 will slowly turn player 2 from red to green. This is done by the help of bit shifts that is explained below. So for the majority of the time we have been encountering the Uncaught Type Error and we cannot find what the problem is. This file uses : https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js
and
http://craftyjs.com/release/0.4.2/crafty.js
as dependencies to help run the program.
$(document).ready(function() {
Crafty.init();
Crafty.canvas();
Crafty.load(["player.png"], function() {
//splice the spritemap
Crafty.sprite(1, "player.png",
{
ship: [0,0]
});
//start the main scene when loaded
Crafty.scene("main");
});
//player entity for player 1
var player1 = Crafty.e("2D, Canvas, Controls, Collision, Color, ship, player")
.attr({move: {left: false, right: false, up: false, down: false}, xspeed: 0, yspeed: 0, decay: 0.9, h: 50, w: 50, radius: 50, start_time: 0, x: Crafty.viewport.width / 2, y: Crafty.viewport.height / 2 })
.color('red')
.bind("keydown", function(e) {
//on keydown, set the move booleans
if(e.keyCode === Crafty.keys.RIGHT_ARROW) {
this.move.right = true;
} else if(e.keyCode === Crafty.keys.LEFT_ARROW) {
this.move.left = true;
} else if(e.keyCode === Crafty.keys.UP_ARROW) {
this.move.up = true;
} else if(e.keyCode === Crafty.keys.SPACE) {
var d = new Date();
this.start_time = d.getTime();
}
}).bind("keyup", function(e) {
//on key up, set the move booleans to false
if(e.keyCode === Crafty.keys.RIGHT_ARROW) {
this.move.right = false;
} else if(e.keyCode === Crafty.keys.LEFT_ARROW) {
this.move.left = false;
} else if(e.keyCode === Crafty.keys.UP_ARROW) {
this.move.up = false;
} else if(e.keyCode === Crafty.keys.SPACE) {
var time = new Date().getTime();
if((time - this.start_time) >= 5000)
var charge = 5;
//else
//var charge = (time - this.start_time)/1000;
Crafty.e("2D, DOM, Color, bullet")
.attr({
x: this._x,
y: this._y,
w: 1.5,
h: 1.5,
rotation: this._rotation,
xspeed: 20 * Math.sin(this._rotation / 57.3),
yspeed: 20 * Math.cos(this._rotation / 57.3),
})
.color('red')
.bind("enterframe", function() {
this.x += this.xspeed;
this.y -= this.yspeed;
//destroy if it goes out of bounds
if(this._x > Crafty.viewport.width || this._x < 0 || this._y > Crafty.viewport.height || this._y < 0) {
this.destroy();
}
});
}
}).bind("enterframe", function() {
if(this.move.right) this.rotation += 5;
if(this.move.left) this.rotation -= 5;
//acceleration and movement vector
var vx = Math.sin(this._rotation * Math.PI / 180) * 0.3,
vy = Math.cos(this._rotation * Math.PI / 180) * 0.3;
//if the move up is true, increment the y/xspeeds
if(this.move.up) {
this.yspeed -= vy;
this.xspeed += vx;
} else {
//if released, slow down the ship
this.xspeed *= this.decay;
this.yspeed *= this.decay;
}
//move the ship by the x and y speeds or movement vector
this.x += this.xspeed;
this.y += this.yspeed;
//if ship goes out of bounds, put him back
if(this._x > Crafty.viewport.width) {
this.x = -64;
}
if(this._x < -64) {
this.x = Crafty.viewport.width;
}
if(this._y > Crafty.viewport.height) {
this.y = -64;
}
if(this._y < -64) {
this.y = Crafty.viewport.height;
}
}).collision()
.onHit("bullet", function(e) {
//basically the bullet is color A and hits ship B and changes the color to ship A
//bullets are based on ship A
//red to green
if(e.color() != 'red'){
/*
if(e.color() === "#FF0000" && this.start_color === "#00FF00")
{
this.color = this.color + ("#010000" - "#000001") * e.radius;
//red to blue
} else if(e.color === "#FF0000" && this.color === "#0000FF")
{
this.color = this.color + ("#010000" - "#000001") * e.radius;
}
*/
//green to red
if(e.color() === "#00FF00")
{
this.color(this.color() + ("#010000" - "#000001") * e.radius);
}
/*
//green to blue
else if(e.color === "#00FF00" && this.color === "#0000FF")
{
this.color = this.color + ("#010000" - "#000001") * e.radius;
}
*/
//blue to red
else if(e.color() === "#0000FF")
{
this.color(this.color() + ("#010000" - "#000001") * e.radius);
}
/*
//blue to green
else (e.color === "#0000FF" && this.color === "#00FF00")
{
this.color = this.color + ("#010000" - "#000001") * e.radius;
}
*/
if(this.color() === e.color()){
Crafty.scene("end");
}
this.xspeed = this.xspeed - .1*e.xspeed;
this.yspeed = this.yspeed - .1*e.yspeed;
e[0].obj.destroy();
}
}).onHit("player", function(e) {
var diff = "#ff" - (this.color()>>4);
this.color(this.color() + (.2*diff) << 4);
if(e.color() === "green") {
this.color(this.color() - (.2*diff) << 2);
}
else {
this.color(this.color() - .2*diff);
}
this.xspeed = this.xspeed - e.xspeed;
this.yspeed = this.yspeed - e.yspeed;
});
});
EDIT: I managed to take out the comments and some irrelevant code
I fixed the error by basically making a new read to main in the html file and deleting the $(document) prompt. Thanks for all your help!