format
This commit is contained in:
parent
20ed771442
commit
5697684ac0
101
css/index.css
101
css/index.css
@ -1,50 +1,51 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Share Tech';
|
font-family: 'Share Tech';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local('Share Tech Regular'), local('ShareTech-Regular'), url(../fonts/ShareTech.woff2) format('woff2');
|
src: local('Share Tech Regular'), local('ShareTech-Regular'), url(../fonts/ShareTech.woff2) format('woff2');
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Share Tech';
|
font-family: 'Share Tech';
|
||||||
font-size: 1.05em;
|
font-size: 1.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-image: url("../images/bg.jpg");
|
background-image: url("../images/bg.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3em;
|
font-size: 50px;
|
||||||
margin: 20px;
|
margin: 40px;
|
||||||
text-shadow: 3px 2px rgb(153, 145, 175);
|
text-shadow: 3px 2px rgb(153, 145, 175);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
color: black;
|
color: black;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: lightcyan;
|
color: lightcyan;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#actions {
|
#actions {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
grid-gap: 20px;
|
grid-gap: 20px;
|
||||||
margin: 80px auto;
|
margin: 40px auto;
|
||||||
width: 700px;
|
width: 700px;
|
||||||
justify-items: left;
|
justify-items: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.play {
|
#play {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-shadow: 2px 1px rgb(153, 145, 175);
|
text-shadow: 2px 1px rgb(153, 145, 175);
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
margin 40px;
|
||||||
|
}
|
||||||
|
|||||||
177
css/webtris.css
177
css/webtris.css
@ -1,89 +1,90 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Share Tech';
|
font-family: 'Share Tech';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local('Share Tech Regular'), local('ShareTech-Regular'), url(../fonts/ShareTech.woff2) format('woff2');
|
src: local('Share Tech Regular'), local('ShareTech-Regular'), url(../fonts/ShareTech.woff2) format('woff2');
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Share Tech Mono';
|
font-family: 'Share Tech Mono';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(../fonts/ShareTechMono.woff2) format('woff2');
|
src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(../fonts/ShareTechMono.woff2) format('woff2');
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Share Tech';
|
font-family: 'Share Tech';
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-image: url("../images/bg.jpg");
|
background-image: url("../images/bg.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3em;
|
font-size: 50px;
|
||||||
margin: 40px 20px 20px 20px;
|
margin: 40px;
|
||||||
text-shadow: 3px 2px rgb(153, 145, 175);
|
text-shadow: 3px 2px rgb(153, 145, 175);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
display: block;
|
display: block;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-columns {
|
.flex-columns {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-space {
|
.flex-space {
|
||||||
flex-grow: 2;
|
flex-grow: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-rows {
|
.flex-rows {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 5% 2%;
|
margin: 5% 2%;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#hold {
|
#hold {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
justify-content: right;
|
||||||
|
}
|
||||||
#stats {
|
|
||||||
display: flex;
|
#stats {
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
margin: 10% 0;
|
flex-direction: row;
|
||||||
font-size: 1.2em;
|
margin: 10% 0;
|
||||||
}
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
#stats-names {
|
|
||||||
font-family: 'Share Tech';
|
#stats-names {
|
||||||
text-align: left;
|
font-family: 'Share Tech';
|
||||||
}
|
text-align: left;
|
||||||
|
}
|
||||||
#stats-values {
|
|
||||||
text-align: right;
|
#stats-values {
|
||||||
font-family: 'Share Tech Mono';
|
text-align: right;
|
||||||
min-width: 90px;
|
font-family: 'Share Tech Mono';
|
||||||
}
|
min-width: 90px;
|
||||||
|
}
|
||||||
#matrix {
|
|
||||||
margin: 5% 2%;
|
#matrix {
|
||||||
border: 0.5px solid grey;
|
margin: 5% 2%;
|
||||||
}
|
border: 0.5px solid grey;
|
||||||
|
}
|
||||||
#next {
|
|
||||||
width: 120px;
|
#next {
|
||||||
margin: 5% 2%;
|
width: 120px;
|
||||||
|
margin: 5% 2%;
|
||||||
}
|
}
|
||||||
70
index.php
70
index.php
@ -1,36 +1,36 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Webtris</title>
|
<title>Webtris</title>
|
||||||
<link rel="stylesheet" type="text/css" href="css/index.css" />
|
<link rel="stylesheet" type="text/css" href="css/index.css" />
|
||||||
<script type="text/javascript" src="js/index.js"></script>
|
<script type="text/javascript" src="js/index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>WEBTRIS</h1>
|
<h1>WEBTRIS</h1>
|
||||||
<div id="actions">
|
<div id="actions">
|
||||||
<?php
|
<?php
|
||||||
$actionLabel = array(
|
$actionLabel = array(
|
||||||
"moveLeft" => "GAUCHE",
|
"moveLeft" => "GAUCHE",
|
||||||
"moveRight" => "DROITE",
|
"moveRight" => "DROITE",
|
||||||
"softDrop" => "CHUTE LENTE",
|
"softDrop" => "CHUTE LENTE",
|
||||||
"hardDrop" => "CHUTE RAPIDE",
|
"hardDrop" => "CHUTE RAPIDE",
|
||||||
"rotateCW" => "ROTATION HORAIRE",
|
"rotateCW" => "ROTATION HORAIRE",
|
||||||
"rotateCCW" => "ROTATE INVERSE",
|
"rotateCCW" => "ROTATE INVERSE",
|
||||||
"hold" => "GARDE",
|
"hold" => "GARDE",
|
||||||
"pause" => "PAUSE",
|
"pause" => "PAUSE",
|
||||||
);
|
);
|
||||||
foreach($actionLabel as $action => $label)
|
foreach($actionLabel as $action => $label)
|
||||||
{
|
{
|
||||||
echo " <div>$label</div>\n";
|
echo " <div>$label</div>\n";
|
||||||
echo " <button type='button' onclick='changeKey(this, \"$action\")'>\n";
|
echo " <button type='button' onclick='changeKey(this, \"$action\")'>\n";
|
||||||
echo " <script>getKey(\"$action\")</script>\n";
|
echo " <script>getKey(\"$action\")</script>\n";
|
||||||
echo " </button>\n";
|
echo " </button>\n";
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
<div class="play">
|
<div id="play">
|
||||||
<a href="webtris.html"><b>JOUER</b></a>
|
<a href="webtris.html"><b>JOUER</b></a>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
1565
js/webtris.js
1565
js/webtris.js
File diff suppressed because it is too large
Load Diff
82
webtris.html
82
webtris.html
@ -1,38 +1,46 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Webtris</title>
|
<title>Webtris</title>
|
||||||
<link rel="stylesheet" type="text/css" href="css/webtris.css" />
|
<link rel="stylesheet" type="text/css" href="css/webtris.css" />
|
||||||
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
|
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
|
||||||
<script type="text/javascript" src="js/webtris.js"></script>
|
<script type="text/javascript" src="js/webtris.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>WEBTRIS</h1>
|
<h1>WEBTRIS</h1>
|
||||||
<div class="flex-columns">
|
<div class="flex-columns">
|
||||||
<div class="flex-rows">
|
<div class="flex-rows">
|
||||||
<div class="flex-columns">
|
<canvas id="hold" width="120" height="120"></canvas>
|
||||||
<div class="flex-space"></div>
|
<div class="flex-columns">
|
||||||
<canvas id="hold" width="120" height="120"></canvas>
|
<div class="flex-space"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-space"></div>
|
<div id="stats">
|
||||||
<div id="stats">
|
<div id="stats-names">
|
||||||
<div id="stats-names">
|
SCORE<br/>
|
||||||
SCORE<br/>
|
RECORD<br/>
|
||||||
RECORD<br/>
|
TEMPS<br/>
|
||||||
TEMPS<br/>
|
<br />
|
||||||
NIVEAU<br/>
|
NIVEAU<br/>
|
||||||
OBJECTIF<br/>
|
OBJECTIF<br/>
|
||||||
LIGNES<br/>
|
LIGNES
|
||||||
</div>
|
</div>
|
||||||
<div id="stats-values"></div>
|
<div id="stats-values">
|
||||||
</div>
|
0<br/>
|
||||||
|
0<br/>
|
||||||
</div>
|
00:00<br/>
|
||||||
<canvas id="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
|
<br/>
|
||||||
<div class="flex-rows">
|
0<br/>
|
||||||
<canvas id="next"width="120" height="400"></canvas>
|
0<br/>
|
||||||
</div>
|
0
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<canvas id="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
|
||||||
|
<div class="flex-rows">
|
||||||
|
<canvas id="next"width="120" height="400"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user