Implemented table with entities
This commit is contained in:
Daniel Brunner
@@ -125,7 +125,7 @@
|
|||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Segmente:</legend>
|
<legend>Segmente:</legend>
|
||||||
|
|
||||||
<button class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Hinzufügen</button>
|
<button id="button_add" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Hinzufügen</button>
|
||||||
|
|
||||||
<table class="table table-striped table-condensed">
|
<table class="table table-striped table-condensed">
|
||||||
<thead>
|
<thead>
|
||||||
@@ -136,7 +136,7 @@
|
|||||||
<th>Aktionen</th>
|
<th>Aktionen</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody></tbody>
|
<tbody id="table_entities"></tbody>
|
||||||
</table>
|
</table>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
|
|||||||
472
script.js
472
script.js
@@ -1,258 +1,274 @@
|
|||||||
class Vector2 {
|
class Vector2 {
|
||||||
constructor(vec, y) {
|
constructor(vec, y) {
|
||||||
if(typeof vec === "undefined" &&
|
if(typeof vec === "undefined" &&
|
||||||
typeof y === "undefined") {
|
typeof y === "undefined") {
|
||||||
this.x = 0;
|
this.x = 0;
|
||||||
this.y = 0;
|
this.y = 0;
|
||||||
} else if(typeof vec === "number" &&
|
} else if(typeof vec === "number" &&
|
||||||
typeof y === "undefined") {
|
typeof y === "undefined") {
|
||||||
this.x = vec;
|
this.x = vec;
|
||||||
this.y = vec;
|
this.y = vec;
|
||||||
} else if(typeof vec === "number" &&
|
} else if(typeof vec === "number" &&
|
||||||
typeof y === "number") {
|
typeof y === "number") {
|
||||||
this.x = vec;
|
this.x = vec;
|
||||||
this.y = y;
|
this.y = y;
|
||||||
} else if(typeof vec === "object" && vec.constructor == Vector2) {
|
} else if(typeof vec === "object" && vec.constructor == Vector2) {
|
||||||
this.x = vec.getX()
|
this.x = vec.getX()
|
||||||
this.y = vec.getY();
|
this.y = vec.getY();
|
||||||
} else
|
} else
|
||||||
throw 'Vector2::constructor(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
|
throw 'Vector2::constructor(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
|
||||||
}
|
}
|
||||||
|
|
||||||
getX() {
|
getX() {
|
||||||
return this.x;
|
return this.x;
|
||||||
}
|
}
|
||||||
|
|
||||||
getY() {
|
getY() {
|
||||||
return this.y;
|
return this.y;
|
||||||
}
|
}
|
||||||
|
|
||||||
setX(x) {
|
setX(x) {
|
||||||
if(typeof x !== "number")
|
if(typeof x !== "number")
|
||||||
throw 'Vector2::setX(): Invalid type ' + (typeof x);
|
throw 'Vector2::setX(): Invalid type ' + (typeof x);
|
||||||
|
|
||||||
this.x = x;
|
this.x = x;
|
||||||
}
|
}
|
||||||
|
|
||||||
setY(y) {
|
setY(y) {
|
||||||
if(typeof y !== "number")
|
if(typeof y !== "number")
|
||||||
throw 'Vector2::setY(): Invalid type ' + (typeof y);
|
throw 'Vector2::setY(): Invalid type ' + (typeof y);
|
||||||
|
|
||||||
this.y = y;
|
this.y = y;
|
||||||
}
|
}
|
||||||
|
|
||||||
add(vec, y) {
|
add(vec, y) {
|
||||||
if(typeof vec === "number" &&
|
if(typeof vec === "number" &&
|
||||||
typeof y === "undefined") {
|
typeof y === "undefined") {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x + vec,
|
this.x + vec,
|
||||||
this.y + vec
|
this.y + vec
|
||||||
);
|
);
|
||||||
} else if(typeof vec === "number" &&
|
} else if(typeof vec === "number" &&
|
||||||
typeof y === "number") {
|
typeof y === "number") {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x + vec,
|
this.x + vec,
|
||||||
this.y + y
|
this.y + y
|
||||||
);
|
);
|
||||||
} else if(typeof vec === "object" && vec.constructor == Vector2) {
|
} else if(typeof vec === "object" && vec.constructor == Vector2) {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x + vec.getX(),
|
this.x + vec.getX(),
|
||||||
this.y + vec.getY()
|
this.y + vec.getY()
|
||||||
);
|
);
|
||||||
} else
|
} else
|
||||||
throw 'Vector2::add(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
|
throw 'Vector2::add(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
|
||||||
}
|
}
|
||||||
|
|
||||||
sub(vec, y) {
|
sub(vec, y) {
|
||||||
if(typeof vec === "number" &&
|
if(typeof vec === "number" &&
|
||||||
typeof y === "undefined") {
|
typeof y === "undefined") {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x - vec,
|
this.x - vec,
|
||||||
this.y - vec
|
this.y - vec
|
||||||
);
|
);
|
||||||
} else if(typeof vec === "number" &&
|
} else if(typeof vec === "number" &&
|
||||||
typeof y === "number") {
|
typeof y === "number") {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x - vec,
|
this.x - vec,
|
||||||
this.y - y
|
this.y - y
|
||||||
);
|
);
|
||||||
} else if(typeof vec === "object" && vec.constructor == Vector2) {
|
} else if(typeof vec === "object" && vec.constructor == Vector2) {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x - vec.getX(),
|
this.x - vec.getX(),
|
||||||
this.y - vec.getY()
|
this.y - vec.getY()
|
||||||
);
|
);
|
||||||
} else
|
} else
|
||||||
throw 'Vector2::sub(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
|
throw 'Vector2::sub(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
|
||||||
}
|
}
|
||||||
|
|
||||||
mul(vec, y) {
|
mul(vec, y) {
|
||||||
if(typeof vec === "number" &&
|
if(typeof vec === "number" &&
|
||||||
typeof y === "undefined") {
|
typeof y === "undefined") {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x * vec,
|
this.x * vec,
|
||||||
this.y * vec
|
this.y * vec
|
||||||
);
|
);
|
||||||
} else if(typeof vec === "number" &&
|
} else if(typeof vec === "number" &&
|
||||||
typeof y === "number") {
|
typeof y === "number") {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x * vec,
|
this.x * vec,
|
||||||
this.y * y
|
this.y * y
|
||||||
);
|
);
|
||||||
} else if(typeof vec === "object" && vec.constructor == Vector2) {
|
} else if(typeof vec === "object" && vec.constructor == Vector2) {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x * vec.getX(),
|
this.x * vec.getX(),
|
||||||
this.y * vec.getY()
|
this.y * vec.getY()
|
||||||
);
|
);
|
||||||
} else
|
} else
|
||||||
throw 'Vector2::mul(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
|
throw 'Vector2::mul(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
|
||||||
}
|
}
|
||||||
|
|
||||||
div(vec, y) {
|
div(vec, y) {
|
||||||
if(typeof vec === "number" &&
|
if(typeof vec === "number" &&
|
||||||
typeof y === "undefined") {
|
typeof y === "undefined") {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x / vec,
|
this.x / vec,
|
||||||
this.y / vec
|
this.y / vec
|
||||||
);
|
);
|
||||||
} else if(typeof vec === "number" &&
|
} else if(typeof vec === "number" &&
|
||||||
typeof y === "number") {
|
typeof y === "number") {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x / vec,
|
this.x / vec,
|
||||||
this.y / y
|
this.y / y
|
||||||
);
|
);
|
||||||
} else if(typeof vec === "object" && vec.constructor == Vector2) {
|
} else if(typeof vec === "object" && vec.constructor == Vector2) {
|
||||||
return new Vector2(
|
return new Vector2(
|
||||||
this.x / vec.getX(),
|
this.x / vec.getX(),
|
||||||
this.y / vec.getY()
|
this.y / vec.getY()
|
||||||
);
|
);
|
||||||
} else
|
} else
|
||||||
throw 'Vector2::div(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
|
throw 'Vector2::div(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
|
||||||
}
|
}
|
||||||
|
|
||||||
length() {
|
length() {
|
||||||
return Math.sqrt(this.x * this.x + this.y * this.y);
|
return Math.sqrt(this.x * this.x + this.y * this.y);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
$(document).ready(function($) {
|
$(document).ready(function($) {
|
||||||
var entities = [];
|
var entities = [];
|
||||||
|
|
||||||
class Entity {
|
var entityId = 0;
|
||||||
constructor() {
|
|
||||||
this.position = new Vector2();
|
|
||||||
this.speed = new Vector2();
|
|
||||||
this.elem = $('<div>').addClass('point').appendTo('body')
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
for (var i = 0; i < 8; i++) {
|
class Entity {
|
||||||
entities.push(new Entity());
|
constructor() {
|
||||||
}
|
this.id = entityId++;
|
||||||
|
this.position = new Vector2();
|
||||||
var mousePosition = new Vector2;
|
this.speed = new Vector2();
|
||||||
|
this.elem = $('<div>').addClass('point').appendTo('body');
|
||||||
$(document).mousemove(function(event) {
|
this.row = $('<tr>').appendTo('#table_entities');
|
||||||
mousePosition = new Vector2(
|
this.columns = {
|
||||||
event.pageX,
|
id: $('<td>').text(this.id).appendTo(this.row),
|
||||||
event.pageY
|
position: $('<td>').appendTo(this.row),
|
||||||
);
|
speed: $('<td>').appendTo(this.row),
|
||||||
});
|
actions: $('<td>').appendTo(this.row),
|
||||||
|
|
||||||
setInterval(function() {
|
|
||||||
var DELTAT = parseFloat($('#input_deltat').val());
|
|
||||||
var SEGLEN = parseFloat($('#input_seglen').val());
|
|
||||||
var SPRINGK = parseFloat($('#input_springk').val());
|
|
||||||
var MASS = parseFloat($('#input_mass').val());
|
|
||||||
var GRAVITY = parseFloat($('#input_gravity').val());
|
|
||||||
var RESISTANCE = parseFloat($('#input_resistance').val());
|
|
||||||
var STOPVEL = parseFloat($('#input_stopvel').val());
|
|
||||||
var STOPACC = parseFloat($('#input_stopacc').val());
|
|
||||||
var BOUNCE = parseFloat($('#input_bounce').val());
|
|
||||||
|
|
||||||
var collisionUp = $('#input_collisionUp').is(':checked');
|
|
||||||
var collisionLeft = $('#input_collisionLeft').is(':checked');
|
|
||||||
var collisionRight = $('#input_collisionRight').is(':checked');
|
|
||||||
var collisionDown = $('#input_collisionDown').is(':checked');
|
|
||||||
|
|
||||||
$('#display_deltat').text(DELTAT);
|
|
||||||
$('#display_seglen').text(SEGLEN);
|
|
||||||
$('#display_springk').text(SPRINGK);
|
|
||||||
$('#display_mass').text(MASS);
|
|
||||||
$('#display_gravity').text(GRAVITY);
|
|
||||||
$('#display_resistance').text(RESISTANCE);
|
|
||||||
$('#display_stopvel').text(STOPVEL);
|
|
||||||
$('#display_stopacc').text(STOPACC);
|
|
||||||
$('#display_bounce').text(BOUNCE);
|
|
||||||
|
|
||||||
var windowSize = new Vector2($(window).width(), $(window).height());
|
|
||||||
|
|
||||||
$.each(entities, function(i, entity){
|
|
||||||
var springForce = function(i, j) {
|
|
||||||
var d = i.sub(j);
|
|
||||||
var len = d.length();
|
|
||||||
return len > SEGLEN ? d.div(len).mul(SPRINGK).mul(len - SEGLEN) : new Vector2();
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
var spring = springForce(i > 0 ? entities[i - 1].position : mousePosition, entity.position);
|
$('#button_add').click(function(){
|
||||||
|
entities.push(new Entity());
|
||||||
|
});
|
||||||
|
|
||||||
if (i < (entities.length - 1)) {
|
for (var i = 0; i < 8; i++) {
|
||||||
spring = spring.add(springForce(entities[i + 1].position, entity.position));
|
$('#button_add').click();
|
||||||
}
|
}
|
||||||
|
|
||||||
var resist = entity.speed.mul(-RESISTANCE);
|
var mousePosition = new Vector2;
|
||||||
var accel = spring.add(resist).div(MASS).add(0, GRAVITY);
|
|
||||||
|
|
||||||
entity.speed = entity.speed.add(accel.mul(DELTAT));
|
$(document).mousemove(function(event) {
|
||||||
|
mousePosition = new Vector2(
|
||||||
|
event.pageX,
|
||||||
|
event.pageY
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
if (Math.abs(entity.speed.getX()) < STOPVEL &&
|
setInterval(function() {
|
||||||
Math.abs(entity.speed.getY()) < STOPVEL &&
|
var DELTAT = parseFloat($('#input_deltat').val());
|
||||||
Math.abs(accel.getX()) < STOPACC &&
|
var SEGLEN = parseFloat($('#input_seglen').val());
|
||||||
Math.abs(accel.getY()) < STOPACC) {
|
var SPRINGK = parseFloat($('#input_springk').val());
|
||||||
entity.speed = new Vector2();
|
var MASS = parseFloat($('#input_mass').val());
|
||||||
}
|
var GRAVITY = parseFloat($('#input_gravity').val());
|
||||||
|
var RESISTANCE = parseFloat($('#input_resistance').val());
|
||||||
|
var STOPVEL = parseFloat($('#input_stopvel').val());
|
||||||
|
var STOPACC = parseFloat($('#input_stopacc').val());
|
||||||
|
var BOUNCE = parseFloat($('#input_bounce').val());
|
||||||
|
|
||||||
entity.position = entity.position.add(entity.speed);
|
var collisionUp = $('#input_collisionUp').is(':checked');
|
||||||
|
var collisionLeft = $('#input_collisionLeft').is(':checked');
|
||||||
|
var collisionRight = $('#input_collisionRight').is(':checked');
|
||||||
|
var collisionDown = $('#input_collisionDown').is(':checked');
|
||||||
|
|
||||||
if(collisionLeft) {
|
$('#display_deltat').text(DELTAT);
|
||||||
if (entity.position.getX() < 0) {
|
$('#display_seglen').text(SEGLEN);
|
||||||
if (entity.speed.getX() < 0) {
|
$('#display_springk').text(SPRINGK);
|
||||||
entity.speed.setX(BOUNCE * -entity.speed.getX());
|
$('#display_mass').text(MASS);
|
||||||
}
|
$('#display_gravity').text(GRAVITY);
|
||||||
entity.position.setX(0);
|
$('#display_resistance').text(RESISTANCE);
|
||||||
}
|
$('#display_stopvel').text(STOPVEL);
|
||||||
}
|
$('#display_stopacc').text(STOPACC);
|
||||||
|
$('#display_bounce').text(BOUNCE);
|
||||||
|
|
||||||
if(collisionUp) {
|
var windowSize = new Vector2($(window).width(), $(window).height());
|
||||||
if (entity.position.getY() < 0) {
|
|
||||||
if (entity.speed.getY() < 0) {
|
|
||||||
entity.speed.setY(BOUNCE * -entity.speed.getY());
|
|
||||||
}
|
|
||||||
entity.position.setY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(collisionRight) {
|
$.each(entities, function(i, entity){
|
||||||
if (entity.position.getX() >= windowSize.getX() - entity.elem.width()) {
|
var springForce = function(i, j) {
|
||||||
if (entity.speed.getX() > 0) {
|
var d = i.sub(j);
|
||||||
entity.speed.setX(BOUNCE * -entity.speed.getX());
|
var len = d.length();
|
||||||
}
|
return len > SEGLEN ? d.div(len).mul(SPRINGK).mul(len - SEGLEN) : new Vector2();
|
||||||
entity.position.setX(windowSize.getX() - entity.elem.width());
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(collisionDown) {
|
var spring = springForce(i > 0 ? entities[i - 1].position : mousePosition, entity.position);
|
||||||
if (entity.position.getY() >= windowSize.getY() - entity.elem.height()) {
|
|
||||||
if (entity.speed.getY() > 0) {
|
|
||||||
entity.speed.setY(BOUNCE * -entity.speed.getY());
|
|
||||||
}
|
|
||||||
entity.position.setY(windowSize.getY() - entity.elem.height());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
entity.elem.css({
|
if (i < (entities.length - 1)) {
|
||||||
'left': entity.position.getX(),
|
spring = spring.add(springForce(entities[i + 1].position, entity.position));
|
||||||
'top': entity.position.getY()
|
}
|
||||||
});
|
|
||||||
});
|
var resist = entity.speed.mul(-RESISTANCE);
|
||||||
}, 20);
|
var accel = spring.add(resist).div(MASS).add(0, GRAVITY);
|
||||||
|
|
||||||
|
entity.speed = entity.speed.add(accel.mul(DELTAT));
|
||||||
|
|
||||||
|
if (Math.abs(entity.speed.getX()) < STOPVEL &&
|
||||||
|
Math.abs(entity.speed.getY()) < STOPVEL &&
|
||||||
|
Math.abs(accel.getX()) < STOPACC &&
|
||||||
|
Math.abs(accel.getY()) < STOPACC) {
|
||||||
|
entity.speed = new Vector2();
|
||||||
|
}
|
||||||
|
|
||||||
|
entity.position = entity.position.add(entity.speed);
|
||||||
|
|
||||||
|
if(collisionLeft) {
|
||||||
|
if (entity.position.getX() < 0) {
|
||||||
|
if (entity.speed.getX() < 0) {
|
||||||
|
entity.speed.setX(BOUNCE * -entity.speed.getX());
|
||||||
|
}
|
||||||
|
entity.position.setX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(collisionUp) {
|
||||||
|
if (entity.position.getY() < 0) {
|
||||||
|
if (entity.speed.getY() < 0) {
|
||||||
|
entity.speed.setY(BOUNCE * -entity.speed.getY());
|
||||||
|
}
|
||||||
|
entity.position.setY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(collisionRight) {
|
||||||
|
if (entity.position.getX() >= windowSize.getX() - entity.elem.width()) {
|
||||||
|
if (entity.speed.getX() > 0) {
|
||||||
|
entity.speed.setX(BOUNCE * -entity.speed.getX());
|
||||||
|
}
|
||||||
|
entity.position.setX(windowSize.getX() - entity.elem.width());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(collisionDown) {
|
||||||
|
if (entity.position.getY() >= windowSize.getY() - entity.elem.height()) {
|
||||||
|
if (entity.speed.getY() > 0) {
|
||||||
|
entity.speed.setY(BOUNCE * -entity.speed.getY());
|
||||||
|
}
|
||||||
|
entity.position.setY(windowSize.getY() - entity.elem.height());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
entity.elem.css({
|
||||||
|
'left': entity.position.getX(),
|
||||||
|
'top': entity.position.getY()
|
||||||
|
});
|
||||||
|
entity.columns.position.text(Math.round(entity.position.getX()) + ', ' + Math.round(entity.position.getY()));
|
||||||
|
entity.columns.speed.text(Math.round(entity.speed.getX()) + ', ' + Math.round(entity.speed.getY()));
|
||||||
|
});
|
||||||
|
}, 20);
|
||||||
});
|
});
|
||||||
Reference in New Issue
Block a user