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

grab cursor

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-06-14 01:22:47 +02:00
parent 2ba22ee7da
commit af24f0a6ef
2 changed files with 174 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

344
app.js
View File

@ -2,11 +2,11 @@ import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js' import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import * as FPS from 'three/addons/libs/stats.module.js'; import * as FPS from 'three/addons/libs/stats.module.js';
let P = (x, y, z=0) => new THREE.Vector3(x, y, z) let P = (x, y, z = 0) => new THREE.Vector3(x, y, z)
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) { HTMLElement.prototype.addNewChild = function (tag, properties) {
let child = document.createElement(tag) let child = document.createElement(tag)
for (let key in properties) { for (let key in properties) {
child[key] = properties[key] child[key] = properties[key]
@ -28,55 +28,55 @@ const DELAY = {
const FACING = { const FACING = {
NORTH: 0, NORTH: 0,
EAST: 1, EAST: 1,
SOUTH: 2, SOUTH: 2,
WEST: 3, WEST: 3,
} }
const TRANSLATION = { const TRANSLATION = {
NONE: P( 0, 0), NONE: P(0, 0),
LEFT: P(-1, 0), LEFT: P(-1, 0),
RIGHT: P( 1, 0), RIGHT: P(1, 0),
DOWN: P( 0, -1), DOWN: P(0, -1),
} }
const ROTATION = { const ROTATION = {
CW: 1, // ClockWise CW: 1, // ClockWise
CCW: -1, // CounterClockWise CCW: -1, // CounterClockWise
} }
const T_SPIN = { const T_SPIN = {
NONE: "", NONE: "",
MINI: "PETITE<br/>PIROUETTE", MINI: "PETITE<br/>PIROUETTE",
T_SPIN: "PIROUETTE" T_SPIN: "PIROUETTE"
} }
// score = AWARDED_LINE_CLEARS[tSpin][nbClearedLines] // score = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
const AWARDED_LINE_CLEARS = { const AWARDED_LINE_CLEARS = {
[T_SPIN.NONE]: [0, 1, 3, 5, 8], [T_SPIN.NONE]: [0, 1, 3, 5, 8],
[T_SPIN.MINI]: [1, 2], [T_SPIN.MINI]: [1, 2],
[T_SPIN.T_SPIN]: [4, 8, 12, 16] [T_SPIN.T_SPIN]: [4, 8, 12, 16]
} }
const KEY_NAMES = { const KEY_NAMES = {
["ArrowLeft"]: "←", ["ArrowLeft"]: "←",
["ArrowRight"]: "→", ["ArrowRight"]: "→",
["ArrowUp"]: "↑", ["ArrowUp"]: "↑",
["ArrowDown"]: "↓", ["ArrowDown"]: "↓",
[" "]: "Espace", [" "]: "Espace",
["Escape"]: "Échap", ["Escape"]: "Échap",
["Enter"]: "Entrée", ["Enter"]: "Entrée",
["←"]: "ArrowLeft", ["←"]: "ArrowLeft",
["→"]: "ArrowRight", ["→"]: "ArrowRight",
["↑"]: "ArrowUp", ["↑"]: "ArrowUp",
["↓"]: "ArrowDown", ["↓"]: "ArrowDown",
["Espace"]: " ", ["Espace"]: " ",
["Échap"]: "Escape", ["Échap"]: "Escape",
["Entrée"]: "Enter", ["Entrée"]: "Enter",
} }
const CLEARED_LINES_NAMES = [ const CLEARED_LINES_NAMES = [
"", "",
"SOLO", "SOLO",
"DUO", "DUO",
"TRIO", "TRIO",
@ -103,13 +103,13 @@ class Scheduler {
clearInterval(func) { clearInterval(func) {
if (this.intervalTasks.has(func)) if (this.intervalTasks.has(func))
window.clearInterval(this.intervalTasks.get(func)) window.clearInterval(this.intervalTasks.get(func))
this.intervalTasks.delete(func) this.intervalTasks.delete(func)
} }
clearTimeout(func) { clearTimeout(func) {
if (this.timeoutTasks.has(func)) if (this.timeoutTasks.has(func))
window.clearTimeout(this.timeoutTasks.get(func)) window.clearTimeout(this.timeoutTasks.get(func))
this.timeoutTasks.delete(func) this.timeoutTasks.delete(func)
} }
} }
@ -122,8 +122,8 @@ class Matrix extends THREE.Group {
cellIsEmpty(p) { cellIsEmpty(p) {
return 0 <= p.x && p.x < COLUMNS && return 0 <= p.x && p.x < COLUMNS &&
0 <= p.y && p.y < ROWS && 0 <= p.y && p.y < ROWS &&
!this.cells[p.y][p.x] !this.cells[p.y][p.x]
} }
lock(piece) { lock(piece) {
@ -141,7 +141,7 @@ class Matrix extends THREE.Group {
clearLines() { clearLines() {
let nbClearedLines = 0 let nbClearedLines = 0
for (let y=ROWS-1; y>=0; y--) { for (let y = ROWS - 1; y >= 0; y--) {
let row = this.cells[y] let row = this.cells[y]
if (row.filter(mino => mino).length == COLUMNS) { if (row.filter(mino => mino).length == COLUMNS) {
nbClearedLines++ nbClearedLines++
@ -163,7 +163,7 @@ class Matrix extends THREE.Group {
updateUnlockedMinoes(delta) { updateUnlockedMinoes(delta) {
this.unlockedMinoes.forEach(mino => { this.unlockedMinoes.forEach(mino => {
mino.update(delta) mino.update(delta)
if (Math.sqrt(mino.position.x*mino.position.x + mino.position.z*mino.position.z) > 25) { if (Math.sqrt(mino.position.x * mino.position.x + mino.position.z * mino.position.z) > 25) {
this.remove(mino) this.remove(mino)
this.unlockedMinoes.delete(mino) this.unlockedMinoes.delete(mino)
} }
@ -202,16 +202,16 @@ const GRAVITY = -20
class Mino extends THREE.Mesh { class Mino extends THREE.Mesh {
constructor() { constructor() {
super(Mino.prototype.geometry) super(Mino.prototype.geometry)
this.velocity = P(50-100*Math.random(), 50-100*Math.random(), 50-100*Math.random()) this.velocity = P(50 - 100 * Math.random(), 50 - 100 * Math.random(), 50 - 100 * Math.random())
this.rotationAngle = P(Math.random(), Math.random(), Math.random()).normalize() this.rotationAngle = P(Math.random(), Math.random(), Math.random()).normalize()
this.angularVelocity = 5-10*Math.random() this.angularVelocity = 5 - 10 * Math.random()
scene.add(this) scene.add(this)
} }
update(delta) { update(delta) {
this.velocity.y += delta * GRAVITY this.velocity.y += delta * GRAVITY
this.position.addScaledVector(this.velocity, delta) this.position.addScaledVector(this.velocity, delta)
this.rotateOnWorldAxis(this.rotationAngle, delta*this.angularVelocity) this.rotateOnWorldAxis(this.rotationAngle, delta * this.angularVelocity)
} }
} }
const minoFaceShape = new THREE.Shape() const minoFaceShape = new THREE.Shape()
@ -221,20 +221,20 @@ minoFaceShape.lineTo(.9, .9)
minoFaceShape.lineTo(.9, .1) minoFaceShape.lineTo(.9, .1)
minoFaceShape.lineTo(.1, .1) minoFaceShape.lineTo(.1, .1)
const minoExtrudeSettings = { const minoExtrudeSettings = {
steps: 1, steps: 1,
depth: .8, depth: .8,
bevelEnabled: true, bevelEnabled: true,
bevelThickness: .1, bevelThickness: .1,
bevelSize: .1, bevelSize: .1,
bevelOffset: 0, bevelOffset: 0,
bevelSegments: 1 bevelSegments: 1
} }
Mino.prototype.geometry = new THREE.ExtrudeGeometry(minoFaceShape, minoExtrudeSettings) Mino.prototype.geometry = new THREE.ExtrudeGeometry(minoFaceShape, minoExtrudeSettings)
class MinoMaterial extends THREE.MeshBasicMaterial { class MinoMaterial extends THREE.MeshBasicMaterial {
constructor( color ) { constructor(color) {
super({ super({
color: color, color: color,
reflectivity: 0.9, reflectivity: 0.9,
@ -248,8 +248,8 @@ class MinoMaterial extends THREE.MeshBasicMaterial {
} }
class GhostMaterial extends THREE.MeshBasicMaterial { class GhostMaterial extends THREE.MeshBasicMaterial {
constructor( color ) { constructor(color) {
super({ super({
side: THREE.DoubleSide, side: THREE.DoubleSide,
color: color, color: color,
@ -274,10 +274,10 @@ class Tetromino extends THREE.Group {
this.rotatedLast = false this.rotatedLast = false
this.rotationPoint4Used = false this.rotationPoint4Used = false
this.holdEnabled = true this.holdEnabled = true
for (let i=0; i<4; i++) { for (let i = 0; i < 4; i++) {
this.add(new Mino()) this.add(new Mino())
} }
this.facing = 0 this.facing = 0
this.locked = false this.locked = false
} }
@ -305,11 +305,11 @@ class Tetromino extends THREE.Group {
return this._locked return this._locked
} }
canMove(translation, facing=this.facing) { canMove(translation, facing = this.facing) {
let testPosition = this.position.clone().add(translation) let testPosition = this.position.clone().add(translation)
return this.minoesPosition[facing].every(minoPosition => matrix.cellIsEmpty(minoPosition.clone().add(testPosition))) return this.minoesPosition[facing].every(minoPosition => matrix.cellIsEmpty(minoPosition.clone().add(testPosition)))
} }
move(translation, testFacing) { move(translation, testFacing) {
if (this.canMove(translation, testFacing)) { if (this.canMove(translation, testFacing)) {
scheduler.clearTimeout(lockDown) scheduler.clearTimeout(lockDown)
@ -333,7 +333,7 @@ class Tetromino extends THREE.Group {
scheduler.setTimeout(lockDown, stats.lockDelay) scheduler.setTimeout(lockDown, stats.lockDelay)
} }
} }
rotate(rotation) { rotate(rotation) {
let testFacing = (this.facing + rotation + 4) % 4 let testFacing = (this.facing + rotation + 4) % 4
return this.srs[this.facing][rotation].some((translation, rotationPoint) => { return this.srs[this.facing][rotation].some((translation, rotationPoint) => {
@ -356,72 +356,72 @@ class Tetromino extends THREE.Group {
// Super Rotation System // Super Rotation System
// freedom of movement = srs[piece.facing][rotation] // freedom of movement = srs[piece.facing][rotation]
Tetromino.prototype.srs = [ Tetromino.prototype.srs = [
{ [ROTATION.CW]: [P(0, 0), P(-1, 0), P(-1, 1), P(0, -2), P(-1, -2)], [ROTATION.CCW]: [P(0, 0), P( 1, 0), P( 1, 1), P(0, -2), P( 1, -2)] }, { [ROTATION.CW]: [P(0, 0), P(-1, 0), P(-1, 1), P(0, -2), P(-1, -2)], [ROTATION.CCW]: [P(0, 0), P(1, 0), P(1, 1), P(0, -2), P(1, -2)] },
{ [ROTATION.CW]: [P(0, 0), P( 1, 0), P( 1, -1), P(0, 2), P( 1, 2)], [ROTATION.CCW]: [P(0, 0), P( 1, 0), P( 1, -1), P(0, 2), P( 1, 2)] }, { [ROTATION.CW]: [P(0, 0), P(1, 0), P(1, -1), P(0, 2), P(1, 2)], [ROTATION.CCW]: [P(0, 0), P(1, 0), P(1, -1), P(0, 2), P(1, 2)] },
{ [ROTATION.CW]: [P(0, 0), P( 1, 0), P( 1, 1), P(0, -2), P( 1, -2)], [ROTATION.CCW]: [P(0, 0), P(-1, 0), P(-1, 1), P(0, -2), P(-1, -2)] }, { [ROTATION.CW]: [P(0, 0), P(1, 0), P(1, 1), P(0, -2), P(1, -2)], [ROTATION.CCW]: [P(0, 0), P(-1, 0), P(-1, 1), P(0, -2), P(-1, -2)] },
{ [ROTATION.CW]: [P(0, 0), P(-1, 0), P(-1, -1), P(0, 2), P(-1, 2)], [ROTATION.CCW]: [P(0, 0), P(-1, 0), P(-1, -1), P(0, 2), P(-1, 2)] }, { [ROTATION.CW]: [P(0, 0), P(-1, 0), P(-1, -1), P(0, 2), P(-1, 2)], [ROTATION.CCW]: [P(0, 0), P(-1, 0), P(-1, -1), P(0, 2), P(-1, 2)] },
] ]
const minoRenderTarget = new THREE.WebGLCubeRenderTarget(256) const minoRenderTarget = new THREE.WebGLCubeRenderTarget(256)
minoRenderTarget.texture.type = THREE.HalfFloatType minoRenderTarget.texture.type = THREE.HalfFloatType
const minoCamera = new THREE.CubeCamera(1, 1000, minoRenderTarget) const minoCamera = new THREE.CubeCamera(1, 1000, minoRenderTarget)
minoCamera.position.set(5, 10) minoCamera.position.set(5, 10)
Tetromino.prototype.lockedMaterial = new MinoMaterial( 0xffffff ) Tetromino.prototype.lockedMaterial = new MinoMaterial(0xffffff)
class I extends Tetromino {} class I extends Tetromino { }
I.prototype.minoesPosition = [ I.prototype.minoesPosition = [
[P(-1, 0), P(0, 0), P(1, 0), P(2, 0)], [P(-1, 0), P(0, 0), P(1, 0), P(2, 0)],
[P( 1, 1), P(1, 0), P(1, -1), P(1, -2)], [P(1, 1), P(1, 0), P(1, -1), P(1, -2)],
[P(-1, -1), P(0, -1), P(1, -1), P(2, -1)], [P(-1, -1), P(0, -1), P(1, -1), P(2, -1)],
[P( 0, 1), P(0, 0), P(0, -1), P(0, -2)], [P(0, 1), P(0, 0), P(0, -1), P(0, -2)],
] ]
I.prototype.srs = [ I.prototype.srs = [
{ [ROTATION.CW]: [P(0, 0), P(-2, 0), P( 1, 0), P(-2, -1), P( 1, 2)], [ROTATION.CCW]: [P(0, 0), P(-1, 0), P( 2, 0), P(-1, 2), P( 2, -1)] }, { [ROTATION.CW]: [P(0, 0), P(-2, 0), P(1, 0), P(-2, -1), P(1, 2)], [ROTATION.CCW]: [P(0, 0), P(-1, 0), P(2, 0), P(-1, 2), P(2, -1)] },
{ [ROTATION.CW]: [P(0, 0), P(-1, 0), P( 2, 0), P(-1, 2), P( 2, -1)], [ROTATION.CCW]: [P(0, 0), P( 2, 0), P(-1, 0), P( 2, 1), P(-1, -2)] }, { [ROTATION.CW]: [P(0, 0), P(-1, 0), P(2, 0), P(-1, 2), P(2, -1)], [ROTATION.CCW]: [P(0, 0), P(2, 0), P(-1, 0), P(2, 1), P(-1, -2)] },
{ [ROTATION.CW]: [P(0, 0), P( 2, 0), P(-1, 0), P( 2, 1), P(-1, -2)], [ROTATION.CCW]: [P(0, 0), P( 1, 0), P(-2, 0), P( 1, -2), P(-2, 1)] }, { [ROTATION.CW]: [P(0, 0), P(2, 0), P(-1, 0), P(2, 1), P(-1, -2)], [ROTATION.CCW]: [P(0, 0), P(1, 0), P(-2, 0), P(1, -2), P(-2, 1)] },
{ [ROTATION.CW]: [P(0, 0), P( 1, 0), P(-2, 0), P( 1, -2), P(-2, 1)], [ROTATION.CCW]: [P(0, 0), P(-2, 0), P( 1, 0), P(-2, -1), P( 1, 2)] }, { [ROTATION.CW]: [P(0, 0), P(1, 0), P(-2, 0), P(1, -2), P(-2, 1)], [ROTATION.CCW]: [P(0, 0), P(-2, 0), P(1, 0), P(-2, -1), P(1, 2)] },
] ]
I.prototype.material = new MinoMaterial( 0xafeff9 ) I.prototype.material = new MinoMaterial(0xafeff9)
I.prototype.ghostMaterial = new GhostMaterial( 0xafeff9 ) I.prototype.ghostMaterial = new GhostMaterial(0xafeff9)
class J extends Tetromino {} class J extends Tetromino { }
J.prototype.minoesPosition = [ J.prototype.minoesPosition = [
[P(-1, 1), P(-1, 0), P(0, 0), P(1, 0)], [P(-1, 1), P(-1, 0), P(0, 0), P(1, 0)],
[P( 0, 1), P( 1, 1), P(0, 0), P(0, -1)], [P(0, 1), P(1, 1), P(0, 0), P(0, -1)],
[P( 1, -1), P(-1, 0), P(0, 0), P(1, 0)], [P(1, -1), P(-1, 0), P(0, 0), P(1, 0)],
[P( 0, 1), P(-1, -1), P(0, 0), P(0, -1)], [P(0, 1), P(-1, -1), P(0, 0), P(0, -1)],
] ]
J.prototype.material = new MinoMaterial( 0xb8b4ff ) J.prototype.material = new MinoMaterial(0xb8b4ff)
J.prototype.ghostMaterial = new GhostMaterial( 0xb8b4ff ) J.prototype.ghostMaterial = new GhostMaterial(0xb8b4ff)
class L extends Tetromino {} class L extends Tetromino { }
L.prototype.minoesPosition = [ L.prototype.minoesPosition = [
[P(-1, 0), P(0, 0), P(1, 0), P( 1, 1)], [P(-1, 0), P(0, 0), P(1, 0), P(1, 1)],
[P(0, 1), P(0, 0), P(0, -1), P( 1, -1)], [P(0, 1), P(0, 0), P(0, -1), P(1, -1)],
[P(-1, 0), P(0, 0), P(1, 0), P(-1, -1)], [P(-1, 0), P(0, 0), P(1, 0), P(-1, -1)],
[P(0, 1), P(0, 0), P(0, -1), P(-1, 1)], [P(0, 1), P(0, 0), P(0, -1), P(-1, 1)],
] ]
L.prototype.material = new MinoMaterial( 0xfdd0b7 ) L.prototype.material = new MinoMaterial(0xfdd0b7)
L.prototype.ghostMaterial = new GhostMaterial( 0xfdd0b7 ) L.prototype.ghostMaterial = new GhostMaterial(0xfdd0b7)
class O extends Tetromino {} class O extends Tetromino { }
O.prototype.minoesPosition = [ O.prototype.minoesPosition = [
[P(0, 0), P(1, 0), P(0, 1), P(1, 1)] [P(0, 0), P(1, 0), P(0, 1), P(1, 1)]
] ]
O.prototype.srs = [ O.prototype.srs = [
{[ROTATION.CW]: [], [ROTATION.CCW]: []} { [ROTATION.CW]: [], [ROTATION.CCW]: [] }
] ]
O.prototype.material = new MinoMaterial( 0xffedac ) O.prototype.material = new MinoMaterial(0xffedac)
O.prototype.ghostMaterial = new GhostMaterial( 0xffedac ) O.prototype.ghostMaterial = new GhostMaterial(0xffedac)
class S extends Tetromino {} class S extends Tetromino { }
S.prototype.minoesPosition = [ S.prototype.minoesPosition = [
[P(-1, 0), P(0, 0), P( 0, 1), P(1, 1)], [P(-1, 0), P(0, 0), P(0, 1), P(1, 1)],
[P( 0, 1), P(0, 0), P( 1, 0), P(1, -1)], [P(0, 1), P(0, 0), P(1, 0), P(1, -1)],
[P(-1, -1), P(0, 0), P( 1, 0), P(0, -1)], [P(-1, -1), P(0, 0), P(1, 0), P(0, -1)],
[P(-1, 1), P(0, 0), P(-1, 0), P(0, -1)], [P(-1, 1), P(0, 0), P(-1, 0), P(0, -1)],
] ]
S.prototype.material = new MinoMaterial( 0xC8FBA8 ) S.prototype.material = new MinoMaterial(0xC8FBA8)
S.prototype.ghostMaterial = new GhostMaterial( 0xC8FBA8 ) S.prototype.ghostMaterial = new GhostMaterial(0xC8FBA8)
class T extends Tetromino { class T extends Tetromino {
get tSpin() { get tSpin() {
@ -437,29 +437,29 @@ class T extends Tetromino {
} }
} }
T.prototype.minoesPosition = [ T.prototype.minoesPosition = [
[P(-1, 0), P(0, 0), P(1, 0), P( 0, 1)], [P(-1, 0), P(0, 0), P(1, 0), P(0, 1)],
[P( 0, 1), P(0, 0), P(1, 0), P( 0, -1)], [P(0, 1), P(0, 0), P(1, 0), P(0, -1)],
[P(-1, 0), P(0, 0), P(1, 0), P( 0, -1)], [P(-1, 0), P(0, 0), P(1, 0), P(0, -1)],
[P( 0, 1), P(0, 0), P(0, -1), P(-1, 0)], [P(0, 1), P(0, 0), P(0, -1), P(-1, 0)],
] ]
T.prototype.tSlots = [ T.prototype.tSlots = [
[P(-1, 1), P( 1, 1), P( 1, -1), P(-1, -1)], [P(-1, 1), P(1, 1), P(1, -1), P(-1, -1)],
[P( 1, 1), P( 1, -1), P(-1, -1), P(-1, 1)], [P(1, 1), P(1, -1), P(-1, -1), P(-1, 1)],
[P( 1, -1), P(-1, -1), P(-1, 1), P( 1, 1)], [P(1, -1), P(-1, -1), P(-1, 1), P(1, 1)],
[P(-1, -1), P(-1, 1), P( 1, 1), P( 1, -1)], [P(-1, -1), P(-1, 1), P(1, 1), P(1, -1)],
] ]
T.prototype.material = new MinoMaterial( 0xedb2ff ) T.prototype.material = new MinoMaterial(0xedb2ff)
T.prototype.ghostMaterial = new GhostMaterial( 0xedb2ff ) T.prototype.ghostMaterial = new GhostMaterial(0xedb2ff)
class Z extends Tetromino {} class Z extends Tetromino { }
Z.prototype.minoesPosition = [ Z.prototype.minoesPosition = [
[P(-1, 1), P( 0, 1), P(0, 0), P( 1, 0)], [P(-1, 1), P(0, 1), P(0, 0), P(1, 0)],
[P( 1, 1), P( 1, 0), P(0, 0), P( 0, -1)], [P(1, 1), P(1, 0), P(0, 0), P(0, -1)],
[P(-1, 0), P( 0, 0), P(0, -1), P( 1, -1)], [P(-1, 0), P(0, 0), P(0, -1), P(1, -1)],
[P( 0, 1), P(-1, 0), P(0, 0), P(-1, -1)] [P(0, 1), P(-1, 0), P(0, 0), P(-1, -1)]
] ]
Z.prototype.material = new MinoMaterial( 0xffb8c5 ) Z.prototype.material = new MinoMaterial(0xffb8c5)
Z.prototype.ghostMaterial = new GhostMaterial( 0xffb8c5 ) Z.prototype.ghostMaterial = new GhostMaterial(0xffb8c5)
class Ghost extends Tetromino { class Ghost extends Tetromino {
copy(piece) { copy(piece) {
@ -529,7 +529,7 @@ class Settings {
for (let input of this.form.querySelectorAll("input[type='checkbox']")) { for (let input of this.form.querySelectorAll("input[type='checkbox']")) {
this[input.name] = input.checked == true this[input.name] = input.checked == true
} }
this.keyBind = {} this.keyBind = {}
for (let actionName in playerActions) { for (let actionName in playerActions) {
this.keyBind[settings[actionName]] = playerActions[actionName] this.keyBind[settings[actionName]] = playerActions[actionName]
@ -537,7 +537,7 @@ class Settings {
} }
} }
window.changeKey = function(input) { window.changeKey = function (input) {
let prevValue = input.value let prevValue = input.value
input.select() input.select()
input.onkeydown = function (event) { input.onkeydown = function (event) {
@ -591,7 +591,7 @@ class Stats {
set level(level) { set level(level) {
this._level = level this._level = level
this.goal += level * 5 this.goal += level * 5
if (level <= 20){ if (level <= 20) {
this.fallPeriod = 1000 * Math.pow(0.8 - ((level - 1) * 0.007), level - 1) this.fallPeriod = 1000 * Math.pow(0.8 - ((level - 1) * 0.007), level - 1)
} }
if (level > 15) if (level > 15)
@ -683,7 +683,7 @@ class Stats {
} }
this.score += b2bScore this.score += b2bScore
} }
} else if (nbClearedLines && !tSpin ) { } else if (nbClearedLines && !tSpin) {
if (this.b2b >= 1) { if (this.b2b >= 1) {
messagesSpan.addNewChild("div", { messagesSpan.addNewChild("div", {
className: "zoom-in-animation", className: "zoom-in-animation",
@ -700,16 +700,16 @@ class Stats {
show() { show() {
let time = stats.time let time = stats.time
statsModalScoreCell.innerText = this.score.toLocaleString() statsModalScoreCell.innerText = this.score.toLocaleString()
statsModalHighScoreCell.innerText = this.highScore.toLocaleString() statsModalHighScoreCell.innerText = this.highScore.toLocaleString()
statsModalLevelCell.innerText = this.level statsModalLevelCell.innerText = this.level
statsModalTimeCell.innerText = this.timeFormat.format(time) statsModalTimeCell.innerText = this.timeFormat.format(time)
statsModaltotalClearedLines.innerText = this.totalClearedLines statsModaltotalClearedLines.innerText = this.totalClearedLines
statsModaltotalClearedLinesPM.innerText = (stats.totalClearedLines * 60000 / time).toFixed(2) statsModaltotalClearedLinesPM.innerText = (stats.totalClearedLines * 60000 / time).toFixed(2)
statsModalNbQuatris.innerText = this.nbQuatris statsModalNbQuatris.innerText = this.nbQuatris
statsModalNbTSpin.innerText = this.nbTSpin statsModalNbTSpin.innerText = this.nbTSpin
statsModalMaxCombo.innerText = this.maxCombo statsModalMaxCombo.innerText = this.maxCombo
statsModalMaxB2B.innerText = this.maxB2B statsModalMaxB2B.innerText = this.maxB2B
this.modal.show() this.modal.show()
} }
@ -728,19 +728,19 @@ Stats.prototype.timeFormat = new Intl.DateTimeFormat("fr-FR", {
/* Scene */ /* Scene */
const manager = new THREE.LoadingManager() const manager = new THREE.LoadingManager()
manager.onStart = function ( url, itemsLoaded, itemsTotal ) { manager.onStart = function (url, itemsLoaded, itemsTotal) {
messagesSpan.innerHTML = 'Chargement : 0%...' messagesSpan.innerHTML = 'Chargement : 0%...'
} }
manager.onLoad = function ( ) { manager.onLoad = function () {
restart() restart()
messagesSpan.innerHTML = "" messagesSpan.innerHTML = ""
animate() animate()
} }
manager.onProgress = function ( url, itemsLoaded, itemsTotal ) { manager.onProgress = function (url, itemsLoaded, itemsTotal) {
messagesSpan.innerHTML = 'Chargement : ' + 100 * itemsLoaded / itemsTotal + '%...' messagesSpan.innerHTML = 'Chargement : ' + 100 * itemsLoaded / itemsTotal + '%...'
} }
manager.onError = function ( url ) { manager.onError = function (url) {
messagesSpan.innerHTML = 'Erreur de chargement' messagesSpan.innerHTML = 'Erreur de chargement'
} }
const scene = new THREE.Scene() const scene = new THREE.Scene()
@ -757,18 +757,21 @@ document.body.appendChild(renderer.domElement)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(5, 1, 16) camera.position.set(5, 1, 16)
const controls = new OrbitControls( camera, renderer.domElement ) const controls = new OrbitControls(camera, renderer.domElement)
controls.autoRotate controls.autoRotate
controls.enableDamping controls.enableDamping
controls.maxDistance = 21 controls.maxDistance = 21
controls.keys = {} controls.keys = {}
controls.minPolarAngle = 0.9 controls.minPolarAngle = 0.9
controls.maxPolarAngle = 2.14 controls.maxPolarAngle = 2.14
controls.minAzimuthAngle = 0.9 - Math.PI/2 controls.minAzimuthAngle = 0.9 - Math.PI / 2
controls.maxAzimuthAngle = 2.14 - Math.PI/2 controls.maxAzimuthAngle = 2.14 - Math.PI / 2
controls.target = P(5, 10) controls.target = P(5, 10)
controls.update() controls.update()
controls.addEventListener("start", () => renderer.domElement.style.cursor = "grabbing")
controls.addEventListener("end", () => renderer.domElement.style.cursor = "grab")
const showFPS = window.location.search.includes("fps") const showFPS = window.location.search.includes("fps")
const fps = new FPS.default(); const fps = new FPS.default();
if (showFPS) document.body.appendChild(fps.dom); if (showFPS) document.body.appendChild(fps.dom);
@ -777,12 +780,12 @@ if (showFPS) document.body.appendChild(fps.dom);
const GLOBAL_ROTATION = 0.0025 const GLOBAL_ROTATION = 0.0025
const darkTextureRotation = 0.0006 const darkTextureRotation = 0.0006
const darkMoveForward = -0.0007 const darkMoveForward = -0.0007
const darkOpacity = 0.3 const darkOpacity = 0.3
const colorFullTextureRotation = 0.0006 const colorFullTextureRotation = 0.0006
const colorFullMoveForward = -0.0012 const colorFullMoveForward = -0.0012
const colorFullOpacity = 0.3 const colorFullOpacity = 0.3
const commonCylinderGeometry = new THREE.CylinderGeometry(25, 25, 500, 12, 1, true) const commonCylinderGeometry = new THREE.CylinderGeometry(25, 25, 500, 12, 1, true)
@ -839,17 +842,17 @@ const edgeMaterial = new THREE.MeshBasicMaterial({
const edgeShape = new THREE.Shape() const edgeShape = new THREE.Shape()
edgeShape.moveTo(-.3, SKYLINE) edgeShape.moveTo(-.3, SKYLINE)
edgeShape.lineTo( 0, SKYLINE) edgeShape.lineTo(0, SKYLINE)
edgeShape.lineTo( 0, 0) edgeShape.lineTo(0, 0)
edgeShape.lineTo(COLUMNS, 0) edgeShape.lineTo(COLUMNS, 0)
edgeShape.lineTo(COLUMNS, SKYLINE) edgeShape.lineTo(COLUMNS, SKYLINE)
edgeShape.lineTo(COLUMNS+.3, SKYLINE) edgeShape.lineTo(COLUMNS + .3, SKYLINE)
edgeShape.lineTo(COLUMNS+.3, -.3) edgeShape.lineTo(COLUMNS + .3, -.3)
edgeShape.lineTo(-.3, -.3) edgeShape.lineTo(-.3, -.3)
edgeShape.moveTo(-.3, SKYLINE) edgeShape.moveTo(-.3, SKYLINE)
const edgeExtrudeSettings = { const edgeExtrudeSettings = {
depth: 1, depth: 1,
bevelEnabled: false, bevelEnabled: false,
} }
const edge = new THREE.Mesh( const edge = new THREE.Mesh(
new THREE.ExtrudeGeometry(edgeShape, edgeExtrudeSettings), new THREE.ExtrudeGeometry(edgeShape, edgeExtrudeSettings),
@ -868,14 +871,14 @@ scene.add(nextQueue)
let ghost = new Ghost() let ghost = new Ghost()
const lineClearSound = new Audio("audio/line_clear.ogg") const lineClearSound = new Audio("audio/line_clear.ogg")
const tetrisSound = new Audio("audio/tetris.ogg") const tetrisSound = new Audio("audio/tetris.ogg")
const music = new Audio("https://iterations.org/files/music/remixes/Tetris_CheDDer_OC_ReMix.mp3") const music = new Audio("https://iterations.org/files/music/remixes/Tetris_CheDDer_OC_ReMix.mp3")
music.loop = true music.loop = true
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
renderer.setSize(window.innerWidth, window.innerHeight) renderer.setSize(window.innerWidth, window.innerHeight)
camera.aspect = window.innerWidth / window.innerHeight camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix() camera.updateProjectionMatrix()
}) })
let clock = new THREE.Clock() let clock = new THREE.Clock()
@ -905,8 +908,8 @@ function animate() {
/* Game logic */ /* Game logic */
messagesSpan.onanimationend = function(event) { messagesSpan.onanimationend = function (event) {
event.target.remove() event.target.remove()
} }
let scheduler = new Scheduler() let scheduler = new Scheduler()
@ -915,7 +918,7 @@ let stats = new Stats()
let playing = false let playing = false
//let favicon = document.querySelector("link[rel~='icon']") //let favicon = document.querySelector("link[rel~='icon']")
window.restart = function() { window.restart = function () {
stats.modal.hide() stats.modal.hide()
stats.init() stats.init()
settings.init() settings.init()
@ -941,7 +944,6 @@ function pauseSettings() {
music.pause() music.pause()
document.onkeydown = null document.onkeydown = null
renderer.domElement.style.cursor = "auto"
settings.show() settings.show()
} }
@ -977,21 +979,20 @@ function resume(event) {
if (settings.form.checkValidity()) { if (settings.form.checkValidity()) {
settings.modal.hide() settings.modal.hide()
settings.getInputs() settings.getInputs()
renderer.domElement.focus()
document.onkeydown = onkeydown document.onkeydown = onkeydown
document.onkeyup = onkeyup document.onkeyup = onkeyup
stats.time = stats.pauseTime stats.time = stats.pauseTime
lineClearSound.volume = settings.sfxVolume lineClearSound.volume = settings.sfxVolume
tetrisSound.volume = settings.sfxVolume tetrisSound.volume = settings.sfxVolume
if (settings.musicVolume > 0) { if (settings.musicVolume > 0) {
music.volume = settings.musicVolume music.volume = settings.musicVolume
music.play() music.play()
} }
renderer.domElement.style.cursor = "move"
if (piece) scheduler.setInterval(fall, stats.fallPeriod) if (piece) scheduler.setInterval(fall, stats.fallPeriod)
else generate() else generate()
} }
@ -1025,22 +1026,22 @@ let playerActions = {
rotateCounterclockwise: () => piece.rotate(ROTATION.CCW), rotateCounterclockwise: () => piece.rotate(ROTATION.CCW),
softDrop: function() { softDrop: function () {
if (piece.move(TRANSLATION.DOWN)) stats.score++ if (piece.move(TRANSLATION.DOWN)) stats.score++
}, },
hardDrop: function() { hardDrop: function () {
scheduler.clearTimeout(lockDown) scheduler.clearTimeout(lockDown)
//hardDropSound.play() //hardDropSound.play()
while (piece.move(TRANSLATION.DOWN)) stats.score +=2 while (piece.move(TRANSLATION.DOWN)) stats.score += 2
lockDown() lockDown()
}, },
hold: function() { hold: function () {
if (piece.holdEnabled) { if (piece.holdEnabled) {
scheduler.clearInterval(fall) scheduler.clearInterval(fall)
scheduler.clearTimeout(lockDown) scheduler.clearTimeout(lockDown)
let heldpiece = holdQueue.piece let heldpiece = holdQueue.piece
holdQueue.piece = piece holdQueue.piece = piece
holdQueue.piece.holdEnabled = false holdQueue.piece.holdEnabled = false
@ -1051,7 +1052,7 @@ let playerActions = {
generate(heldpiece) generate(heldpiece)
} }
}, },
pause: pauseSettings, pause: pauseSettings,
} }
@ -1075,7 +1076,7 @@ function onkeydown(event) {
actionsQueue.unshift(action) actionsQueue.unshift(action)
scheduler.clearTimeout(repeat) scheduler.clearTimeout(repeat)
scheduler.clearInterval(autorepeat) scheduler.clearInterval(autorepeat)
if (action == playerActions.softDrop) scheduler.setInterval(autorepeat, settings.fallPeriod/20) if (action == playerActions.softDrop) scheduler.setInterval(autorepeat, settings.fallPeriod / 20)
else scheduler.setTimeout(repeat, settings.das) else scheduler.setTimeout(repeat, settings.das)
} }
} }
@ -1129,7 +1130,7 @@ function lockDown() {
if (tetrisSound.volume) tetrisSound.play() if (tetrisSound.volume) tetrisSound.play()
} else if (nbClearedLines || tSpin) { } else if (nbClearedLines || tSpin) {
lineClearSound.currentTime = 0 lineClearSound.currentTime = 0
if(lineClearSound.volume) lineClearSound.play() if (lineClearSound.volume) lineClearSound.play()
} }
stats.lockDown(nbClearedLines, tSpin) stats.lockDown(nbClearedLines, tSpin)
@ -1145,18 +1146,13 @@ function gameOver() {
document.onkeydown = null document.onkeydown = null
onblur = null onblur = null
playing = false playing = false
renderer.domElement.style.cursor = "auto"
music.pause() music.pause()
stats.show() stats.show()
} }
window.onbeforeunload = function(event) { window.onbeforeunload = function (event) {
stats.save() stats.save()
settings.save() settings.save()
if (playing) return false if (playing) return false
} }
/*if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
}*/

4
style.css
View File

@ -10,6 +10,10 @@ body {
} }
} }
canvas {
cursor: grab;
}
#titleHeader { #titleHeader {
letter-spacing: 1rem; letter-spacing: 1rem;
} }