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