adrien/quatuor
adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

HTMLElement.prototype.addNewChild

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-04-22 10:40:12 +02:00
parent f7c81408bc
commit b91eaefb1f
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app.js
View File

@ -75,6 +75,15 @@ Array.prototype.rotate = function(rotation) { return [-rotation*this.y, rotat
Array.prototype.pick = function() { return this.splice(Math.floor(Math.random()*this.length), 1)[0] } Array.prototype.pick = function() { return this.splice(Math.floor(Math.random()*this.length), 1)[0] }
HTMLElement.prototype.addNewChild = function(tag, properties) {
let child = document.createElement(tag)
for (key in properties) {
child[key] = properties[key]
}
this.appendChild(child)
}
/* Classes */ /* Classes */
class Scheduler { class Scheduler {
constructor() { constructor() {
@ -445,7 +454,7 @@ class Stats {
this.lockDelay = 500 * Math.pow(0.9, level - 15) this.lockDelay = 500 * Math.pow(0.9, level - 15)
levelInput.value = level levelInput.value = level
levelCell.innerText = level levelCell.innerText = level
messagesSpan.addDiv({ className: "show-level-animation", innerHTML: `<h1>LEVEL<br/>${this.level}</h1>` }) messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>LEVEL<br/>${this.level}</h1>` })
} }
get level() { get level() {
@ -473,16 +482,16 @@ class Stats {
lockDown(nbClearedLines, tSpin) { lockDown(nbClearedLines, tSpin) {
// Cleared lines & T-Spin // Cleared lines & T-Spin
let patternScore = SCORES[tSpin][nbClearedLines] * this.level let patternScore = SCORES[tSpin][nbClearedLines] * this.level
if (tSpin) messagesSpan.addDiv({ if (tSpin) messagesSpan.addNewChild("div", {
className: "rotate-in-animation", className: "rotate-in-animation",
innerHTML: tSpin innerHTML: tSpin
}) })
if (nbClearedLines) messagesSpan.addDiv({ if (nbClearedLines) messagesSpan.addNewChild("div", {
className: "zoom-in-animation", className: "zoom-in-animation",
innerHTML: CLEARED_LINES_NAMES[nbClearedLines] innerHTML: CLEARED_LINES_NAMES[nbClearedLines]
}) })
if (patternScore) { if (patternScore) {
messagesSpan.addDiv({ messagesSpan.addNewChild("div", {
className: "zoom-in-animation", className: "zoom-in-animation",
style: "animation-delay: .2s", style: "animation-delay: .2s",
innerHTML: patternScore innerHTML: patternScore
@ -495,7 +504,7 @@ class Stats {
this.combo++ this.combo++
if (this.combo >= 1) { if (this.combo >= 1) {
let comboScore = (nbClearedLines == 1 ? 20 : 50) * this.combo * this.level let comboScore = (nbClearedLines == 1 ? 20 : 50) * this.combo * this.level
messagesSpan.addDiv({ messagesSpan.addNewChild("div", {
className: "zoom-in-animation", className: "zoom-in-animation",
style: "animation-delay: .4s", style: "animation-delay: .4s",
innerHTML: `COMBO x${this.combo}<br/>${comboScore}` innerHTML: `COMBO x${this.combo}<br/>${comboScore}`
@ -511,7 +520,7 @@ class Stats {
this.b2b++ this.b2b++
if (this.b2b >= 1) { if (this.b2b >= 1) {
let b2bScore = patternScore / 2 let b2bScore = patternScore / 2
messagesSpan.addDiv({ messagesSpan.addNewChild("div", {
className: "zoom-in-animation", className: "zoom-in-animation",
style: "animation-delay: .4s", style: "animation-delay: .4s",
innerHTML: `BACK TO BACK x${this.b2b}<br/>${b2bScore}` innerHTML: `BACK TO BACK x${this.b2b}<br/>${b2bScore}`
@ -542,14 +551,6 @@ messagesSpan.onanimationend = function(event) {
event.target.remove() event.target.remove()
} }
messagesSpan.addDiv = function(attributes) {
let div = document.createElement("div")
for (key in attributes) {
div[key] = attributes[key]
}
messagesSpan.appendChild(div)
}
let scheduler = new Scheduler() let scheduler = new Scheduler()
let settings = new Settings() let settings = new Settings()
let stats = new Stats() let stats = new Stats()
@ -769,7 +770,7 @@ function gameOver() {
scheduler.clearInterval(clock) scheduler.clearInterval(clock)
messagesSpan.onanimationend = null messagesSpan.onanimationend = null
messagesSpan.addDiv({ messagesSpan.addNewChild("div", {
className: "game-over-animation", className: "game-over-animation",
style: "opacity: 100%", style: "opacity: 100%",
innerHTML: "<h1>GAME<br/>OVER</h1>" innerHTML: "<h1>GAME<br/>OVER</h1>"