{%hackmd tXTfhDH6QTWNg5QB_ZtSuw %}
# 第n+1節
---
# NPM
----
npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.
---
# example
----
## bootstrap
(配合上上次的bootstrap)[https://www.npmjs.com/package/bootstrap]
----
## install
```shell
npm install bootstrap
```
----
## END
---
# deno
---
# 物件精靈
----
## Disclaimer
這是javascript補習班的爛東西(除非你喜歡fuck code不然不要用)
如果想要學正式的，去學(pixijs)[https://pixijs.com/]
----
## 基本原理
用``pos: fix``的``<img>``去做物件。
----
## setter/getter
----
```javascript=
class test{
}
let a=new test();
test.A="A";
```
----
```javascript=
class test{
get A() {
return this.A;
}
set A(x) {
console.log("AAA:",x);
this.A = x;
}
}
let a=new test();
test.A="A";
```
----
## 實作
```javascript
let spriteCount = 0;
class sprite {
constructor(x) {
let root = document.createElement("div")
root.classList.add("fix");
root.id = "sprite_" + spriteCount;
this.id = root.id;
spriteCount++;
root.innerHTML = `<img></img>`;
document.documentElement.append(root);
Object.assign(this, x);
}
update() {
let ele = document.querySelector("#" + this.id);
ele.style = `top:${this._y}px;left:${this._x}px`;
ele.children[0].width = this.width;
ele.children[0].height = this.height;
ele.children[0].src = this._img;
}
move(x, y) {
this.x = x;
this.y = y;
}
get img() {
return this._img;
}
set img(x) {
this._img = x;
this.update();
}
get visible() {
return this._visible;
}
set visible(x) {
this._visible = x;
this.update();
}
set width(x) {
this._width = x;
this.update();
}
get width() {
return this._width;
}
get height() {
return this._height;
}
set height(x) {
this._height = x;
this.update();
}
get y() {
return this._y;
}
set y(y) {
this._y = y;
this.update();
}
get x() {
return this._x;
}
set x(x) {
this._x = x;
this.update();
}
}
let test = new sprite({ x: 50, y: 50, width: 50, height: 50, img: "/source/dino.jpg" });
let counter = 0;
setInterval(() => {
const step = 12;
if (counter % step < step / 2) test.x += 5; else test.x -= 5;
counter = (counter + 1) % step;
}, 50);
```
---
# End
{"metaMigratedAt":"2023-06-16T16:53:32.438Z","metaMigratedFrom":"YAML","title":"第n+1節","breaks":true,"slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"6d8efe8e-dbdf-4e5a-8c38-356b0d1df76d\",\"add\":2875,\"del\":118}]"}