show ghost setting
This commit is contained in:
@ -41,18 +41,18 @@ div {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
margin: 2vmin;
|
||||
margin: 4vmin;
|
||||
text-align: center;
|
||||
column-gap: 1vmin;
|
||||
}
|
||||
|
||||
div * {
|
||||
margin: auto 1vmin;
|
||||
margin: auto 2vmin;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: grid;
|
||||
grid-template-columns: 24vmin 18vmin 24vmin 18vmin;
|
||||
grid-template-columns: 25vmin 17vmin 25vmin 17vmin;
|
||||
grid-gap: 1vmin;
|
||||
margin: 2vmin auto;
|
||||
width: 85vmin;
|
||||
@ -243,8 +243,17 @@ th, td {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings > label {
|
||||
margin: auto auto auto 0;
|
||||
#settings > * {
|
||||
margin: 2vmin auto;
|
||||
}
|
||||
|
||||
#settings > div {
|
||||
justify-content: left;
|
||||
width: 85vmin;
|
||||
}
|
||||
|
||||
#settings > div > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#keyboard button {
|
||||
|
||||
180
index.php
180
index.php
@ -1,93 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webtris</title>
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||
<script type="text/javascript" src="js/webtris.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>WEBTRIS</h1>
|
||||
<div id="game">
|
||||
<?php
|
||||
function echoTable($id, $invisibleRows, $visibleRows, $columns) {
|
||||
echo " <table id='$id' class=minoes-table>\n";
|
||||
for ($y = 0; $y < $invisibleRows; $y++) {
|
||||
echo " <tr class=invisible-grid>";
|
||||
for ($x = 0; $x < $columns; $x++) {
|
||||
echo "<td class=empty-cell></td>";
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Webtris</title>
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||
<script type="text/javascript" src="js/webtris.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>WEBTRIS</h1>
|
||||
</header>
|
||||
<div id="game">
|
||||
<?php
|
||||
function echoTable($id, $invisibleRows, $visibleRows, $columns) {
|
||||
echo " <table id='$id' class=minoes-table>\n";
|
||||
for ($y = 0; $y < $invisibleRows; $y++) {
|
||||
echo " <tr class=invisible-grid>";
|
||||
for ($x = 0; $x < $columns; $x++) {
|
||||
echo "<td class=empty-cell></td>";
|
||||
}
|
||||
echo "</tr>\n";
|
||||
}
|
||||
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>";
|
||||
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, 0, 6);
|
||||
echoTable("matrix", 4, 20, 10);
|
||||
echoTable("next", 24, 0, 6);
|
||||
?>
|
||||
<table id="stats">
|
||||
<tr><th class="name" colspan=2>SCORE</th></tr>
|
||||
<tr><td class="value" id="score" colspan=2>0</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">OBJECTIF</th><td class="value" id="goal">0</td></tr>
|
||||
<tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
|
||||
</table>
|
||||
<div id="message"></div>
|
||||
</div>
|
||||
<div id="settings">
|
||||
<fieldset id="keyboard">
|
||||
<legend>Clavier</legend>
|
||||
<?php
|
||||
function addButton($action, $label) {
|
||||
echo " <label for='set-$action-key'>$label</label>\n";
|
||||
echo " <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\"></button>";
|
||||
}
|
||||
addButton("moveLeft", "Gauche");
|
||||
addButton("moveRight", "Droite");
|
||||
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>
|
||||
</body>
|
||||
echoTable("hold", 6, 0, 6);
|
||||
echoTable("matrix", 4, 20, 10);
|
||||
echoTable("next", 24, 0, 6);
|
||||
?>
|
||||
<table id="stats">
|
||||
<tr><th class="name" colspan=2>SCORE</th></tr>
|
||||
<tr><td class="value" id="score" colspan=2>0</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">OBJECTIF</th><td class="value" id="goal">0</td></tr>
|
||||
<tr><th class="name">LIGNES</th><td class="value" id="clearedLines">0</td></tr>
|
||||
</table>
|
||||
<div id="message"></div>
|
||||
</div>
|
||||
<div id="settings">
|
||||
<fieldset id="keyboard">
|
||||
<legend>Clavier</legend>
|
||||
<?php
|
||||
function addButton($action, $label) {
|
||||
echo " <label for='set-$action-key'>$label</label>\n";
|
||||
echo " <button id='set-$action-key' type='button' onclick=\"waitKey(this, '$action')\"></button>";
|
||||
}
|
||||
addButton("moveLeft", "Gauche");
|
||||
addButton("moveRight", "Droite");
|
||||
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> -->
|
||||
<div>
|
||||
<input id="showGhostCheckbox" type="checkbox" checked onchange="showGhostChanged()"/>
|
||||
<label for="showGhostCheckbox">Afficher le fantôme</label>
|
||||
</div>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@ -284,7 +284,7 @@ class Matrix extends MinoesTable {
|
||||
}
|
||||
|
||||
//ghost
|
||||
if (!this.piece.locked && state != STATE.GAME_OVER) {
|
||||
if (showGhost && !this.piece.locked && state != STATE.GAME_OVER) {
|
||||
for (var ghost = this.piece.ghost; this.spaceToMove(ghost.minoesAbsPos); ghost.pos.y++) {}
|
||||
ghost.pos.y--
|
||||
this.drawPiece(ghost)
|
||||
@ -419,24 +419,6 @@ function start() {
|
||||
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) {
|
||||
stats.newLevel(startLevel)
|
||||
generationPhase()
|
||||
@ -773,30 +755,56 @@ function getKeyName(action) {
|
||||
return localStorage.getItem(action) || actionsDefaultKeys[action]
|
||||
}
|
||||
|
||||
function getKeyNameOrSpace(action) {
|
||||
key = getKeyName(action)
|
||||
// Settings functions
|
||||
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
|
||||
|
||||
showGhost = localStorage.getItem("showGhost")
|
||||
if (showGhost)
|
||||
showGhost = (showGhost == "true")
|
||||
else
|
||||
showGhost = true
|
||||
}
|
||||
|
||||
function replaceSpace(key) {
|
||||
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("set-moveLeft-key").innerHTML = replaceSpace(getKeyName("moveLeft"))
|
||||
document.getElementById("set-moveRight-key").innerHTML = replaceSpace(getKeyName("moveRight"))
|
||||
document.getElementById("set-softDrop-key").innerHTML = replaceSpace(getKeyName("softDrop"))
|
||||
document.getElementById("set-hardDrop-key").innerHTML = replaceSpace(getKeyName("hardDrop"))
|
||||
document.getElementById("set-rotateCW-key").innerHTML = replaceSpace(getKeyName("rotateCW"))
|
||||
document.getElementById("set-rotateCCW-key").innerHTML = replaceSpace(getKeyName("rotateCCW"))
|
||||
document.getElementById("set-hold-key").innerHTML = replaceSpace(getKeyName("hold"))
|
||||
document.getElementById("set-pause-key").innerHTML = replaceSpace(getKeyName("pause"))
|
||||
|
||||
document.getElementById("autorepeatDelayRange").value = autorepeatDelay
|
||||
document.getElementById("autorepeatDelayRangeLabel").innerText = `Délai : ${autorepeatDelay}ms`
|
||||
document.getElementById("autorepeatPeriodRange").value = autorepeatPeriod
|
||||
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
|
||||
|
||||
document.getElementById("showGhostCheckbox").checked = showGhost
|
||||
|
||||
document.getElementById("settings").style.display = "block"
|
||||
document.getElementById("game").style.display = "none"
|
||||
document.getElementById("start").style.display = "none"
|
||||
document.getElementById("leaderboardLink").style.display = "none"
|
||||
@ -854,7 +862,12 @@ function autorepeatPeriodChanged() {
|
||||
document.getElementById("autorepeatPeriodRangeLabel").innerText = `Période : ${autorepeatPeriod}ms`
|
||||
}
|
||||
|
||||
//global variables
|
||||
function showGhostChanged() {
|
||||
showGhost = (document.getElementById("showGhostCheckbox").checked == true)
|
||||
localStorage.setItem("showGhost", showGhost)
|
||||
}
|
||||
|
||||
// global variables
|
||||
timeFormat = new Intl.DateTimeFormat("fr-FR", {
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
|
||||
Reference in New Issue
Block a user