The following files exists in this folder. Click to view.
fysikscript.js186 lines UTF-8 Unix (LF) 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const colltext = document.getElementById("colltext");
let left,right,up,down;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Ball{
constructor(x,y,r){
this.x = x;
this.y = y;
this.r = r;
this.xvel = 0;
this.yvel = 0;
}
moveBall() {
this.x += this.xvel;
this.y += this.yvel;
}
drawBall() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.fillStyle = 'red';
ctx.fill();
}
}
const power = 0.5;
function gas(){
if(left){
Ball1.xvel-=power;
}
if(up){
Ball1.yvel-=power;
}
if(right){
Ball1.xvel+=power;
}
if(down){
Ball1.yvel+=power;
}
}
document.addEventListener('keydown', function(e){
if(e.keyCode == 37){
left = true;
}
if(e.keyCode == 38){
up = true;
}
if(e.keyCode == 39){
right = true;
}
if(e.keyCode == 40){
down = true;
}
})
document.addEventListener('keyup', function(e){
if(e.keyCode == 37){
left = false;
}
if(e.keyCode == 38){
up = false;
}
if(e.keyCode == 39){
right = false;
}
if(e.keyCode == 40){
down = false;
}
})
let balls = [];
let Ball1 = new Ball(200,200,30);
balls.push(Ball1);
for (var i=0;i<=1000; i+=100)
{
for (var j=300;j<=700; j+=100)
{
let newBall = new Ball(i+300,j,20);
balls.push(newBall);
}
}
function magnitude(x, y)
{
return Math.sqrt(x**2+y**2);
}
function dot(x1, y1, x2, y2)
{
return x1*x2+y1*y2;
}
function unit(x, y)
{
let factor = 1/magnitude(x, y);
return [x*factor, y*factor];
}
let elasticity = 0.9;
let collisions = 0;
function processCollisionPair(B1, B2)
{
let dist = magnitude(B1.x-B2.x, B1.y-B2.y);
let sum = B1.r + B2.r;
if (dist <= sum)
{
collisions += 1;
let dX = B2.x - B1.x;
let dY = B2.y - B1.y;
let [normalX, normalY] = unit(dX, dY);
let dvX = B2.xvel - B1.xvel;
let dvY = B2.yvel - B1.yvel;
let sepVel = dot(dvX, dvY, normalX, normalY) * elasticity;
let newSepVel = -sepVel;
let sepVelX = normalX * newSepVel;
let sepVelY = normalY * newSepVel;
B1.xvel += -sepVelX;
B1.yvel += -sepVelY;
B2.xvel += sepVelX;
B2.yvel += sepVelY;
let depth = (sum - dist) / 2;
B1.x -= normalX * depth;
B1.y -= normalY * depth;
B2.x += normalX * depth;
B2.y += normalY * depth;
}
}
function processWallCollision(Ball)
{
if((Ball.x + Ball.r) >= canvas.width){ //Höger
Ball.xvel *= -0.8;
Ball.x = canvas.width - Ball.r;
}
if((Ball.x - Ball.r) <= 0){ //Vänster
Ball.xvel *= -0.8;
Ball.x = 0 + Ball.r;
}
if((Ball.y + Ball.r) >= canvas.height){ //Ned
Ball.yvel *= -0.8;
Ball.y = canvas.height - Ball.r;
}
if((Ball.y - Ball.r) <= 0){ //Upp
Ball.yvel *= -0.8;
Ball.y = 0 + Ball.r;
}
}
function processCollision()
{
for (var i=0;i<balls.length;i++)
{
processWallCollision(balls[i]);
var start = i+1;
for (var j=start; j<balls.length; j++)
{
processCollisionPair(balls[i], balls[j]);
}
}
}
function mainLoop(){
colltext.innerText = `Antal kollisioner: ${collisions}`;
ctx.clearRect(0,0,canvas.width,canvas.height)
gas();
processCollision();
balls.forEach(ball=>ball.moveBall());
balls.forEach(ball=>ball.drawBall());
requestAnimationFrame(mainLoop);
}
requestAnimationFrame(mainLoop);