commit
ea20325c80
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"version": "2.0.0",
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"type": "typescript",
|
||||||
|
"tsconfig": "tsconfig.json",
|
||||||
|
"problemMatcher": [
|
||||||
|
"$tsc"
|
||||||
|
],
|
||||||
|
"group": "build",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "shell",
|
||||||
|
"command": "del build\\*.js",
|
||||||
|
"group": "build",
|
||||||
|
"label": "tsc: clean"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
"use strict";
|
||||||
|
class Anime extends Sprite {
|
||||||
|
constructor(element) {
|
||||||
|
super(element);
|
||||||
|
this.xmin_ = 0;
|
||||||
|
this.xmax_ = 0;
|
||||||
|
this.ymin_ = 0;
|
||||||
|
this.ymax_ = 0;
|
||||||
|
}
|
||||||
|
setLimites(zone) {
|
||||||
|
this.xmin_ = zone.getX();
|
||||||
|
this.xmax_ = zone.getX() + zone.getWidth() - this.getWidth();
|
||||||
|
this.ymin_ = zone.getY();
|
||||||
|
this.ymax_ = zone.getY() + zone.getHeight() - this.getHeight();
|
||||||
|
}
|
||||||
|
animer() {
|
||||||
|
}
|
||||||
|
figer() {
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
"use strict";
|
||||||
|
class Balle extends Anime {
|
||||||
|
constructor(element, scene) {
|
||||||
|
super(element);
|
||||||
|
this.setImage("balle.png", 50, 50);
|
||||||
|
this.vitesseinitiale = 5;
|
||||||
|
this.initVitesse(this.vitesseinitiale);
|
||||||
|
this.scene_ = scene;
|
||||||
|
this.coller = true;
|
||||||
|
this.ecouteurSouris = (evt) => (this.coller = false);
|
||||||
|
}
|
||||||
|
animer() {
|
||||||
|
this.timerAnimation = setInterval(() => { this.bouger(); }, 1000 / 60);
|
||||||
|
window.addEventListener("mousedown", this.ecouteurSouris);
|
||||||
|
}
|
||||||
|
figer() {
|
||||||
|
clearInterval(this.timerAnimation);
|
||||||
|
window.removeEventListener("mousedown", this.ecouteurSouris);
|
||||||
|
}
|
||||||
|
bouger() {
|
||||||
|
if (this.coller) {
|
||||||
|
this.nx_ = this.scene_.palet_.getX() + this.scene_.palet_.getWidth() / 2 - this.getWidth() / 2;
|
||||||
|
this.ny_ = this.scene_.palet_.getY() - this.getHeight();
|
||||||
|
this.setXY(this.nx_, this.ny_);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.nx_ = this.getX() + this.vx;
|
||||||
|
this.ny_ = this.getY() + this.vy;
|
||||||
|
this.rebondirBordure();
|
||||||
|
this.rebondirPalet();
|
||||||
|
this.rebondirBriques();
|
||||||
|
this.setXY(this.nx_, this.ny_);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
vitesse() {
|
||||||
|
this.vitesseMax = 15;
|
||||||
|
this.multiplicateur = 1.05;
|
||||||
|
this.vx *= this.multiplicateur;
|
||||||
|
this.vy *= this.multiplicateur;
|
||||||
|
if (this.getVitesse() >= this.vitesseMax) {
|
||||||
|
this.vx = this.vitesseMax;
|
||||||
|
this.vy = this.vitesseMax;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
rebondirBordure() {
|
||||||
|
if (this.nx_ >= this.xmax_) {
|
||||||
|
this.nx_ = this.xmax_;
|
||||||
|
this.vx *= -1;
|
||||||
|
}
|
||||||
|
else if (this.nx_ <= this.xmin_) {
|
||||||
|
this.nx_ = this.xmin_;
|
||||||
|
this.vx *= -1;
|
||||||
|
}
|
||||||
|
if (this.ny_ >= this.ymax_) {
|
||||||
|
this.figer();
|
||||||
|
this.scene_.palet_.figer();
|
||||||
|
}
|
||||||
|
else if (this.ny_ <= this.ymin_) {
|
||||||
|
this.ny_ = this.ymin_;
|
||||||
|
this.vy *= -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
rebondirPalet() {
|
||||||
|
if (Balle.collision(this.getCircle(), this.scene_.palet_.getRectangle())) {
|
||||||
|
this.ny_ = this.scene_.palet_.getY() - this.getHeight();
|
||||||
|
this.vy *= -1;
|
||||||
|
this.vitesse();
|
||||||
|
}
|
||||||
|
;
|
||||||
|
}
|
||||||
|
rebondirBriques() {
|
||||||
|
for (let i = 0; i < this.scene_.brique_.length; i++) {
|
||||||
|
if (Balle.collision(this.getCircle(), this.scene_.brique_[i].getRectangle())) {
|
||||||
|
this.vy *= -1;
|
||||||
|
this.scene_.removeChild(this.scene_.brique_[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
initVitesse(v) {
|
||||||
|
this.vx = 4 * Math.random() - 2;
|
||||||
|
this.vy = -2;
|
||||||
|
let vr = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
|
||||||
|
this.vx = this.vx / vr * v;
|
||||||
|
this.vy = this.vy / vr * v;
|
||||||
|
console.log(this.vitesse());
|
||||||
|
}
|
||||||
|
getVitesse() {
|
||||||
|
return Math.sqrt(this.vx * this.vx + this.vy * this.vy);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
"use strict";
|
||||||
|
class Jeu extends Scene {
|
||||||
|
constructor(element) {
|
||||||
|
super(element, false);
|
||||||
|
this.zone_ = new Sprite(document.getElementById("jeu"));
|
||||||
|
this.zone_.setXY(10, 10);
|
||||||
|
this.zone_.setWidth(this.getWidth() - 20);
|
||||||
|
this.zone_.setHeight(this.getHeight() - 20);
|
||||||
|
}
|
||||||
|
start() {
|
||||||
|
this.balle_ = new Balle(document.createElement("img"), this);
|
||||||
|
this.balle_.setImage("balle.png", 25, 25);
|
||||||
|
this.balle_.setXY(this.getWidth() / 2 - this.balle_.getWidth() / 2, this.getHeight() / 2 - this.balle_.getHeight() / 2);
|
||||||
|
this.appendChild(this.balle_);
|
||||||
|
this.balle_.setLimites(this.zone_);
|
||||||
|
this.balle_.setXY(this.balle_.xmax_, this.balle_.ymax_);
|
||||||
|
this.palet_ = new Palet(document.createElement("img"));
|
||||||
|
this.palet_.setImage("palet.png", 100, 15);
|
||||||
|
this.palet_.setLimites(this.zone_);
|
||||||
|
this.palet_.setXY(this.getWidth() / 2 - this.palet_.getWidth() / 2, this.getHeight() - 75);
|
||||||
|
this.appendChild(this.palet_);
|
||||||
|
this.brique_ = [];
|
||||||
|
let nbColonnes = 5;
|
||||||
|
let nbLignes = 4;
|
||||||
|
let sx = this.zone_.getWidth() / (nbColonnes + 1);
|
||||||
|
let sy = this.zone_.getHeight() * 0.4 / (nbLignes + 1);
|
||||||
|
for (let i = 0; i < nbLignes; i++) {
|
||||||
|
for (let j = 0; j < nbColonnes; j++) {
|
||||||
|
let brique = new Sprite(document.createElement("div"));
|
||||||
|
brique.setDimension(40, 24);
|
||||||
|
brique.getElement().className = "brique";
|
||||||
|
brique.setImage("brique.png", 40, 24);
|
||||||
|
brique.setX((j + 1) * sx + this.zone_.getX() - brique.getWidth() / 2);
|
||||||
|
brique.setY((i + 1) * sy + this.zone_.getY() - brique.getHeight() / 2);
|
||||||
|
this.appendChild(brique);
|
||||||
|
this.brique_.push(brique);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.palet_.animer();
|
||||||
|
this.balle_.animer();
|
||||||
|
}
|
||||||
|
pause() {
|
||||||
|
}
|
||||||
|
unpause() {
|
||||||
|
}
|
||||||
|
clean() {
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
"use strict";
|
||||||
|
class Palet extends Anime {
|
||||||
|
constructor(element) {
|
||||||
|
super(element);
|
||||||
|
this.setImage("palet.png", 700, 200);
|
||||||
|
this.ecouteurSuivre = (evt) => { this.suivre(evt); };
|
||||||
|
}
|
||||||
|
animer() {
|
||||||
|
window.addEventListener("mousemove", this.ecouteurSuivre);
|
||||||
|
}
|
||||||
|
figer() {
|
||||||
|
window.removeEventListener("mousemove", this.ecouteurSuivre);
|
||||||
|
}
|
||||||
|
suivre(evt) {
|
||||||
|
let nx = evt.clientX - this.getParent().getX() - this.getWidth() / 2;
|
||||||
|
if (nx <= this.xmin_)
|
||||||
|
nx = this.xmin_;
|
||||||
|
if (nx >= this.xmax_)
|
||||||
|
nx = this.xmax_;
|
||||||
|
console.log(this.xmax_);
|
||||||
|
this.setX(nx);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
"use strict";
|
||||||
|
class Scene extends Sprite {
|
||||||
|
constructor(element, resize) {
|
||||||
|
super(element);
|
||||||
|
this.resize_ = resize;
|
||||||
|
this.scale_ = 1;
|
||||||
|
let box = this.getParentNode().getBoundingClientRect();
|
||||||
|
this.setDimension(640, 480);
|
||||||
|
this.setX((box.width - this.getWidth()) / 2);
|
||||||
|
this.setY((box.height - this.getHeight()) / 2);
|
||||||
|
}
|
||||||
|
isFullscreen() { return (document.fullscreenElement != null); }
|
||||||
|
toggleFullscreen(event) {
|
||||||
|
if (this.isFullscreen()) {
|
||||||
|
this.getElement().className = "";
|
||||||
|
document.exitFullscreen();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.getElement().className = "fullscreen";
|
||||||
|
document.body.requestFullscreen();
|
||||||
|
}
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
resize() {
|
||||||
|
let space = (this.isFullscreen() ? 0 : 50);
|
||||||
|
let box = this.getParentNode().getBoundingClientRect();
|
||||||
|
let rx = this.getWidth() / (box.width - space);
|
||||||
|
let ry = this.getHeight() / (box.height - space);
|
||||||
|
let s = 1 / Math.max(rx, ry);
|
||||||
|
if (this.resize_ || this.isFullscreen()) {
|
||||||
|
this.getStyle().transform = "scale(" + s + ")";
|
||||||
|
this.scale_ = s;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.getStyle().transform = "";
|
||||||
|
this.scale_ = 1;
|
||||||
|
}
|
||||||
|
this.setX((box.width - this.getWidth()) / 2);
|
||||||
|
this.setY((box.height - this.getHeight()) / 2);
|
||||||
|
}
|
||||||
|
scaledMouseX(x) {
|
||||||
|
return (this.getCenterX() + (x - this.getCenterX()) / this.scale_);
|
||||||
|
}
|
||||||
|
scaledMouseY(y) {
|
||||||
|
return (this.getCenterY() + (y - this.getCenterY()) / this.scale_);
|
||||||
|
}
|
||||||
|
start() { }
|
||||||
|
pause() { }
|
||||||
|
unpause() { }
|
||||||
|
clean() {
|
||||||
|
while (this.getChildren().length > 0)
|
||||||
|
this.removeChild(this.getChildren()[0]);
|
||||||
|
}
|
||||||
|
restart() {
|
||||||
|
this.pause();
|
||||||
|
this.clean();
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,316 @@
|
|||||||
|
"use strict";
|
||||||
|
class Sprite {
|
||||||
|
constructor(element) {
|
||||||
|
this.element_ = element;
|
||||||
|
this.parent_ = null;
|
||||||
|
this.children_ = new Array();
|
||||||
|
this.nativeParent_ = (element.parentNode);
|
||||||
|
if (element.dataset.spriteId)
|
||||||
|
console.error("HTML element #" + element.dataset.spriteId
|
||||||
|
+ " '" + element.id + "' already associated with a sprite.");
|
||||||
|
this.setId();
|
||||||
|
if (this.nativeParent_ != null && this.nativeParent_.tagName.toLowerCase() != "body") {
|
||||||
|
let parent = null;
|
||||||
|
if (this.nativeParent_.dataset.spriteId)
|
||||||
|
parent = Sprite.instances_.get(this.nativeParent_.dataset.spriteId);
|
||||||
|
else
|
||||||
|
parent = new Sprite(this.nativeParent_);
|
||||||
|
parent.appendChild(this);
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
let box = element.getBoundingClientRect();
|
||||||
|
this.x_ = box.left;
|
||||||
|
this.y_ = box.top;
|
||||||
|
this.width_ = box.width;
|
||||||
|
this.height_ = box.height;
|
||||||
|
if (this.parent_ != null) {
|
||||||
|
box = this.parent_.element_.getBoundingClientRect();
|
||||||
|
this.x_ -= box.left;
|
||||||
|
this.y_ -= box.top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
this.x_ = 0;
|
||||||
|
this.y_ = 0;
|
||||||
|
this.width_ = 0;
|
||||||
|
this.height_ = 0;
|
||||||
|
}
|
||||||
|
this.setRotation(0);
|
||||||
|
this.setOpacity(1);
|
||||||
|
this.element_.style.position = "absolute";
|
||||||
|
if (this.element_ instanceof HTMLImageElement)
|
||||||
|
(this.element_).draggable = false;
|
||||||
|
}
|
||||||
|
getId() { return this.element_.dataset.spriteId; }
|
||||||
|
setId() {
|
||||||
|
if (!this.element_.dataset.spriteId) {
|
||||||
|
this.element_.dataset.spriteId = String(++Sprite.counter_);
|
||||||
|
Sprite.instances_.set(this.element_.dataset.spriteId, this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
removeId() {
|
||||||
|
if (this.element_.dataset.spriteId) {
|
||||||
|
Sprite.instances_.delete(this.element_.dataset.spriteId);
|
||||||
|
this.element_.removeAttribute("data-sprite-id");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
static logInstances() { for (let sprite of Sprite.instances_)
|
||||||
|
console.log(sprite); }
|
||||||
|
log() {
|
||||||
|
let message;
|
||||||
|
message = `${this.getId()}`;
|
||||||
|
message += `{${this.x_};${this.y_}`;
|
||||||
|
message += ` ${this.width_}x${this.height_}`;
|
||||||
|
message += ` ${this.rotation_}°`;
|
||||||
|
message += ` [${this.children_.length}]`;
|
||||||
|
message += " -> " + (this.parent_ == null ? "null" : `#${this.parent_.getId()}`);
|
||||||
|
message += "}";
|
||||||
|
console.log(message);
|
||||||
|
}
|
||||||
|
getElement() { return this.element_; }
|
||||||
|
getStyle() { return this.element_.style; }
|
||||||
|
getBoundingClientRect() { return this.element_.getBoundingClientRect(); }
|
||||||
|
getParentNode() { return (this.element_.parentNode); }
|
||||||
|
getParent() { return this.parent_; }
|
||||||
|
getChildren() { return this.children_; }
|
||||||
|
appendChild(sprite) {
|
||||||
|
if (sprite instanceof Sprite) {
|
||||||
|
if (sprite.parent_ != null)
|
||||||
|
console.error(`HTML element #${sprite.getId()} already has a parent.`);
|
||||||
|
else {
|
||||||
|
if (sprite.nativeParent_ == null)
|
||||||
|
this.element_.appendChild(sprite.element_);
|
||||||
|
sprite.parent_ = this;
|
||||||
|
this.children_.push(sprite);
|
||||||
|
sprite.setId();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (sprite instanceof HTMLElement)
|
||||||
|
this.element_.appendChild(sprite);
|
||||||
|
}
|
||||||
|
removeChild(sprite) {
|
||||||
|
if (sprite instanceof Sprite) {
|
||||||
|
if (sprite.parent_ != this)
|
||||||
|
console.error(`Attempt to remove HTML element #${sprite.getId()} from the wrong parent.`);
|
||||||
|
else {
|
||||||
|
if (sprite.nativeParent_ == null)
|
||||||
|
this.element_.removeChild(sprite.element_);
|
||||||
|
sprite.parent_ = null;
|
||||||
|
sprite.removeId();
|
||||||
|
for (let i = 0; i < this.children_.length; ++i) {
|
||||||
|
if (this.children_[i] == sprite) {
|
||||||
|
let last = this.children_.pop();
|
||||||
|
if (i < this.children_.length)
|
||||||
|
this.children_[i] = last;
|
||||||
|
i = this.children_.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (sprite instanceof HTMLElement)
|
||||||
|
this.element_.removeChild(sprite);
|
||||||
|
}
|
||||||
|
getX() { return this.x_; }
|
||||||
|
getY() { return this.y_; }
|
||||||
|
setX(x) {
|
||||||
|
this.element_.style.left = x + "px";
|
||||||
|
this.x_ = x;
|
||||||
|
}
|
||||||
|
setY(y) {
|
||||||
|
this.element_.style.top = y + "px";
|
||||||
|
this.y_ = y;
|
||||||
|
}
|
||||||
|
setXY(x, y) {
|
||||||
|
this.element_.style.left = x + "px";
|
||||||
|
this.element_.style.top = y + "px";
|
||||||
|
this.x_ = x;
|
||||||
|
this.y_ = y;
|
||||||
|
}
|
||||||
|
getWidth() { return this.width_; }
|
||||||
|
getHeight() { return this.height_; }
|
||||||
|
setWidth(width) {
|
||||||
|
this.element_.style.width = width + "px";
|
||||||
|
this.width_ = width;
|
||||||
|
if (this.element_ instanceof HTMLCanvasElement)
|
||||||
|
(this.element_).width = width;
|
||||||
|
}
|
||||||
|
setHeight(height) {
|
||||||
|
this.element_.style.height = height + "px";
|
||||||
|
this.height_ = height;
|
||||||
|
if (this.element_ instanceof HTMLCanvasElement)
|
||||||
|
(this.element_).height = height;
|
||||||
|
}
|
||||||
|
setDimension(width, height) {
|
||||||
|
this.element_.style.width = width + "px";
|
||||||
|
this.element_.style.height = height + "px";
|
||||||
|
this.width_ = width;
|
||||||
|
this.height_ = height;
|
||||||
|
if (this.element_ instanceof HTMLCanvasElement) {
|
||||||
|
(this.element_).width = width;
|
||||||
|
(this.element_).height = height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getCenterX() { return (this.x_ + this.width_ / 2); }
|
||||||
|
getCenterY() { return (this.y_ + this.height_ / 2); }
|
||||||
|
getLeft() { return this.x_; }
|
||||||
|
getRight() { return (this.x_ + this.width_); }
|
||||||
|
getTop() { return this.y_; }
|
||||||
|
getBottom() { return (this.y_ + this.height_); }
|
||||||
|
getPoint() {
|
||||||
|
return new Sprite.Point(this.x_ + this.width_ / 2, this.y_ + this.height_ / 2);
|
||||||
|
}
|
||||||
|
getRectangle() {
|
||||||
|
return new Sprite.Rectangle(this.x_, this.y_, this.width_, this.height_);
|
||||||
|
}
|
||||||
|
getCircle(ratio = 1) {
|
||||||
|
return new Sprite.Circle(this.x_ + this.width_ / 2, this.y_ + this.height_ / 2, ratio * this.width_ / 2);
|
||||||
|
}
|
||||||
|
setImage(url, width, height) {
|
||||||
|
if (this.element_ instanceof HTMLImageElement) {
|
||||||
|
(this.element_).src = url;
|
||||||
|
this.setWidth(width);
|
||||||
|
this.setHeight(height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getContext() {
|
||||||
|
if (this.element_ instanceof HTMLCanvasElement)
|
||||||
|
return (this.element_).getContext("2d");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
hide() { this.element_.style.visibility = "hidden"; }
|
||||||
|
show() { this.element_.style.visibility = "visible"; }
|
||||||
|
isVisible() { return (this.element_.style.visibility != "hidden"); }
|
||||||
|
getRotation() { return this.rotation_; }
|
||||||
|
setRotation(angle) {
|
||||||
|
this.rotation_ = angle;
|
||||||
|
this.element_.style.transform = "rotate(" + angle + "deg)";
|
||||||
|
}
|
||||||
|
setRotationPivot(x, y) {
|
||||||
|
this.element_.style.transformOrigin = x + "px " + y + "px";
|
||||||
|
}
|
||||||
|
getOpacity() { return this.opacity_; }
|
||||||
|
setOpacity(opacity) {
|
||||||
|
this.opacity_ = opacity;
|
||||||
|
this.element_.style.opacity = "" + this.opacity_;
|
||||||
|
}
|
||||||
|
addEventListener(type, action) {
|
||||||
|
this.element_.addEventListener(type, action);
|
||||||
|
}
|
||||||
|
removeEventListener(type, action) {
|
||||||
|
this.element_.removeEventListener(type, action);
|
||||||
|
}
|
||||||
|
scaledMouseX(x) { return x; }
|
||||||
|
scaledMouseY(y) { return y; }
|
||||||
|
follow(target, x, y, frequency) {
|
||||||
|
return setInterval(() => { this.placeOnTarget(target, x, y); }, frequency);
|
||||||
|
}
|
||||||
|
placeOnTarget(target, x, y) {
|
||||||
|
let distance = Math.sqrt(x * x + y * y);
|
||||||
|
let angle1 = target.getRotation() / 180 * Math.PI;
|
||||||
|
let angle2 = (y < 0 ? -Math.acos(x / distance) : Math.acos(x / distance));
|
||||||
|
x = distance * Math.cos(angle1 + angle2);
|
||||||
|
y = distance * Math.sin(angle1 + angle2);
|
||||||
|
this.setX(target.getCenterX() - this.getWidth() / 2 + x);
|
||||||
|
this.setY(target.getCenterY() - this.getHeight() / 2 + y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Sprite.counter_ = 0;
|
||||||
|
Sprite.instances_ = new Map();
|
||||||
|
(function (Sprite) {
|
||||||
|
function collision(a, b) {
|
||||||
|
if (a instanceof Circle) {
|
||||||
|
if (b instanceof Circle)
|
||||||
|
return collisionCircleCircle(a, b);
|
||||||
|
else if (b instanceof Rectangle)
|
||||||
|
return collisionCircleRectangle(a, b);
|
||||||
|
else if (b instanceof Point)
|
||||||
|
return collisionCirclePoint(a, b);
|
||||||
|
}
|
||||||
|
else if (a instanceof Rectangle) {
|
||||||
|
if (b instanceof Circle)
|
||||||
|
return collisionCircleRectangle(b, a);
|
||||||
|
else if (b instanceof Rectangle)
|
||||||
|
return collisionRectangleRectangle(a, b);
|
||||||
|
else if (b instanceof Point)
|
||||||
|
return collisionRectanglePoint(a, b);
|
||||||
|
}
|
||||||
|
else if (a instanceof Point) {
|
||||||
|
if (b instanceof Circle)
|
||||||
|
return collisionCirclePoint(b, a);
|
||||||
|
else if (b instanceof Rectangle)
|
||||||
|
return collisionRectanglePoint(b, a);
|
||||||
|
else if (b instanceof Point)
|
||||||
|
return collisionPointPoint(a, b);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Sprite.collision = collision;
|
||||||
|
class Shape {
|
||||||
|
}
|
||||||
|
Sprite.Shape = Shape;
|
||||||
|
class Point extends Shape {
|
||||||
|
constructor(x, y) {
|
||||||
|
super();
|
||||||
|
this.x_ = x;
|
||||||
|
this.y_ = y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Sprite.Point = Point;
|
||||||
|
class Circle extends Shape {
|
||||||
|
constructor(centerX, centerY, radius) {
|
||||||
|
super();
|
||||||
|
this.cx_ = centerX;
|
||||||
|
this.cy_ = centerY;
|
||||||
|
this.radius_ = radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Sprite.Circle = Circle;
|
||||||
|
class Rectangle extends Shape {
|
||||||
|
constructor(cornerX, cornerY, width, height) {
|
||||||
|
super();
|
||||||
|
this.x_ = cornerX;
|
||||||
|
this.y_ = cornerY;
|
||||||
|
this.width_ = width;
|
||||||
|
this.height_ = height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Sprite.Rectangle = Rectangle;
|
||||||
|
function collisionCircleRectangle(circle, rectangle) {
|
||||||
|
let px = Math.max(rectangle.x_, Math.min(circle.cx_, rectangle.x_ + rectangle.width_));
|
||||||
|
let py = Math.max(rectangle.y_, Math.min(circle.cy_, rectangle.y_ + rectangle.height_));
|
||||||
|
let dx = px - circle.cx_;
|
||||||
|
let dy = py - circle.cy_;
|
||||||
|
let distance = dx * dx + dy * dy;
|
||||||
|
let radius = circle.radius_ * circle.radius_;
|
||||||
|
return (distance < radius);
|
||||||
|
}
|
||||||
|
function collisionCircleCircle(circle1, circle2) {
|
||||||
|
let dx = circle1.cx_ - circle2.cx_;
|
||||||
|
let dy = circle1.cy_ - circle2.cy_;
|
||||||
|
let distance = dx * dx + dy * dy;
|
||||||
|
let radius = circle1.radius_ + circle2.radius_;
|
||||||
|
return (distance < radius * radius);
|
||||||
|
}
|
||||||
|
function collisionCirclePoint(circle, point) {
|
||||||
|
let dx = point.x_ - circle.cx_;
|
||||||
|
let dy = point.y_ - circle.cy_;
|
||||||
|
let distance = dx * dx + dy * dy;
|
||||||
|
let radius = circle.radius_ * circle.radius_;
|
||||||
|
return (distance < radius);
|
||||||
|
}
|
||||||
|
function collisionRectangleRectangle(rectangle1, rectangle2) {
|
||||||
|
return (rectangle1.x_ < rectangle2.x_ + rectangle2.width_
|
||||||
|
&& rectangle1.x_ + rectangle1.width_ > rectangle2.x_
|
||||||
|
&& rectangle1.y_ < rectangle2.y_ + rectangle2.height_
|
||||||
|
&& rectangle1.y_ + rectangle1.height_ > rectangle2.y_);
|
||||||
|
}
|
||||||
|
function collisionRectanglePoint(rectangle, point) {
|
||||||
|
return (point.x_ >= rectangle.x_ && point.x_ <= rectangle.x_ + rectangle.width_
|
||||||
|
&& point.y_ >= rectangle.y_ && point.y_ <= rectangle.y_ + rectangle.height_);
|
||||||
|
}
|
||||||
|
function collisionPointPoint(point1, point2) {
|
||||||
|
let dx = point1.x_ - point2.x_;
|
||||||
|
let dy = point1.y_ - point2.y_;
|
||||||
|
let distance = dx * dx + dy * dy;
|
||||||
|
return (distance < 1);
|
||||||
|
}
|
||||||
|
})(Sprite || (Sprite = {}));
|
||||||
|
After Width: | Height: | Size: 304 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 461 KiB |
|
After Width: | Height: | Size: 190 KiB |
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Template Jeu</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="jeu.css"/>
|
||||||
|
<script src="Sprite.js"></script>
|
||||||
|
<script src="Anime.js"></script>
|
||||||
|
<script src="Scene.js"></script>
|
||||||
|
<script src="Jeu.js"></script>
|
||||||
|
<script src="Balle.js"></script>
|
||||||
|
<script src="Palet.js"></script>
|
||||||
|
|
||||||
|
<!-- Inclure ici les fichiers JavaScript necessaires a la scene. -->
|
||||||
|
<script>
|
||||||
|
let scene;
|
||||||
|
|
||||||
|
function load() {
|
||||||
|
scene = new Jeu(document.getElementById("scene"));
|
||||||
|
scene.start();
|
||||||
|
scene.resize();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body onload="load()" onresize="scene.resize()">
|
||||||
|
<div id="scene">
|
||||||
|
<!-- Definir ici les elements HTML qui seront manipules dans la scene. -->
|
||||||
|
<div id="jeu"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Le code ci-dessous permet affiche un bouton pour le plein ecran -->
|
||||||
|
<!-- <div id="fullscreen" onmousedown="scene.toggleFullscreen(event);">F</div> -->
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
body {
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
background-image: url(background.jpg);
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scene {
|
||||||
|
user-select: none;
|
||||||
|
/*overflow: hidden;*/
|
||||||
|
|
||||||
|
background-color: orangered;
|
||||||
|
box-shadow: 12px 12px 4px rgba(150,150,150,0.75);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brique {
|
||||||
|
background-color: greenyellow;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scene.fullscreen {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fullscreen {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
width: 2em;
|
||||||
|
height: 1.2em;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
box-shadow: 4px 4px 2px rgba(0,0,0,0.2);
|
||||||
|
border-radius: 0.6em;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jeu {
|
||||||
|
background-image: url("fond.jpg");
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,33 @@
|
|||||||
|
class Anime extends Sprite {
|
||||||
|
|
||||||
|
public xmin_ : number;
|
||||||
|
public xmax_ : number;
|
||||||
|
public ymin_ : number;
|
||||||
|
public ymax_ : number;
|
||||||
|
|
||||||
|
public constructor(element : HTMLElement) {
|
||||||
|
super(element);
|
||||||
|
|
||||||
|
this.xmin_ = 0;
|
||||||
|
this.xmax_ = 0;
|
||||||
|
this.ymin_ = 0;
|
||||||
|
this.ymax_ = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
public setLimites(zone : Sprite) {
|
||||||
|
|
||||||
|
this.xmin_ = zone.getX();
|
||||||
|
this.xmax_ = zone.getX() + zone.getWidth() - this.getWidth();
|
||||||
|
this.ymin_ = zone.getY();
|
||||||
|
this.ymax_ = zone.getY() + zone.getHeight() - this.getHeight();
|
||||||
|
}
|
||||||
|
|
||||||
|
public animer() {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public figer() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,153 @@
|
|||||||
|
class Balle extends Anime {
|
||||||
|
//public xmin_ : number;
|
||||||
|
//public xmax_ : number;
|
||||||
|
//public ymin_ : number;
|
||||||
|
//public ymax_ : number;
|
||||||
|
|
||||||
|
public vx : number;
|
||||||
|
public vy : number;
|
||||||
|
public vitesseinitiale : number;
|
||||||
|
public multiplicateur : number;
|
||||||
|
public vitesseMax : number;
|
||||||
|
private coller : boolean;
|
||||||
|
private ecouteurSouris : any;
|
||||||
|
|
||||||
|
private timerAnimation : number;
|
||||||
|
private scene_ : Jeu;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public constructor(element : HTMLElement, scene : Jeu) {
|
||||||
|
super(element);
|
||||||
|
this.setImage("balle.png",50,50);
|
||||||
|
|
||||||
|
//this.xmin_ = 0;
|
||||||
|
//this.xmax_ = 0;
|
||||||
|
//this.ymin_ = 0;
|
||||||
|
//this.ymax_ = 0;
|
||||||
|
//this.timerAnimation = 0;
|
||||||
|
|
||||||
|
this.vitesseinitiale= 5;
|
||||||
|
|
||||||
|
this.initVitesse(this.vitesseinitiale);
|
||||||
|
|
||||||
|
this.scene_ = scene;
|
||||||
|
this.coller = true;
|
||||||
|
|
||||||
|
this.ecouteurSouris = (evt : MouseEvent) => (this.coller = false);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public override animer() {
|
||||||
|
this.timerAnimation = setInterval( () => {this.bouger()},1000/60);
|
||||||
|
window.addEventListener("mousedown", this.ecouteurSouris)
|
||||||
|
}
|
||||||
|
|
||||||
|
public override figer() {
|
||||||
|
clearInterval(this.timerAnimation);
|
||||||
|
window.removeEventListener("mousedown", this.ecouteurSouris)
|
||||||
|
}
|
||||||
|
|
||||||
|
private nx_ : number;
|
||||||
|
private ny_ : number;
|
||||||
|
|
||||||
|
private bouger() {
|
||||||
|
|
||||||
|
if (this.coller) {
|
||||||
|
this.nx_= this.scene_.palet_.getX() + this.scene_.palet_.getWidth()/2 - this.getWidth()/2;
|
||||||
|
this.ny_= this.scene_.palet_.getY() - this.getHeight();
|
||||||
|
|
||||||
|
this.setXY(this.nx_,this.ny_)
|
||||||
|
}
|
||||||
|
|
||||||
|
else {
|
||||||
|
|
||||||
|
this.nx_ = this.getX() + this.vx;
|
||||||
|
this.ny_ = this.getY() + this.vy;
|
||||||
|
|
||||||
|
this.rebondirBordure();
|
||||||
|
this.rebondirPalet();
|
||||||
|
this.rebondirBriques();
|
||||||
|
|
||||||
|
this.setXY(this.nx_, this.ny_);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private vitesse() {
|
||||||
|
this.vitesseMax = 15;
|
||||||
|
this.multiplicateur = 1.05;
|
||||||
|
this.vx *= this.multiplicateur;
|
||||||
|
this.vy*= this.multiplicateur;
|
||||||
|
if (this.getVitesse() >= this.vitesseMax) {
|
||||||
|
this.vx = this.vitesseMax;
|
||||||
|
this.vy = this.vitesseMax;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private rebondirBordure() {
|
||||||
|
if (this.nx_ >= this.xmax_) {
|
||||||
|
this.nx_ = this.xmax_;
|
||||||
|
this.vx *= -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
else if (this.nx_ <= this.xmin_) {
|
||||||
|
this.nx_ = this.xmin_
|
||||||
|
this.vx *= -1 ;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.ny_ >= this.ymax_) {
|
||||||
|
this.figer();
|
||||||
|
this.scene_.palet_.figer();
|
||||||
|
}
|
||||||
|
|
||||||
|
else if (this.ny_ <= this.ymin_) {
|
||||||
|
this.ny_ = this.ymin_;
|
||||||
|
this.vy *=-1 ;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
private rebondirPalet() {
|
||||||
|
|
||||||
|
if (Balle.collision(this.getCircle(),this.scene_.palet_.getRectangle())) {
|
||||||
|
this.ny_ = this.scene_.palet_.getY() - this.getHeight();
|
||||||
|
this.vy *= -1;
|
||||||
|
|
||||||
|
this.vitesse();
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
private rebondirBriques() {
|
||||||
|
|
||||||
|
for (let i : number = 0; i<this.scene_.brique_.length ; i++) {
|
||||||
|
if (Balle.collision(this.getCircle(),this.scene_.brique_[i].getRectangle())) {
|
||||||
|
|
||||||
|
//this.ny_ = this.scene_.brique_[i].getY() - this.getHeight();
|
||||||
|
this.vy *= -1;
|
||||||
|
this.scene_.removeChild(this.scene_.brique_[i]);
|
||||||
|
this.scene_.brique_[i] = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public initVitesse(v: number) {
|
||||||
|
this.vx = 4*Math.random() -2;
|
||||||
|
this.vy = -2;
|
||||||
|
let vr : number = Math.sqrt(this.vx*this.vx + this.vy*this.vy);
|
||||||
|
|
||||||
|
this.vx = this.vx/vr * v;
|
||||||
|
this.vy = this.vy/vr * v;
|
||||||
|
|
||||||
|
console.log(this.vitesse())
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public getVitesse() {
|
||||||
|
return Math.sqrt(this.vx*this.vx + this.vy * this.vy);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
//==================================================================================================
|
||||||
|
// ANIMATION AVEC TYPESCRIPT Jeu.ts
|
||||||
|
//==================================================================================================
|
||||||
|
|
||||||
|
// Classe J e u //---------------------------------------------------------------------------------
|
||||||
|
class Jeu extends Scene {
|
||||||
|
//----------------------------------------------------------------------------------------Attributs
|
||||||
|
/* Declarer ici les attributs de la scene. */
|
||||||
|
public balle_ : Balle;
|
||||||
|
public palet_ : Palet;
|
||||||
|
public brique_ : Array<Sprite>;
|
||||||
|
|
||||||
|
public zone_ : Sprite;
|
||||||
|
|
||||||
|
//-------------------------------------------------------------------------------------Constructeur
|
||||||
|
public constructor(element : HTMLElement) {
|
||||||
|
super(element,false);
|
||||||
|
/* Ecrire ici le code qui initialise la scene. */
|
||||||
|
|
||||||
|
//Création de la zone de jeu
|
||||||
|
this.zone_= new Sprite (document.getElementById("jeu"));
|
||||||
|
this.zone_.setXY(10,10);
|
||||||
|
this.zone_.setWidth(this.getWidth()-20);
|
||||||
|
this.zone_.setHeight(this.getHeight()-20);
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------------start
|
||||||
|
public override start() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//Création de la balle
|
||||||
|
this.balle_ = new Balle (document.createElement("img"), this);
|
||||||
|
this.balle_.setImage("balle.png",25,25);
|
||||||
|
this.balle_.setXY(this.getWidth() /2 - this.balle_.getWidth() /2, this.getHeight() /2 - this.balle_.getHeight() /2);
|
||||||
|
this.appendChild(this.balle_);
|
||||||
|
|
||||||
|
//Paramètre de la balle
|
||||||
|
//let balle2 : Balle = new Balle(document.createElement("img"));
|
||||||
|
//this.appendChild(balle2);
|
||||||
|
this.balle_.setLimites(this.zone_);
|
||||||
|
this.balle_.setXY(this.balle_.xmax_, this.balle_.ymax_);
|
||||||
|
|
||||||
|
//setTimeout( () => {this.balle_.figer()},1000);
|
||||||
|
|
||||||
|
//Création du palet
|
||||||
|
this.palet_ = new Palet (document.createElement("img"));
|
||||||
|
this.palet_.setImage("palet.png",100,15);
|
||||||
|
this.palet_.setLimites(this.zone_);
|
||||||
|
this.palet_.setXY(this.getWidth() /2 - this.palet_.getWidth() /2, this.getHeight() - 75);
|
||||||
|
this.appendChild(this.palet_);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.brique_ = [];
|
||||||
|
|
||||||
|
let nbColonnes : number = 5;
|
||||||
|
let nbLignes : number = 4;
|
||||||
|
let sx : number = this.zone_.getWidth()/ (nbColonnes+1);
|
||||||
|
let sy : number = this.zone_.getHeight()*0.4 / (nbLignes+1);
|
||||||
|
|
||||||
|
for (let i : number = 0; i < nbLignes; i++) {
|
||||||
|
|
||||||
|
for (let j : number = 0; j < nbColonnes; j++) {
|
||||||
|
let brique = new Sprite(document.createElement("div"));
|
||||||
|
brique.setDimension(40,24);
|
||||||
|
brique.getElement().className = "brique";
|
||||||
|
|
||||||
|
brique.setImage("brique.png",40,24);
|
||||||
|
brique.setX((j+1) * sx + this.zone_.getX() - brique.getWidth()/2);
|
||||||
|
brique.setY((i+1) * sy + this.zone_.getY() - brique.getHeight()/2);
|
||||||
|
|
||||||
|
this.appendChild(brique);
|
||||||
|
this.brique_.push(brique);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.palet_.animer();
|
||||||
|
this.balle_.animer();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------------pause
|
||||||
|
public override pause() {
|
||||||
|
/* Ecrire ici le code qui met la scene en pause. */
|
||||||
|
}
|
||||||
|
|
||||||
|
//------------------------------------------------------------------------------------------unpause
|
||||||
|
public override unpause() {
|
||||||
|
/* Ecrire ici le code qui sort la scene de la pause. */
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------------clean
|
||||||
|
public override clean() {
|
||||||
|
/* Ecrire ici le code qui nettoie la scene en vue d'un redemarrage. */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fin //-------------------------------------------------------------------------------------------
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
class Palet extends Anime {
|
||||||
|
|
||||||
|
private ecouteurSuivre : any;
|
||||||
|
|
||||||
|
public constructor(element : HTMLElement) {
|
||||||
|
super(element);
|
||||||
|
this.setImage("palet.png",700,200);
|
||||||
|
|
||||||
|
this.ecouteurSuivre = (evt : MouseEvent) => {this.suivre(evt)};
|
||||||
|
}
|
||||||
|
|
||||||
|
public override animer() {
|
||||||
|
window.addEventListener("mousemove", this.ecouteurSuivre);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override figer() {
|
||||||
|
window.removeEventListener("mousemove", this.ecouteurSuivre);
|
||||||
|
}
|
||||||
|
|
||||||
|
private suivre(evt : MouseEvent) {
|
||||||
|
let nx : number = evt.clientX - this.getParent().getX() - this.getWidth()/2;
|
||||||
|
|
||||||
|
if (nx <= this.xmin_) nx = this.xmin_;
|
||||||
|
if (nx >= this.xmax_) nx = this.xmax_;
|
||||||
|
|
||||||
|
console.log(this.xmax_);
|
||||||
|
|
||||||
|
this.setX(nx);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
//==================================================================================================
|
||||||
|
// ANIMATION WITH TYPESCRIPT Scene.ts
|
||||||
|
// By Bruno Bachelet
|
||||||
|
//==================================================================================================
|
||||||
|
// Copyright (c) 2017-2023
|
||||||
|
// Bruno Bachelet - bruno@nawouak.net - http://www.nawouak.net
|
||||||
|
//
|
||||||
|
// This program is free software; you can redistribute it and/or modify it
|
||||||
|
// under the terms of the GNU Library General Public License as published by the
|
||||||
|
// Free Software Foundation; either version 2 of the License, or (at your option)
|
||||||
|
// any later version.
|
||||||
|
//
|
||||||
|
// This program is distributed in the hope that it will be useful, but WITHOUT
|
||||||
|
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||||
|
// FITNESS FOR A PARTICULAR PURPOSE. See the GNU Library General Public License
|
||||||
|
// for more details (http://www.gnu.org).
|
||||||
|
|
||||||
|
// S c e n e Class //------------------------------------------------------------------------------
|
||||||
|
class Scene extends Sprite {
|
||||||
|
//---------------------------------------------------------------------------------------Attributes
|
||||||
|
private resize_ : boolean;
|
||||||
|
private scale_ : number;
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------Constructor
|
||||||
|
public constructor(element : HTMLElement, resize : boolean) {
|
||||||
|
super(element);
|
||||||
|
|
||||||
|
this.resize_ = resize;
|
||||||
|
this.scale_ = 1;
|
||||||
|
|
||||||
|
let box : DOMRect = this.getParentNode().getBoundingClientRect();
|
||||||
|
|
||||||
|
this.setDimension(640,480);
|
||||||
|
this.setX((box.width - this.getWidth()) / 2);
|
||||||
|
this.setY((box.height - this.getHeight()) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
//-------------------------------------------------------------------------------------isFullscreen
|
||||||
|
public isFullscreen() : boolean { return (document.fullscreenElement != null); }
|
||||||
|
|
||||||
|
//---------------------------------------------------------------------------------toggleFullscreen
|
||||||
|
public toggleFullscreen(event : Event) {
|
||||||
|
if (this.isFullscreen()) {
|
||||||
|
this.getElement().className = "";
|
||||||
|
document.exitFullscreen();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.getElement().className = "fullscreen";
|
||||||
|
document.body.requestFullscreen();
|
||||||
|
}
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
//-------------------------------------------------------------------------------------------resize
|
||||||
|
public resize() {
|
||||||
|
let space : number = (this.isFullscreen() ? 0 : 50);
|
||||||
|
let box : DOMRect = this.getParentNode().getBoundingClientRect();
|
||||||
|
let rx = this.getWidth() / (box.width - space);
|
||||||
|
let ry = this.getHeight() / (box.height - space);
|
||||||
|
let s = 1 / Math.max(rx,ry);
|
||||||
|
|
||||||
|
if (this.resize_ || this.isFullscreen()) {
|
||||||
|
this.getStyle().transform = "scale(" + s + ")";
|
||||||
|
this.scale_ = s;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.getStyle().transform = "";
|
||||||
|
this.scale_ = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setX((box.width - this.getWidth())/2);
|
||||||
|
this.setY((box.height - this.getHeight())/2);
|
||||||
|
}
|
||||||
|
|
||||||
|
//-------------------------------------------------------------------------------------scaledMouseX
|
||||||
|
public override scaledMouseX(x : number) : number {
|
||||||
|
return (this.getCenterX() + (x - this.getCenterX())/this.scale_);
|
||||||
|
}
|
||||||
|
|
||||||
|
//-------------------------------------------------------------------------------------scaledMouseY
|
||||||
|
public override scaledMouseY(y : number) : number {
|
||||||
|
return (this.getCenterY() + (y - this.getCenterY())/this.scale_);
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------------start
|
||||||
|
public start() {}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------------pause
|
||||||
|
public pause() {}
|
||||||
|
|
||||||
|
//------------------------------------------------------------------------------------------unpause
|
||||||
|
public unpause() {}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------------clean
|
||||||
|
public clean() {
|
||||||
|
while (this.getChildren().length > 0) this.removeChild(this.getChildren()[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
//------------------------------------------------------------------------------------------restart
|
||||||
|
public restart() {
|
||||||
|
this.pause();
|
||||||
|
this.clean();
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// End //-------------------------------------------------------------------------------------------
|
||||||
@ -0,0 +1,468 @@
|
|||||||
|
//==================================================================================================
|
||||||
|
// ANIMATION WITH TYPESCRIPT Sprite.ts
|
||||||
|
// By Bruno Bachelet
|
||||||
|
//==================================================================================================
|
||||||
|
// Copyright (c) 2017-2023
|
||||||
|
// Bruno Bachelet - bruno@nawouak.net - http://www.nawouak.net
|
||||||
|
//
|
||||||
|
// This program is free software; you can redistribute it and/or modify it
|
||||||
|
// under the terms of the GNU Library General Public License as published by the
|
||||||
|
// Free Software Foundation; either version 2 of the License, or (at your option)
|
||||||
|
// any later version.
|
||||||
|
//
|
||||||
|
// This program is distributed in the hope that it will be useful, but WITHOUT
|
||||||
|
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||||
|
// FITNESS FOR A PARTICULAR PURPOSE. See the GNU Library General Public License
|
||||||
|
// for more details (http://www.gnu.org).
|
||||||
|
|
||||||
|
// S p r i t e Class //----------------------------------------------------------------------------
|
||||||
|
class Sprite {
|
||||||
|
//---------------------------------------------------------------------------------------Attributes
|
||||||
|
private static counter_ : number = 0;
|
||||||
|
private static instances_ : Map<string,Sprite> = new Map<string,Sprite>();
|
||||||
|
|
||||||
|
private element_ : HTMLElement;
|
||||||
|
private parent_ : Sprite;
|
||||||
|
private children_ : Array<Sprite>;
|
||||||
|
private nativeParent_ : HTMLElement;
|
||||||
|
|
||||||
|
private x_ : number;
|
||||||
|
private y_ : number;
|
||||||
|
private width_ : number;
|
||||||
|
private height_ : number;
|
||||||
|
|
||||||
|
private rotation_ : number;
|
||||||
|
private opacity_ : number;
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------Constructor
|
||||||
|
public constructor(element : HTMLElement) {
|
||||||
|
this.element_ = element;
|
||||||
|
this.parent_ = null;
|
||||||
|
this.children_ = new Array<Sprite>();
|
||||||
|
this.nativeParent_ = (<HTMLElement>(element.parentNode));
|
||||||
|
|
||||||
|
if (element.dataset.spriteId)
|
||||||
|
console.error("HTML element #" + element.dataset.spriteId
|
||||||
|
+ " '" + element.id + "' already associated with a sprite.");
|
||||||
|
|
||||||
|
this.setId();
|
||||||
|
|
||||||
|
if (this.nativeParent_ != null && this.nativeParent_.tagName.toLowerCase() != "body") {
|
||||||
|
let parent = null;
|
||||||
|
|
||||||
|
if (this.nativeParent_.dataset.spriteId)
|
||||||
|
parent = Sprite.instances_.get(this.nativeParent_.dataset.spriteId);
|
||||||
|
else
|
||||||
|
parent = new Sprite(this.nativeParent_);
|
||||||
|
|
||||||
|
parent.appendChild(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
let box : DOMRect = element.getBoundingClientRect();
|
||||||
|
|
||||||
|
this.x_ = box.left;
|
||||||
|
this.y_ = box.top;
|
||||||
|
this.width_ = box.width;
|
||||||
|
this.height_ = box.height;
|
||||||
|
|
||||||
|
if (this.parent_ != null) {
|
||||||
|
box = this.parent_.element_.getBoundingClientRect();
|
||||||
|
this.x_ -= box.left;
|
||||||
|
this.y_ -= box.top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
catch(e) {
|
||||||
|
this.x_ = 0;
|
||||||
|
this.y_ = 0;
|
||||||
|
this.width_ = 0;
|
||||||
|
this.height_ = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setRotation(0);
|
||||||
|
this.setOpacity(1);
|
||||||
|
|
||||||
|
this.element_.style.position = "absolute";
|
||||||
|
|
||||||
|
if (this.element_ instanceof HTMLImageElement)
|
||||||
|
(<HTMLImageElement>(this.element_)).draggable = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//-----------------------------------------------------------------------------------------------ID
|
||||||
|
public getId() : string { return this.element_.dataset.spriteId; }
|
||||||
|
|
||||||
|
private setId() {
|
||||||
|
if (!this.element_.dataset.spriteId) {
|
||||||
|
this.element_.dataset.spriteId = String(++Sprite.counter_);
|
||||||
|
Sprite.instances_.set(this.element_.dataset.spriteId,this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private removeId() {
|
||||||
|
if (this.element_.dataset.spriteId) {
|
||||||
|
Sprite.instances_.delete(this.element_.dataset.spriteId);
|
||||||
|
this.element_.removeAttribute("data-sprite-id");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//----------------------------------------------------------------------------------------------Log
|
||||||
|
public static logInstances() { for (let sprite of Sprite.instances_) console.log(sprite); }
|
||||||
|
|
||||||
|
public log() {
|
||||||
|
let message : string;
|
||||||
|
|
||||||
|
message = `${this.getId()}`;
|
||||||
|
message += `{${this.x_};${this.y_}`;
|
||||||
|
message += ` ${this.width_}x${this.height_}`;
|
||||||
|
message += ` ${this.rotation_}°`;
|
||||||
|
message += ` [${this.children_.length}]`;
|
||||||
|
message += " -> "+(this.parent_ == null ? "null" : `#${this.parent_.getId()}`);
|
||||||
|
message += "}";
|
||||||
|
|
||||||
|
console.log(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
//------------------------------------------------------------------------------------------Element
|
||||||
|
public getElement() : HTMLElement { return this.element_; }
|
||||||
|
|
||||||
|
//----------------------------------------------------------------------------------------Shortcuts
|
||||||
|
public getStyle() : CSSStyleDeclaration { return this.element_.style }
|
||||||
|
public getBoundingClientRect() : DOMRect { return this.element_.getBoundingClientRect(); }
|
||||||
|
public getParentNode() : HTMLElement { return <HTMLElement>(this.element_.parentNode); }
|
||||||
|
|
||||||
|
//-------------------------------------------------------------------------------------------Parent
|
||||||
|
public getParent() : Sprite { return this.parent_; }
|
||||||
|
|
||||||
|
//-----------------------------------------------------------------------------------------Children
|
||||||
|
public getChildren() : Array<Sprite> { return this.children_; }
|
||||||
|
|
||||||
|
public appendChild(sprite : Sprite|HTMLElement) {
|
||||||
|
if (sprite instanceof Sprite) {
|
||||||
|
if (sprite.parent_ != null)
|
||||||
|
console.error(`HTML element #${sprite.getId()} already has a parent.`);
|
||||||
|
else {
|
||||||
|
if (sprite.nativeParent_ == null) this.element_.appendChild(sprite.element_);
|
||||||
|
sprite.parent_ = this;
|
||||||
|
this.children_.push(sprite);
|
||||||
|
sprite.setId();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (sprite instanceof HTMLElement) this.element_.appendChild(sprite);
|
||||||
|
}
|
||||||
|
|
||||||
|
public removeChild(sprite : Sprite|HTMLElement) {
|
||||||
|
if (sprite instanceof Sprite) {
|
||||||
|
if (sprite.parent_ != this)
|
||||||
|
console.error(`Attempt to remove HTML element #${sprite.getId()} from the wrong parent.`);
|
||||||
|
else {
|
||||||
|
if (sprite.nativeParent_ == null) this.element_.removeChild(sprite.element_);
|
||||||
|
sprite.parent_ = null;
|
||||||
|
sprite.removeId();
|
||||||
|
|
||||||
|
for (let i : number = 0; i < this.children_.length; ++i) {
|
||||||
|
if (this.children_[i] == sprite) {
|
||||||
|
let last : Sprite = this.children_.pop();
|
||||||
|
if (i < this.children_.length) this.children_[i] = last;
|
||||||
|
i = this.children_.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (sprite instanceof HTMLElement) this.element_.removeChild(sprite);
|
||||||
|
}
|
||||||
|
|
||||||
|
//-----------------------------------------------------------------------------------------Position
|
||||||
|
public getX() : number { return this.x_; }
|
||||||
|
public getY() : number { return this.y_; }
|
||||||
|
|
||||||
|
public setX(x : number) {
|
||||||
|
this.element_.style.left = x + "px";
|
||||||
|
this.x_ = x;
|
||||||
|
}
|
||||||
|
|
||||||
|
public setY(y : number) {
|
||||||
|
this.element_.style.top = y + "px";
|
||||||
|
this.y_ = y;
|
||||||
|
}
|
||||||
|
|
||||||
|
public setXY(x : number, y : number) {
|
||||||
|
this.element_.style.left = x + "px";
|
||||||
|
this.element_.style.top = y + "px";
|
||||||
|
this.x_ = x;
|
||||||
|
this.y_ = y;
|
||||||
|
}
|
||||||
|
|
||||||
|
//----------------------------------------------------------------------------------------Dimension
|
||||||
|
public getWidth() : number { return this.width_; }
|
||||||
|
public getHeight() : number { return this.height_; }
|
||||||
|
|
||||||
|
public setWidth(width : number) {
|
||||||
|
this.element_.style.width = width + "px";
|
||||||
|
this.width_ = width;
|
||||||
|
|
||||||
|
if (this.element_ instanceof HTMLCanvasElement)
|
||||||
|
(<HTMLCanvasElement>(this.element_)).width = width;
|
||||||
|
}
|
||||||
|
|
||||||
|
public setHeight(height : number) {
|
||||||
|
this.element_.style.height = height + "px";
|
||||||
|
this.height_ = height;
|
||||||
|
|
||||||
|
if (this.element_ instanceof HTMLCanvasElement)
|
||||||
|
(<HTMLCanvasElement>(this.element_)).height = height;
|
||||||
|
}
|
||||||
|
|
||||||
|
public setDimension(width : number, height : number) {
|
||||||
|
this.element_.style.width = width + "px";
|
||||||
|
this.element_.style.height = height + "px";
|
||||||
|
this.width_ = width;
|
||||||
|
this.height_ = height;
|
||||||
|
|
||||||
|
if (this.element_ instanceof HTMLCanvasElement) {
|
||||||
|
(<HTMLCanvasElement>(this.element_)).width = width;
|
||||||
|
(<HTMLCanvasElement>(this.element_)).height = height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//-----------------------------------------------------------------------------------------Geometry
|
||||||
|
public getCenterX() : number { return (this.x_ + this.width_/2); }
|
||||||
|
public getCenterY() : number { return (this.y_ + this.height_/2); }
|
||||||
|
public getLeft() : number { return this.x_; }
|
||||||
|
public getRight() : number { return (this.x_ + this.width_); }
|
||||||
|
public getTop() : number { return this.y_; }
|
||||||
|
public getBottom() : number { return (this.y_ + this.height_); }
|
||||||
|
|
||||||
|
public getPoint() : Sprite.Point {
|
||||||
|
return new Sprite.Point(this.x_ + this.width_/2,
|
||||||
|
this.y_ + this.height_/2);
|
||||||
|
}
|
||||||
|
|
||||||
|
public getRectangle() : Sprite.Rectangle {
|
||||||
|
return new Sprite.Rectangle(this.x_, this.y_,
|
||||||
|
this.width_, this.height_);
|
||||||
|
}
|
||||||
|
|
||||||
|
public getCircle(ratio : number = 1) : Sprite.Circle {
|
||||||
|
return new Sprite.Circle(this.x_ + this.width_/2,
|
||||||
|
this.y_ + this.height_/2,
|
||||||
|
ratio*this.width_/2);
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------------Image
|
||||||
|
public setImage(url : string, width : number, height : number) {
|
||||||
|
if (this.element_ instanceof HTMLImageElement) {
|
||||||
|
(<HTMLImageElement>(this.element_)).src = url;
|
||||||
|
this.setWidth(width);
|
||||||
|
this.setHeight(height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//------------------------------------------------------------------------------------------Context
|
||||||
|
public getContext() : Sprite.Context2D {
|
||||||
|
if (this.element_ instanceof HTMLCanvasElement)
|
||||||
|
return (<HTMLCanvasElement>(this.element_)).getContext("2d");
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
//---------------------------------------------------------------------------------------Visibility
|
||||||
|
// public hide() { this.element_.style.display = "none"; }
|
||||||
|
// public show() { this.element_.style.display = "block"; }
|
||||||
|
// public isVisible() : boolean { return (this.element_.style.display != "none"); }
|
||||||
|
|
||||||
|
public hide() { this.element_.style.visibility = "hidden"; }
|
||||||
|
public show() { this.element_.style.visibility = "visible"; }
|
||||||
|
public isVisible() : boolean { return (this.element_.style.visibility != "hidden"); }
|
||||||
|
|
||||||
|
//-----------------------------------------------------------------------------------------Rotation
|
||||||
|
public getRotation() : number { return this.rotation_; }
|
||||||
|
|
||||||
|
public setRotation(angle : number) {
|
||||||
|
this.rotation_ = angle;
|
||||||
|
this.element_.style.transform = "rotate(" + angle + "deg)";
|
||||||
|
}
|
||||||
|
|
||||||
|
public setRotationPivot(x : number, y : number) {
|
||||||
|
this.element_.style.transformOrigin = x + "px " + y + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
//------------------------------------------------------------------------------------------Opacity
|
||||||
|
public getOpacity() : number { return this.opacity_; }
|
||||||
|
|
||||||
|
public setOpacity(opacity : number) {
|
||||||
|
this.opacity_ = opacity;
|
||||||
|
this.element_.style.opacity = "" + this.opacity_;
|
||||||
|
}
|
||||||
|
|
||||||
|
//-------------------------------------------------------------------------------------------Events
|
||||||
|
public addEventListener(type : string, action : any) {
|
||||||
|
this.element_.addEventListener(type,action);
|
||||||
|
}
|
||||||
|
|
||||||
|
public removeEventListener(type : string, action : any) {
|
||||||
|
this.element_.removeEventListener(type,action);
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------------Mouse
|
||||||
|
public scaledMouseX(x : number) : number { return x; }
|
||||||
|
public scaledMouseY(y : number) : number { return y; }
|
||||||
|
|
||||||
|
//-----------------------------------------------------------------------------------------Follower
|
||||||
|
public follow(target : Sprite, x : number, y: number, frequency : number) : number {
|
||||||
|
return setInterval( () => { this.placeOnTarget(target,x,y); }, frequency);
|
||||||
|
}
|
||||||
|
|
||||||
|
private placeOnTarget(target : Sprite, x : number, y : number) {
|
||||||
|
let distance : number = Math.sqrt(x*x + y*y);
|
||||||
|
let angle1 : number = target.getRotation()/180 * Math.PI;
|
||||||
|
let angle2 : number = (y < 0 ? -Math.acos(x/distance) : Math.acos(x/distance));
|
||||||
|
|
||||||
|
x = distance * Math.cos(angle1+angle2);
|
||||||
|
y = distance * Math.sin(angle1+angle2);
|
||||||
|
|
||||||
|
this.setX(target.getCenterX() - this.getWidth()/2 + x);
|
||||||
|
this.setY(target.getCenterY() - this.getHeight()/2 + y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Type Aliases //----------------------------------------------------------------------------------
|
||||||
|
namespace Sprite {
|
||||||
|
export type Context2D = CanvasRenderingContext2D;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Collision Tests //-------------------------------------------------------------------------------
|
||||||
|
namespace Sprite {
|
||||||
|
//----------------------------------------------------------------------------------------Collision
|
||||||
|
export function collision(a : Shape, b : Shape) {
|
||||||
|
if (a instanceof Circle) {
|
||||||
|
if (b instanceof Circle)
|
||||||
|
return collisionCircleCircle(<Circle>a,<Circle>b);
|
||||||
|
else if (b instanceof Rectangle)
|
||||||
|
return collisionCircleRectangle(<Circle>a,<Rectangle>b);
|
||||||
|
else if (b instanceof Point)
|
||||||
|
return collisionCirclePoint(<Circle>a,<Point>b);
|
||||||
|
}
|
||||||
|
else if (a instanceof Rectangle) {
|
||||||
|
if (b instanceof Circle)
|
||||||
|
return collisionCircleRectangle(<Circle>b,<Rectangle>a);
|
||||||
|
else if (b instanceof Rectangle)
|
||||||
|
return collisionRectangleRectangle(<Rectangle>a,<Rectangle>b);
|
||||||
|
else if (b instanceof Point)
|
||||||
|
return collisionRectanglePoint(<Rectangle>a,<Point>b);
|
||||||
|
}
|
||||||
|
else if (a instanceof Point) {
|
||||||
|
if (b instanceof Circle)
|
||||||
|
return collisionCirclePoint(<Circle>b,<Point>a);
|
||||||
|
else if (b instanceof Rectangle)
|
||||||
|
return collisionRectanglePoint(<Rectangle>b,<Point>a);
|
||||||
|
else if (b instanceof Point)
|
||||||
|
return collisionPointPoint(<Point>a,<Point>b);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------Shape Class
|
||||||
|
export class Shape {}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------------------Point Class
|
||||||
|
export class Point extends Shape {
|
||||||
|
public x_;
|
||||||
|
public y_;
|
||||||
|
|
||||||
|
public constructor(x : number, y : number) {
|
||||||
|
super();
|
||||||
|
this.x_ = x;
|
||||||
|
this.y_ = y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//-------------------------------------------------------------------------------------Circle Class
|
||||||
|
export class Circle extends Shape {
|
||||||
|
public cx_ : number;
|
||||||
|
public cy_ : number;
|
||||||
|
public radius_ : number;
|
||||||
|
|
||||||
|
public constructor(centerX : number, centerY : number, radius : number) {
|
||||||
|
super();
|
||||||
|
this.cx_ = centerX;
|
||||||
|
this.cy_ = centerY;
|
||||||
|
this.radius_ = radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//---------------------------------------------------------------------------------Classe Rectangle
|
||||||
|
export class Rectangle extends Shape {
|
||||||
|
public x_ : number;
|
||||||
|
public y_ : number;
|
||||||
|
public width_ : number;
|
||||||
|
public height_ : number;
|
||||||
|
|
||||||
|
public constructor(cornerX : number, cornerY : number, width : number, height : number) {
|
||||||
|
super();
|
||||||
|
this.x_ = cornerX;
|
||||||
|
this.y_ = cornerY;
|
||||||
|
this.width_ = width;
|
||||||
|
this.height_ = height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//-----------------------------------------------------------------------Circle-Rectangle Collision
|
||||||
|
function collisionCircleRectangle(circle : Circle, rectangle : Rectangle) : boolean {
|
||||||
|
let px : number = Math.max(rectangle.x_,
|
||||||
|
Math.min(circle.cx_, rectangle.x_ + rectangle.width_));
|
||||||
|
let py : number = Math.max(rectangle.y_,
|
||||||
|
Math.min(circle.cy_, rectangle.y_ + rectangle.height_));
|
||||||
|
let dx : number = px - circle.cx_;
|
||||||
|
let dy : number = py - circle.cy_;
|
||||||
|
let distance : number = dx*dx + dy*dy;
|
||||||
|
let radius : number = circle.radius_ * circle.radius_;
|
||||||
|
|
||||||
|
return (distance < radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------------Circle-Circle Collision
|
||||||
|
function collisionCircleCircle(circle1 : Circle, circle2 : Circle) : boolean {
|
||||||
|
let dx : number = circle1.cx_ - circle2.cx_;
|
||||||
|
let dy : number = circle1.cy_ - circle2.cy_;
|
||||||
|
let distance : number = dx*dx + dy*dy;
|
||||||
|
let radius : number = circle1.radius_ + circle2.radius_;
|
||||||
|
|
||||||
|
return (distance < radius*radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
//---------------------------------------------------------------------------Circle-Point Collision
|
||||||
|
function collisionCirclePoint(circle : Circle, point : Point) : boolean {
|
||||||
|
let dx : number = point.x_ - circle.cx_;
|
||||||
|
let dy : number = point.y_ - circle.cy_;
|
||||||
|
let distance : number = dx*dx + dy*dy;
|
||||||
|
let radius : number = circle.radius_ * circle.radius_;
|
||||||
|
|
||||||
|
return (distance < radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
//--------------------------------------------------------------------Rectangle-Rectangle Collision
|
||||||
|
function collisionRectangleRectangle(rectangle1 : Rectangle,
|
||||||
|
rectangle2 : Rectangle) : boolean {
|
||||||
|
return (rectangle1.x_ < rectangle2.x_+rectangle2.width_
|
||||||
|
&& rectangle1.x_+rectangle1.width_ > rectangle2.x_
|
||||||
|
&& rectangle1.y_ < rectangle2.y_+rectangle2.height_
|
||||||
|
&& rectangle1.y_+rectangle1.height_ > rectangle2.y_);
|
||||||
|
}
|
||||||
|
|
||||||
|
//------------------------------------------------------------------------Rectangle-Point Collision
|
||||||
|
function collisionRectanglePoint(rectangle : Rectangle, point : Point) : boolean {
|
||||||
|
return (point.x_ >= rectangle.x_ && point.x_ <= rectangle.x_+rectangle.width_
|
||||||
|
&& point.y_ >= rectangle.y_ && point.y_ <= rectangle.y_+rectangle.height_);
|
||||||
|
}
|
||||||
|
|
||||||
|
//----------------------------------------------------------------------------Point-Point Collision
|
||||||
|
function collisionPointPoint(point1 : Point, point2 : Point) : boolean {
|
||||||
|
let dx : number = point1.x_ - point2.x_;
|
||||||
|
let dy : number = point1.y_ - point2.y_;
|
||||||
|
let distance : number = dx*dx + dy*dy;
|
||||||
|
|
||||||
|
return (distance < 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// End //-------------------------------------------------------------------------------------------
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES6",
|
||||||
|
"lib": [ "ES6", "DOM" ],
|
||||||
|
"strict": true,
|
||||||
|
"strictNullChecks": false,
|
||||||
|
"noImplicitOverride": true,
|
||||||
|
"removeComments": true,
|
||||||
|
"outDir": "build",
|
||||||
|
"rootDir": "source"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue