adrien/Webtris
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

settings

Browse Source
This commit is contained in:
Adrien MALINGREY 2019-11-02 22:10:36 +01:00
parent 4fe9175641
commit ae39fda660
8 changed files with 442 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

252
css/style.css
View File

@ -17,10 +17,12 @@
* { * {
color: white; color: white;
font-family: 'Share Tech'; font-family: 'Share Tech';
font-size: 3vmin; font-size: 1em;
margin: auto 1vmin;
} }
body { body {
background-color: #0D111D;
background-image: url("images/bg.jpg"); background-image: url("images/bg.jpg");
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
@ -28,65 +30,73 @@ body {
h1 { h1 {
font-size: 5vmin; font-size: 5vmin;
margin: 2vmin; margin: 2vmin 5vmin 5vmin 5vmin;
text-shadow: 3px 2px rgba(153, 145, 175, 0.5); text-shadow: 3px 2px rgba(153, 145, 175, 0.5);
text-align: center; text-align: center;
} }
div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
margin: 2vmin;
text-align: center;
column-gap: 1vmin;
}
div * {
margin: auto 1vmin;
}
fieldset {
display: grid;
grid-template-columns: 24vmin 18vmin 24vmin 18vmin;
grid-gap: 1vmin;
margin: 2vmin auto;
width: 85vmin;
justify-items: right;
align-items: baseline;
}
label {
font-size: 1em;
}
input[type="number"] {
color: black;
width: 2.5em;
}
fieldset > input {
width: 100%;
}
button { button {
color: black; color: black;
width: 100%; margin: 0.5vmin;
} }
a { a {
text-decoration: none; text-decoration: none;
font-size: 1em; font-size: 1em;
border-style: outset;
border-width: 2px;
border-radius: 3px;
color: black;
background-color: white;
padding: 5px;
} }
a:active { a:hover {
border-style: inset; color: lightcyan;
} }
#settings { #game {
/*visibility: hidden;*/
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2vmin;
margin: 4vmin auto;
width: 100vmin;
justify-items: left;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 2vmin;
}
#button-link {
text-align: center;
font-weight: bold;
margin: 3vmin;
}
#grid-container {
position: relative; position: relative;
display: grid; display: none;
width: 72vmin; width: 72vmin;
grid-template-columns: 18vmin 30vmin 18vmin; grid-template-columns: 18vmin 30vmin 18vmin;
grid-gap: 3vmin; grid-gap: 3vmin;
margin: auto; margin: auto;
} }
table { .minoes-table {
table-layout: fixed; table-layout: fixed;
border-spacing: 0; border-spacing: 0;
} }
@ -96,13 +106,14 @@ th {
} }
th, td { th, td {
border: 1px solid transparent;
padding: 0; padding: 0;
border-style: outset; border-width: 1px;
border-style: solid;
border-color: transparent;
} }
#hold { #hold {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
width: 18vmin; width: 18vmin;
height: 18vmin; height: 18vmin;
@ -123,6 +134,66 @@ th, td {
height: 72vmin; height: 72vmin;
} }
.invisible-grid > .empty-cell {
background: transparent;
border: 1px solid transparent;
}
.visible-grid > .empty-cell {
background: transparent;
border: 1px inset rgba(128, 128, 128, 0.3);
}
.mino {
border: 1px outset white;
}
.I-mino {
background: rgb(153, 255, 230);
}
.J-mino {
background: rgb(153, 204, 255);
}
.L-mino {
background: rgb(255, 204, 153);
}
.O-mino {
background: rgb(255, 255, 153);
}
.S-mino {
background: rgb(153, 255, 153);
}
.T-mino {
background: rgb(204, 153, 255);
}
.Z-mino {
background: rgb(255, 153, 153);
}
.locked-mino {
background: white;
}
.cleared-line {
background: white;
}
.trail {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.ghost {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
}
#stats { #stats {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
@ -138,6 +209,13 @@ th, td {
color: white; color: white;
} }
.player {
font-family: 'Share Tech';
text-align: center;
font-size: 2.5vmin;
color: white;
}
.value { .value {
font-family: 'Share Tech Mono'; font-family: 'Share Tech Mono';
text-align: right; text-align: right;
@ -145,71 +223,8 @@ th, td {
color: white; color: white;
} }
.invisible-row { #score {
background-color: transparent; font-weight: bold;
border-color: transparent;
}
.visible-row {
background-color: transparent;
border-color: rgba(128, 128, 128, 0.3);
border-style: inset;
}
.tetromino-I {
background-color: rgb(153, 255, 230);
border-color: white;
}
.tetromino-J {
background-color: rgb(153, 204, 255);
border-color: white;
}
.tetromino-L {
background-color: rgb(255, 204, 153);
border-color: white;
}
.tetromino-O {
background-color: rgb(255, 255, 153);
border-color: white;
}
.tetromino-S {
background-color: rgb(153, 255, 153);
border-color: white;
}
.tetromino-T {
background-color: rgb(204, 153, 255);
border-color: white;
}
.tetromino-Z {
background-color: rgb(255, 153, 153);
border-color: white;
}
.locked-piece {
background-color: white;
border-color: white;
}
.cleared-line {
background-color: white;
border-color: white;
}
.trail {
background-color: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.4);
}
.ghost {
background-color: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.2);
border-style: solid;
} }
#message { #message {
@ -217,24 +232,29 @@ th, td {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: white; color: rgba(255, 255, 255, 0.8);
font-size: 3vmin; font-size: 4vmin;
text-shadow: 1px 1px black; text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
#settings {
display: none;
}
#settings > label {
margin: auto auto auto 0;
}
#keyboard button {
width: 100%;
}
#leaderboard { #leaderboard {
min-width: 25%; min-width: 25%;
margin: auto; margin: auto;
text-align: center; text-align: center;
border-top: 1px solid white; border-top: 1px solid white;
caption-side: top; caption-side: top;
}
.player {
font-family: 'Share Tech';
text-align: center;
font-size: 2.5vmin;
color: white;
} }

BIN
favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 186 B

After

Width:  |  Height:  |  Size: 211 B

87
index.php
View File

@ -9,44 +9,85 @@
</head> </head>
<body> <body>
<h1>WEBTRIS</h1> <h1>WEBTRIS</h1>
<div id="grid-container"> <div id="game">
<?php <?php
function echoTable($id, $rows, $columns) { function echoTable($id, $invisibleRows, $visibleRows, $columns) {
echo " <table id='$id'>\n"; echo " <table id='$id' class=minoes-table>\n";
for ($y = 0; $y < $rows; $y++) { for ($y = 0; $y < $invisibleRows; $y++) {
echo " <tr>"; echo " <tr class=invisible-grid>";
for ($x = 0; $x < $columns; $x++) { for ($x = 0; $x < $columns; $x++) {
echo "<td></td>"; echo "<td class=empty-cell></td>";
}
echo "</tr>\n";
}
for ($y = 0; $y < $visibleRows; $y++) {
echo " <tr class=visible-grid>";
for ($x = 0; $x < $columns; $x++) {
echo "<td class=empty-cell></td>";
} }
echo "</tr>\n"; echo "</tr>\n";
} }
echo " </table>\n"; echo " </table>\n";
} }
echoTable("hold", 6, 6); echoTable("hold", 6, 0, 6);
echoTable("matrix", 24, 10); echoTable("matrix", 4, 20, 10);
echoTable("next", 24, 6); echoTable("next", 24, 0, 6);
?> ?>
<table id="stats"> <table id="stats">
<tr><th class="name">SCORE</th><td class="value" id="score">0</td></tr> <tr><th class="name" colspan=2>SCORE</th></tr>
<tr><th class="name">RECORD</th><td class="value" id="highScore">0</td></tr> <tr><td class="value" id="score" colspan=2>0</td></tr>
<tr><th class="name">TEMPS</th><td class="value" id="time">00:00</td></tr> <tr><th class="name" colspan=2>RECORD</th></tr>
<tr><td class="value" id="highScore" colspan=2>0</td></tr>
<tr><th class="name" colspan=2>TEMPS</th></tr>
<tr><td class="value" id="time" colspan=2>00:00</td></tr>
<tr><td colspan=2><br/></td class="name"></tr>
<tr><th class="name">NIVEAU</th><td class="value" id="level">0</td></tr> <tr><th class="name">NIVEAU</th><td class="value" id="level">0</td></tr>
<tr><th class="name">OBJECTIF</th><td class="value" id="goal">0</td></tr> <tr><th class="name">OBJECTIF</th><td class="value" id="goal">0</td></tr>
<tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr> <tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
</table> </table>
<div id="message"></div> <div id="message"></div>
</div> </div>
<!- settings -> <div id="settings">
<div class="flex-container"> <fieldset id="keyboard">
<div id="button-link"> <legend>Clavier</legend>
<a href="options.php" target="_blank">OPTIONS</a> <?php
</div> function addButton($action, $label) {
<div id="button-link"> echo " <label for='set-$action-key'>$label</label>\n";
<a href="leaderboard.php" target="_blank">TABLEAU DE SCORES</a> echo " <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\"></button>";
</div> }
<div id="button-link"> addButton("moveLeft", "Gauche");
<a href="index.php">REJOUER</a> addButton("moveRight", "Droite");
</div> addButton("softDrop", "Chute lente");
addButton("hardDrop", "Chute rapide");
addButton("rotateCW", "Rotation horaire");
addButton("rotateCCW", "Rotation anti-horaire");
addButton("hold", "Garde");
addButton("pause", "Pause/Reprise");
?>
</fieldset>
<fieldset>
<legend>Répétition automatique</legend>
<label id="autorepeatDelayRangeLabel" for="autorepeatDelayRange"></label>
<input id="autorepeatDelayRange" type="range" oninput="autorepeatDelayChanged()" min="100" max="1000" step="50">
<label id="autorepeatPeriodRangeLabel" for="autorepeatPeriodRange"></label>
<input id="autorepeatPeriodRange" type="range" id="autorepeatPeriodRange" oninput="autorepeatPeriodChanged()" min="2" max="50" step="2">
</fieldset>
<!-- <fieldset>
<legend>Thème</legend>
<div>À venir</div>
</fieldset> -->
<button type="button" onclick="hideSettings()">RETOUR</button>
</div>
<div id="start">
<label for="startLevel">Niveau</label>
<input type="number" id="startLevel" min="1" max="15" step="1">
<button id="startButton" type="button" onclick="start()" disabled>JOUER</button>
</div>
<div>
<button id="settingsButton" type="button" onclick="showSettings()" disabled>OPTIONS</button>
</div>
<div id="leaderboardLink">
<a href="leaderboard.php" target="_blank">TABLEAU DE SCORE</a>
</div> </div>
</body> </body>
</html> </html>

2
inleaderboard.php
View File

@ -6,8 +6,8 @@
} catch (Exception $e) { } catch (Exception $e) {
die('Erreur : ' . $e->getMessage()); die('Erreur : ' . $e->getMessage());
} }
$entryScore = (int) $db->query('SELECT score FROM `leaderboard` ORDER BY score DESC LIMIT 9, 1;')->fetch()['score'];
$score = (int) $_POST['score']; $score = (int) $_POST['score'];
$entryScore = (int) $db->query('SELECT score FROM `leaderboard` ORDER BY score DESC LIMIT 19, 1;')->fetch()['score'];
if ($score > $entryScore) if ($score > $entryScore)
echo "true"; echo "true";
else else

352
js/webtris.js
View File

@ -1,24 +1,19 @@
Array.prototype.add = function(other) { // Customize Array to be use as coordinates
return this.map((x, i) => x + other[i]) Object.defineProperty(Array.prototype, "x", {
} get: function () { return this[0] },
set: function (x) { this[0] = x}
Array.prototype.mul = function(k) { })
return this.map(x => k * x) Object.defineProperty(Array.prototype, "y", {
} get: function () { return this[1] },
set: function (y) { this[1] = y}
Array.prototype.translate = function(vector) { })
return this.map(pos => pos.add(vector)) Array.prototype.add = function(other) { return this.map((x, i) => x + other[i]) }
} Array.prototype.mul = function(k) { return this.map(x => k * x) }
Array.prototype.translate = function(vector) { return this.map(pos => pos.add(vector)) }
Array.prototype.rotate = function(spin) { Array.prototype.rotate = function(spin) { return [-spin*this.y, spin*this.x] }
return [-spin*this[1], spin*this[0]] 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]
}
// Constants
const NEXT_PIECES = 6 const NEXT_PIECES = 6
const HOLD_ROWS = 6 const HOLD_ROWS = 6
const HOLD_COLUMNS = 6 const HOLD_COLUMNS = 6
@ -27,18 +22,18 @@ const MATRIX_INVISIBLE_ROWS = 4
const MATRIX_COLUMNS = 10 const MATRIX_COLUMNS = 10
const NEXT_ROWS = 24 const NEXT_ROWS = 24
const NEXT_COLUMNS = 6 const NEXT_COLUMNS = 6
const LOCKED_PIECE_CLASS = "locked-piece" const EMPTY_CELL_CLASS = "empty-cell"
const INVISIBLE_ROW_CLASS = "invisible-row" const MINO_CLASS = "mino"
const VISIBLE_ROW_CLASS = "visible-row" const LOCKED_PIECE_CLASS = "locked-mino"
const CLEARED_LINE_CLASS = "cleared-line"
const TRAIL_CLASS = "trail" const TRAIL_CLASS = "trail"
const GHOST_CLASS = "ghost" const GHOST_CLASS = "ghost"
const CLEARED_LINE_CLASS = "mino cleared-line"
const HELD_PIECE_POSITION = [2, 3] const HELD_PIECE_POSITION = [2, 3]
const FALLING_PIECE_POSITION = [4, 3] const FALLING_PIECE_POSITION = [4, 3]
const NEXT_PIECES_POSITIONS = Array.from({length: NEXT_PIECES}, (v, k) => [2, k*4+3]) const NEXT_PIECES_POSITIONS = Array.from({length: NEXT_PIECES}, (v, k) => [2, k*4+3])
const LOCK_DELAY = 500 const LOCK_DELAY = 500
const FALL_PERIOD = 1000 const FALL_PERIOD = 1000
const AUTOREPEAT_DELAY = 200 const AUTOREPEAT_DELAY = 300
const AUTOREPEAT_PERIOD = 10 const AUTOREPEAT_PERIOD = 10
const ANIMATION_DELAY = 100 const ANIMATION_DELAY = 100
const TEMP_TEXTS_DELAY = 700 const TEMP_TEXTS_DELAY = 700
@ -72,6 +67,7 @@ const SCORES = [
] ]
const REPEATABLE_ACTIONS = [moveLeft, moveRight, softDrop] const REPEATABLE_ACTIONS = [moveLeft, moveRight, softDrop]
const STATE = { const STATE = {
WAITING: "WAITING",
PLAYING: "PLAYING", PLAYING: "PLAYING",
PAUSED: "PAUSE", PAUSED: "PAUSE",
GAME_OVER: "GAME OVER" GAME_OVER: "GAME OVER"
@ -87,9 +83,9 @@ const actionsDefaultKeys = {
pause: "Escape", pause: "Escape",
} }
const RETRIES = 3 const RETRIES = 3
var actions = {}
// Classes
class Scheduler { class Scheduler {
constructor() { constructor() {
this.intervalTasks = new Map() this.intervalTasks = new Map()
@ -146,11 +142,11 @@ class Tetromino {
this.shape = shape this.shape = shape
else { else {
if (!randomBag.length) if (!randomBag.length)
randomBag = ['tetromino-I', 'tetromino-J', 'tetromino-L', 'tetromino-O', 'tetromino-S', 'tetromino-T', 'tetromino-Z'] randomBag = ['I', 'J', 'L', 'O', 'S', 'T', 'Z']
this.shape = randomBag.pick() this.shape = randomBag.pick()
} }
switch(this.shape) { switch(this.shape) {
case 'tetromino-I': case 'I':
this.minoesPos = [[-1, 0], [0, 0], [1, 0], [2, 0]] this.minoesPos = [[-1, 0], [0, 0], [1, 0], [2, 0]]
this.srs[SPIN.CW] = [ this.srs[SPIN.CW] = [
[[ 1, 0], [-1, 0], [ 2, 0], [-1, 1], [ 2, -2]], [[ 1, 0], [-1, 0], [ 2, 0], [-1, 1], [ 2, -2]],
@ -165,27 +161,28 @@ class Tetromino {
[[ 1, 0], [-1, 0], [ 2, 0], [-1, 1], [ 2, -2]], [[ 1, 0], [-1, 0], [ 2, 0], [-1, 1], [ 2, -2]],
] ]
break break
case 'tetromino-J': case 'J':
this.minoesPos = [[-1, -1], [-1, 0], [0, 0], [1, 0]] this.minoesPos = [[-1, -1], [-1, 0], [0, 0], [1, 0]]
break break
case 'tetromino-L': case 'L':
this.minoesPos = [[-1, 0], [0, 0], [1, 0], [1, -1]] this.minoesPos = [[-1, 0], [0, 0], [1, 0], [1, -1]]
break break
case 'tetromino-O': case 'O':
this.minoesPos = [[0, 0], [1, 0], [0, -1], [1, -1]] this.minoesPos = [[0, 0], [1, 0], [0, -1], [1, -1]]
this.srs[SPIN.CW] = [[]] this.srs[SPIN.CW] = [[]]
this.srs[SPIN.CCW] = [[]] this.srs[SPIN.CCW] = [[]]
break break
case 'tetromino-S': case 'S':
this.minoesPos = [[-1, 0], [0, 0], [0, -1], [1, -1]] this.minoesPos = [[-1, 0], [0, 0], [0, -1], [1, -1]]
break break
case 'tetromino-T': case 'T':
this.minoesPos = [[-1, 0], [0, 0], [1, 0], [0, -1]] this.minoesPos = [[-1, 0], [0, 0], [1, 0], [0, -1]]
break break
case 'tetromino-Z': case 'Z':
this.minoesPos = [[-1, -1], [0, -1], [0, 0], [1, 0]] this.minoesPos = [[-1, -1], [0, -1], [0, 0], [1, 0]]
break break
} }
this.className = MINO_CLASS + " " + this.shape + "-" + MINO_CLASS
} }
get minoesAbsPos() { get minoesAbsPos() {
@ -195,7 +192,7 @@ class Tetromino {
get ghost() { get ghost() {
var ghost = new Tetromino(Array.from(this.pos), this.shape) var ghost = new Tetromino(Array.from(this.pos), this.shape)
ghost.minoesPos = Array.from(this.minoesPos) ghost.minoesPos = Array.from(this.minoesPos)
ghost.shape = GHOST_CLASS ghost.className = GHOST_CLASS
return ghost return ghost
} }
} }
@ -214,14 +211,14 @@ class MinoesTable {
} }
drawPiece(piece) { drawPiece(piece) {
var className = piece.locked ? LOCKED_PIECE_CLASS : piece.shape var className = piece.locked ? LOCKED_PIECE_CLASS + " "+ piece.className: piece.className
piece.minoesAbsPos.forEach(pos => this.drawMino(...pos, className)) piece.minoesAbsPos.forEach(pos => this.drawMino(...pos, className))
} }
clearTable() { clearTable() {
for(var y = 0; y < this.rows; y++) { for(var y = 0; y < this.rows; y++) {
for (var x = 0; x < this.columns; x++) { for (var x = 0; x < this.columns; x++) {
this.drawMino(x, y, INVISIBLE_ROW_CLASS) this.drawMino(x, y, EMPTY_CELL_CLASS)
} }
} }
} }
@ -263,26 +260,16 @@ class Matrix extends MinoesTable {
draw() { draw() {
// grid // grid
if (state == STATE.PAUSED) { if (state == STATE.PAUSED) {
for (var y = 0; y < this.rows; y++) { this.clearTable()
for (var x = 0; x < this.columns; x++) {
if (this.clearedLines.includes(y)) var className = CLEARED_LINE_CLASS
else {
if (y < MATRIX_INVISIBLE_ROWS) var className = INVISIBLE_ROW_CLASS
else var className = VISIBLE_ROW_CLASS
}
this.drawMino(x, y, className)
}
}
} else { } else {
for (var y = 0; y < this.rows; y++) { for (var y = 0; y < this.rows; y++) {
for (var x = 0; x < this.columns; x++) { for (var x = 0; x < this.columns; x++) {
var className = this.lockedMinoes[y][x] var className = this.lockedMinoes[y][x]
if (!className) { if (!className) {
if (this.clearedLines.includes(y)) className = CLEARED_LINE_CLASS if (this.clearedLines.includes(y))
else { className = CLEARED_LINE_CLASS
if (y < MATRIX_INVISIBLE_ROWS) className = INVISIBLE_ROW_CLASS else
else className = VISIBLE_ROW_CLASS className = EMPTY_CELL_CLASS
}
} }
this.drawMino(x, y, className) this.drawMino(x, y, className)
} }
@ -291,14 +278,15 @@ class Matrix extends MinoesTable {
// trail // trail
if (this.trail.height) { if (this.trail.height) {
this.trail.minoesPos.forEach(pos => { this.trail.minoesPos.forEach(pos => {
for (var dy = 0; dy < this.trail.height; dy++) this.drawMino(pos[0], pos[1]+dy, TRAIL_CLASS) for (var y = pos.y; y < pos.y + this.trail.height; y++)
this.drawMino(pos.x, y, TRAIL_CLASS)
}) })
} }
//ghost //ghost
if (!this.piece.locked && state != STATE.GAME_OVER) { if (!this.piece.locked && state != STATE.GAME_OVER) {
for (var ghost = this.piece.ghost; this.spaceToMove(ghost.minoesAbsPos); ghost.pos[1]++) {} for (var ghost = this.piece.ghost; this.spaceToMove(ghost.minoesAbsPos); ghost.pos.y++) {}
ghost.pos[1]-- ghost.pos.y--
this.drawPiece(ghost) this.drawPiece(ghost)
} }
@ -323,11 +311,6 @@ class NextQueue extends MinoesTable {
} }
timeFormat = new Intl.DateTimeFormat("fr-FR", {
minute: "2-digit", second: "2-digit", hourCycle: "h24", timeZone: "UTC"
}).format
class Stats { class Stats {
constructor () { constructor () {
this.scoreCell = document.getElementById("score") this.scoreCell = document.getElementById("score")
@ -337,11 +320,11 @@ class Stats {
this.goalCell = document.getElementById("goal") this.goalCell = document.getElementById("goal")
this.clearedLinesCell = document.getElementById("clearedLines") this.clearedLinesCell = document.getElementById("clearedLines")
this._score = 0 this._score = 0
this.highScore = localStorage.getItem('highScore') || 0 this.highScore = Number(localStorage.getItem('highScore'))
this.highScoreCell.innerHTML = this.highScore.toLocaleString()
this.goal = 0 this.goal = 0
this.clearedLines = 0 this.clearedLines = 0
this.startTime = Date.now() this.time = 0
this.pauseTime = 0
this.combo = -1 this.combo = -1
this.lockDelay = LOCK_DELAY this.lockDelay = LOCK_DELAY
this.fallPeriod = FALL_PERIOD this.fallPeriod = FALL_PERIOD
@ -352,11 +335,13 @@ class Stats {
} }
set score(score) { set score(score) {
this._score = score if (score != NaN) {
this.scoreCell.innerHTML = this._score this._score = score
if (score > this.highScore) this.scoreCell.innerHTML = this._score.toLocaleString()
this.highScore = score if (score > this.highScore)
this.highScoreCell.innerHTML = this.highScore this.highScore = score
this.highScoreCell.innerHTML = this.highScore.toLocaleString()
}
} }
newLevel(level=null) { newLevel(level=null) {
@ -399,7 +384,8 @@ class Stats {
if (this.combo >= 1) if (this.combo >= 1)
combo_score = (clearedLines == 1 ? 20 : 50) * this.combo * this.level combo_score = (clearedLines == 1 ? 20 : 50) * this.combo * this.level
this.score += patternScore + combo_score if (patternScore || combo_score)
this.score += patternScore + combo_score
if (patternScore) { if (patternScore) {
var messages = [patternName, patternScore] var messages = [patternName, patternScore]
@ -408,13 +394,49 @@ class Stats {
printTempTexts(messages.join("<br/>")) printTempTexts(messages.join("<br/>"))
} }
} }
printTime() {
this.timeCell.innerHTML = timeFormat(Date.now() - this.startTime)
}
} }
// Functions
function start() {
document.getElementById("startButton").blur()
var startLevel = document.getElementById("startLevel").value
localStorage.setItem("startLevel", startLevel)
document.getElementById("game").style.display = "grid"
document.getElementById("settings").style.display = "none"
document.getElementById("start").style.display = "none"
document.getElementById("settingsButton").style.display = "flex"
document.getElementById("leaderboardLink").style.display = "none"
state = STATE.PLAYING
pressedKeys = new Set()
actionsToRepeat = []
addEventListener("keydown", keyDownHandler, false)
addEventListener("keyup", keyUpHandler, false)
scheduler.setInterval(clock, 1000)
newLevel(startLevel)
}
function applySettings() {
actions[STATE.PLAYING] = {}
actions[STATE.PLAYING][getKeyName("moveLeft")] = moveLeft
actions[STATE.PLAYING][getKeyName("moveRight")] = moveRight
actions[STATE.PLAYING][getKeyName("softDrop")] = softDrop
actions[STATE.PLAYING][getKeyName("hardDrop")] = hardDrop
actions[STATE.PLAYING][getKeyName("rotateCW")] = rotateCW
actions[STATE.PLAYING][getKeyName("rotateCCW")] = rotateCCW
actions[STATE.PLAYING][getKeyName("hold")] = hold
actions[STATE.PLAYING][getKeyName("pause")] = pause
actions[STATE.PAUSED] = {}
actions[STATE.PAUSED][getKeyName("pause")] = resume
actions[STATE.GAME_OVER] = {}
autorepeatDelay = localStorage.getItem("autorepeatDelay") || AUTOREPEAT_DELAY
autorepeatPeriod = localStorage.getItem("autorepeatPeriod") || AUTOREPEAT_PERIOD
}
function newLevel(startLevel) { function newLevel(startLevel) {
stats.newLevel(startLevel) stats.newLevel(startLevel)
generationPhase() generationPhase()
@ -492,16 +514,16 @@ function rotate(spin) {
function lockDown(){ function lockDown(){
scheduler.clearInterval(lockPhase) scheduler.clearInterval(lockPhase)
if (matrix.piece.minoesAbsPos.every(pos => pos[1] < MATRIX_INVISIBLE_ROWS)) { if (matrix.piece.minoesAbsPos.every(pos => pos.y < MATRIX_INVISIBLE_ROWS)) {
matrix.piece.locked = false matrix.piece.locked = false
matrix.draw() matrix.draw()
gameOver() gameOver()
} else { } else {
matrix.piece.minoesAbsPos.forEach(pos => matrix.lockedMinoes[pos[1]][pos[0]] = matrix.piece.shape) matrix.piece.minoesAbsPos.forEach(pos => matrix.lockedMinoes[pos.y][pos.x] = matrix.piece.className)
// T-Spin detection // T-Spin detection
var tSpin = T_SPIN.NONE var tSpin = T_SPIN.NONE
if (matrix.piece.rotatedLast && matrix.piece.shape == "tetromino-T") { if (matrix.piece.rotatedLast && matrix.piece.shape == "T") {
const tSlots = T_SLOT_POS.translate(matrix.piece.pos).map(pos => matrix.cellIsOccupied(...pos)), const tSlots = T_SLOT_POS.translate(matrix.piece.pos).map(pos => matrix.cellIsOccupied(...pos)),
a = tSlots[(matrix.piece.orientation+T_SLOT.A)%4], a = tSlots[(matrix.piece.orientation+T_SLOT.A)%4],
b = tSlots[(matrix.piece.orientation+T_SLOT.B)%4], b = tSlots[(matrix.piece.orientation+T_SLOT.B)%4],
@ -545,6 +567,8 @@ function gameOver() {
scheduler.clearInterval(lockPhase) scheduler.clearInterval(lockPhase)
scheduler.clearTimeout(lockDown) scheduler.clearTimeout(lockDown)
scheduler.clearInterval(clock) scheduler.clearInterval(clock)
removeEventListener("keydown", keyDownHandler, false)
removeEventListener("keyup", keyUpHandler, false)
var info = `GAME OVER\nScore : ${stats.score}` var info = `GAME OVER\nScore : ${stats.score}`
if (stats.score == stats.highScore) { if (stats.score == stats.highScore) {
@ -558,7 +582,7 @@ function gameOver() {
FD.append("score", stats.score) FD.append("score", stats.score)
XHR.addEventListener('load', function(event) { XHR.addEventListener('load', function(event) {
if (event.target.responseText == "true") { if (event.target.responseText == "true") {
var player = prompt(info + "\nBravo ! Vous êtes dans le Top 10.\nEntrez votre nom pour publier votre score :" , localStorage.getItem("name") || "") var player = prompt(info + "\nBravo ! Vous êtes dans le Top 20.\nEntrez votre nom pour publier votre score :" , localStorage.getItem("name") || "")
if (player.length) { if (player.length) {
localStorage.setItem("player", player) localStorage.setItem("player", player)
XHR = new XMLHttpRequest() XHR = new XMLHttpRequest()
@ -569,25 +593,34 @@ function gameOver() {
open("leaderboard.php") open("leaderboard.php")
}) })
XHR.addEventListener('error', function(event) { XHR.addEventListener('error', function(event) {
if (confirm('Erreur de connexion.\nRéessayer ?')) if (confirm('Erreur de connexion.\nRéessayer ?')) {
XHR.open('POST', 'publish.php')
XHR.send(FD) XHR.send(FD)
}
}) })
XHR.open('POST', 'publish.php') XHR.open('POST', 'publish.php')
XHR.send(FD) XHR.send(FD)
} }
} else { } else {
retry++ alert(info)
if (retry < RETRIES)
XHR.send(FD)
else
alert(info)
} }
}) })
XHR.addEventListener('error', function(event) { XHR.addEventListener('error', function(event) {
alert(info) retry++
if (retry < RETRIES) {
XHR.open('POST', 'inleaderboard.php')
XHR.send(FD)
} else
alert(info)
}) })
XHR.open('POST', 'inleaderboard.php') XHR.open('POST', 'inleaderboard.php')
XHR.send(FD) XHR.send(FD)
document.getElementById("game").style.display = "none"
document.getElementById("settings").style.display = "none"
document.getElementById("start").style.display = "flex"
document.getElementById("settingsButton").style.display = "flex"
document.getElementById("leaderboardLink").style.display = "flex"
} }
function autorepeat() { function autorepeat() {
@ -595,7 +628,7 @@ function autorepeat() {
actionsToRepeat[0]() actionsToRepeat[0]()
if (scheduler.timeoutTasks.has(autorepeat)) { if (scheduler.timeoutTasks.has(autorepeat)) {
scheduler.clearTimeout(autorepeat) scheduler.clearTimeout(autorepeat)
scheduler.setInterval(autorepeat, AUTOREPEAT_PERIOD) scheduler.setInterval(autorepeat, autorepeatPeriod)
} }
} else { } else {
scheduler.clearTimeout(autorepeat) scheduler.clearTimeout(autorepeat)
@ -618,7 +651,7 @@ function keyDownHandler(e) {
if (action == softDrop) if (action == softDrop)
scheduler.setInterval(autorepeat, stats.fallPeriod / 20) scheduler.setInterval(autorepeat, stats.fallPeriod / 20)
else else
scheduler.setTimeout(autorepeat, AUTOREPEAT_DELAY) scheduler.setTimeout(autorepeat, autorepeatDelay)
} }
} }
} }
@ -655,9 +688,8 @@ function hardDrop() {
scheduler.clearInterval(lockPhase) scheduler.clearInterval(lockPhase)
scheduler.clearTimeout(lockDown) scheduler.clearTimeout(lockDown)
matrix.trail.minoesPos = Array.from(matrix.piece.minoesAbsPos) matrix.trail.minoesPos = Array.from(matrix.piece.minoesAbsPos)
for (matrix.trail.height = 0; move(MOVEMENT.DOWN, matrix.piece.minoesPos, true); matrix.trail.height++) { for (matrix.trail.height = 0; move(MOVEMENT.DOWN, matrix.piece.minoesPos, true); matrix.trail.height++) {}
stats.score += 2 stats.score += 2 * matrix.trail.height
}
matrix.draw() matrix.draw()
lockDown() lockDown()
scheduler.setTimeout(clearTrail, ANIMATION_DELAY) scheduler.setTimeout(clearTrail, ANIMATION_DELAY)
@ -692,8 +724,7 @@ function hold() {
function pause() { function pause() {
state = STATE.PAUSED state = STATE.PAUSED
stats.pauseTime = Date.now() - stats.startTime actionsToRepeat = []
messageDiv.innerHTML = "PAUSED"
scheduler.clearInterval(lockPhase) scheduler.clearInterval(lockPhase)
scheduler.clearTimeout(lockDown) scheduler.clearTimeout(lockDown)
scheduler.clearTimeout(autorepeat) scheduler.clearTimeout(autorepeat)
@ -701,23 +732,23 @@ function pause() {
holdQueue.draw() holdQueue.draw()
matrix.draw() matrix.draw()
nextQueue.draw() nextQueue.draw()
messageDiv.innerHTML = `PAUSE<br/><br/>Appuyez sur<br/>${getKeyName('pause')}<br/>pour reprendre`
} }
function resume() { function resume() {
state = STATE.PLAYING state = STATE.PLAYING
stats.startTime = Date.now() - stats.pauseTime
messageDiv.innerHTML = "" messageDiv.innerHTML = ""
scheduler.setTimeout(lockPhase, stats.fallPeriod) scheduler.setTimeout(lockPhase, stats.fallPeriod)
if (matrix.piece.locked) if (matrix.piece.locked)
scheduler.setTimeout(lockDown, stats.lockDelay) scheduler.setTimeout(lockDown, stats.lockDelay)
scheduler.setInterval(clock, 1000) scheduler.setInterval(clock, 1000)
hold.draw() holdQueue.draw()
matrix.draw() matrix.draw()
next.draw() nextQueue.draw()
} }
function printTempTexts(texts) { function printTempTexts(text) {
tempTexts.push(texts) tempTexts.push(text)
messageDiv.innerHTML = tempTexts[0] messageDiv.innerHTML = tempTexts[0]
if (!scheduler.intervalTasks.has(delTempTexts)) if (!scheduler.intervalTasks.has(delTempTexts))
scheduler.setInterval(delTempTexts, TEMP_TEXTS_DELAY) scheduler.setInterval(delTempTexts, TEMP_TEXTS_DELAY)
@ -734,42 +765,119 @@ function delTempTexts(self) {
} }
} }
function getKey(action) { function clock() {
stats.timeCell.innerHTML = timeFormat(1000 * ++stats.time)
}
function getKeyName(action) {
return localStorage.getItem(action) || actionsDefaultKeys[action] return localStorage.getItem(action) || actionsDefaultKeys[action]
} }
function clock() { function getKeyNameOrSpace(action) {
stats.printTime() key = getKeyName(action)
return (key == " ") ? "Space" : key
} }
// Settings functions
function showSettings() {
document.getElementById("set-moveLeft-key").innerHTML = getKeyNameOrSpace("moveLeft")
document.getElementById("set-moveRight-key").innerHTML = getKeyNameOrSpace("moveRight")
document.getElementById("set-softDrop-key").innerHTML = getKeyNameOrSpace("softDrop")
document.getElementById("set-hardDrop-key").innerHTML = getKeyNameOrSpace("hardDrop")
document.getElementById("set-rotateCW-key").innerHTML = getKeyNameOrSpace("rotateCW")
document.getElementById("set-rotateCCW-key").innerHTML = getKeyNameOrSpace("rotateCCW")
document.getElementById("set-hold-key").innerHTML = getKeyNameOrSpace("hold")
document.getElementById("set-pause-key").innerHTML = getKeyNameOrSpace("pause")
document.getElementById("autorepeatDelayRange").value = localStorage.getItem("autorepeatDelay") || AUTOREPEAT_DELAY
document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai : ${autorepeatDelay}ms`
document.getElementById("autorepeatPeriodRange").value = localStorage.getItem("autorepeatPeriod") || AUTOREPEAT_PERIOD
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
if (state == STATE.PLAYING)
pause()
document.getElementById("settings").style.display = "flex"
document.getElementById("game").style.display = "none"
document.getElementById("start").style.display = "none"
document.getElementById("leaderboardLink").style.display = "none"
document.getElementById("settingsButton").style.display = "none"
}
function hideSettings() {
applySettings()
switch(state) {
case STATE.WAITING:
case STATE.GAME_OVER:
document.getElementById("game").style.display = "none"
document.getElementById("settings").style.display = "none"
document.getElementById("start").style.display = "flex"
document.getElementById("settingsButton").style.display = "flex"
document.getElementById("leaderboardLink").style.display = "flex"
break
case STATE.PAUSED:
document.getElementById("game").style.display = "grid"
document.getElementById("settings").style.display = "none"
document.getElementById("start").style.display = "none"
document.getElementById("settingsButton").style.display = "flex"
document.getElementById("leaderboardLink").style.display = "none"
resume()
break
}
}
function waitKey(button, action) {
button.innerHTML = "Touche ?"
selectedButton = button
selectedAction = action
button.blur()
addEventListener("keyup", changeKey, false)
}
function changeKey(e) {
if (selectedButton) {
localStorage.setItem(selectedAction, e.key)
selectedButton.innerHTML = (e.key == " ") ? "Space" : e.key
selectedButton = null
}
removeEventListener("keyup", changeKey, false)
}
function autorepeatDelayChanged() {
autorepeatDelay = document.getElementById("autorepeatDelayRange").value
localStorage.setItem("autorepeatDelay", autorepeatDelay)
document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai : ${autorepeatDelay}ms`
}
function autorepeatPeriodChanged() {
autorepeatPeriod = document.getElementById("autorepeatPeriodRange").value
localStorage.setItem("autorepeatPeriod", autorepeatPeriod)
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
}
//global variables
timeFormat = new Intl.DateTimeFormat("fr-FR", {
minute: "2-digit",
second: "2-digit",
timeZone: "UTC"
}).format
state = STATE.WAITING
tempTexts = []
actions = {}
selectedButton = null
selectedAction = ""
window.onload = function() { window.onload = function() {
tempTexts = [] applySettings()
document.getElementById("startLevel").value = localStorage.getItem("startLevel") || 1
document.getElementById("startButton").disabled = false
document.getElementById("settingsButton").disabled = false
messageDiv = document.getElementById("message") messageDiv = document.getElementById("message")
scheduler = new Scheduler()
holdQueue = new HoldQueue() holdQueue = new HoldQueue()
stats = new Stats() stats = new Stats()
matrix = new Matrix() matrix = new Matrix()
nextQueue = new NextQueue() nextQueue = new NextQueue()
actions[STATE.PLAYING] = {}
actions[STATE.PLAYING][getKey("moveLeft")] = moveLeft
actions[STATE.PLAYING][getKey("moveRight")] = moveRight
actions[STATE.PLAYING][getKey("softDrop")] = softDrop
actions[STATE.PLAYING][getKey("hardDrop")] = hardDrop
actions[STATE.PLAYING][getKey("rotateCW")] = rotateCW
actions[STATE.PLAYING][getKey("rotateCCW")] = rotateCCW
actions[STATE.PLAYING][getKey("hold")] = hold
actions[STATE.PLAYING][getKey("pause")] = pause
actions[STATE.PAUSED] = {}
actions[STATE.PAUSED][getKey("pause")] = resume
actions[STATE.GAME_OVER] = {}
pressedKeys = new Set()
actionsToRepeat = []
addEventListener("keydown", keyDownHandler, false)
addEventListener("keyup", keyUpHandler, false)
state = STATE.PLAYING
scheduler = new Scheduler()
scheduler.setInterval(clock, 1000)
newLevel(1)
} }

7
leaderboard.php
View File

@ -17,9 +17,10 @@
} catch (Exception $e) { } catch (Exception $e) {
die('Erreur : ' . $e->getMessage()); die('Erreur : ' . $e->getMessage());
} }
$top10 = $db->query('SELECT player, score FROM `leaderboard` ORDER BY score DESC LIMIT 10;'); $top10 = $db->query('SELECT player, score FROM `leaderboard` ORDER BY score DESC LIMIT 20;');
for ($i = 1; $row = $top10->fetch(); $i++) { for ($i = 1; $row = $top10->fetch(); $i++) {
echo ' <tr><th class="name">' . $i . '<td class="player">' . $row['player'] . '</td><td class="value">' . $row['score'] . "</td></tr>\n"; $score = number_format($row['score'], 0, ",", " ");
echo ' <tr><th class="name">' . $i . '<td class="player">' . $row['player'] . '</td><td class="value">' . $score . "</td></tr>\n";
} }
$top10->closeCursor(); $top10->closeCursor();
$db->close(); $db->close();
@ -27,7 +28,7 @@
</table> </table>
<div class="flex-container"> <div class="flex-container">
<div id="button-link"> <div id="button-link">
<a href="options.php" target="_blank">OPTIONS</a> <a href="settings.php" target="_blank">OPTIONS</a>
</div> </div>
<div id="button-link"> <div id="button-link">
<a href="index.php">REJOUER</a> <a href="index.php">REJOUER</a>

9
publish.php
View File

@ -7,12 +7,15 @@
die('Erreur : ' . $e->getMessage()); die('Erreur : ' . $e->getMessage());
} }
$query = $db->prepare('INSERT INTO `leaderboard` (`player`, `score`) VALUES (:player, :score);'); $query = $db->prepare('INSERT INTO `leaderboard` (`player`, `score`) VALUES (:player, :score);');
$query->execute(array("player" => strip_tags($_POST['player']), "score" => (int) $_POST['score'])); $query->execute(array(
"player" => strip_tags($_POST['player']),
"score" => (int) $_POST['score']
));
$RowsToDelete = $db->query('SELECT id FROM `leaderboard` ORDER BY score DESC LIMIT 10, 10;'); $RowsToDelete = $db->query('SELECT id FROM `leaderboard` ORDER BY score DESC LIMIT 20, 1000;');
while($row = $RowsToDelete->fetch()) { while($row = $RowsToDelete->fetch()) {
$id = $row['id']; $id = $row['id'];
$db->query("DELETE FROM `leaderboard` WHERE id=" . $row['id'] . ";"); $db->exec("DELETE FROM `leaderboard` WHERE id=" . $row['id'] . ";");
} }
$row->closeCursor(); $row->closeCursor();
$db->close(); $db->close();

2
settings.php
View File

@ -5,7 +5,7 @@
<title>Webtris</title> <title>Webtris</title>
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/options.js"></script> <script type="text/javascript" src="js/settings.js"></script>
</head> </head>
<body> <body>
<h1>WEBTRIS</h1> <h1>WEBTRIS</h1>