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

format

Browse Source
This commit is contained in:
Adrien MALINGREY
2019-10-28 02:33:30 +01:00
parent affa958ab8
commit 0c8b42f3ea
4 changed files with 27 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/index.css
View File

@ -34,7 +34,7 @@ a {
text-decoration: none;
}
.actions {
#actions {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;

12
css/webtris.css
View File

@ -56,34 +56,34 @@ canvas {
width: 150px;
}
.hold {
#hold {
width: 120px;
}
.stats {
#stats {
display: flex;
flex-direction: row;
margin: 10% 0;
font-size: 1.2em;
}
.stats-names {
#stats-names {
font-family: 'Share Tech';
text-align: left;
}
.stats-values {
#stats-values {
text-align: right;
font-family: 'Share Tech Mono';
min-width: 90px;
}
.matrix {
#matrix {
margin: 5% 2%;
border: 0.5px solid grey;
}
.next {
#next {
width: 120px;
margin: 5% 2%;
}

33
js/webtris.js
View File

@ -160,19 +160,19 @@ class Tetromino {
[[ 0, -1], [ 1, -1], [-2, -1], [ 1, 1], [-2, -2]],
[[ 1, 0], [-1, 0], [ 2, 0], [-1, 1], [ 2, -2]],
]
break
break
case 'J':
this.color = "blue"
this.lightColor = "rgb(230, 240, 255)"
this.ghostColor = "rgba(230, 240, 255, 0.5)"
this.minoesPos = [[-1, -1], [-1, 0], [0, 0], [1, 0]]
break
break
case 'L':
this.color = "orange"
this.lightColor = "rgb(255, 224, 204)"
this.ghostColor = "rgba(255, 224, 204, 0.5)"
this.minoesPos = [[-1, 0], [0, 0], [1, 0], [1, -1]]
break
break
case 'O':
this.color = "yellow"
this.lightColor = "rgb(255, 255, 230)"
@ -180,25 +180,25 @@ class Tetromino {
this.minoesPos = [[0, 0], [1, 0], [0, -1], [1, -1]]
this.srs[SPIN.CW] = [[]]
this.srs[SPIN.CCW] = [[]]
break
break
case 'S':
this.color = "green"
this.lightColor = "rgb(236, 255, 230)"
this.ghostColor = "rgba(236, 255, 230, 0.5)"
this.minoesPos = [[-1, 0], [0, 0], [0, -1], [1, -1]]
break
break
case 'T':
this.color = "magenta"
this.lightColor= "rgb(242, 230, 255)"
this.ghostColor = "rgba(242, 230, 255, 0.5)"
this.minoesPos = [[-1, 0], [0, 0], [1, 0], [0, -1]]
break
break
case 'Z':
this.color = "red"
this.lightColor = "rgb(255, 230, 230)"
this.ghostColor = "rgba(255, 230, 230, 0.5)"
this.minoesPos = [[-1, -1], [0, -1], [0, 0], [1, 0]]
break
break
}
}
@ -233,8 +233,7 @@ function drawMino(context, pos, color1, color2=null, spotlight=[0, 0]) {
gradient.addColorStop(0, color1)
gradient.addColorStop(1, color2)
context.fillStyle = gradient
}
else
} else
context.fillStyle = color1
var topLeft = pos.mul(MINO_SIZE)
context.fillRect(...topLeft, MINO_SIZE, MINO_SIZE)
@ -314,8 +313,7 @@ class Stats {
if (linesCleared) {
patternName.push(SCORES[linesCleared].linesClearedName)
this.combo++
}
else
} else
this.combo = -1
if (linesCleared || tSpin) {
@ -433,10 +431,10 @@ class Matrix {
case STATE.PLAYING:
if (tempTexts.length)
texts = tempTexts[0]
break
break
case STATE.PAUSED:
texts = ["PAUSED"]
break
break
case STATE.GAME_OVER:
texts = ["GAME", "OVER"]
}
@ -525,8 +523,7 @@ function move(movement, testMinoesPos=matrix.piece.minoesPos) {
scheduler.setTimeout(locksDown, stats.lockDelay)
}
return true
}
else {
} else {
return false
}
}
@ -615,8 +612,7 @@ function autorepeat() {
scheduler.clearTimeout(autorepeat)
scheduler.setInterval(autorepeat, AUTOREPEAT_PERIOD)
}
}
else {
} else {
scheduler.clearTimeout(autorepeat)
scheduler.clearInterval(autorepeat)
}
@ -633,9 +629,8 @@ function keyDownHandler(e) {
actionsToRepeat.unshift(action)
scheduler.clearTimeout(autorepeat)
scheduler.clearInterval(autorepeat)
if (action == softDrop) {
if (action == softDrop)
scheduler.setInterval(autorepeat, stats.fallDelay / 20)
}
else
scheduler.setTimeout(autorepeat, AUTOREPEAT_DELAY)
}

12
webtris.html
View File

@ -13,11 +13,11 @@
<div class="flex-rows">
<div class="flex-columns">
<div class="flex-space"></div>
<canvas id="hold" class="hold" width="120" height="120"></canvas>
<canvas id="hold" width="120" height="120"></canvas>
</div>
<div class="flex-space"></div>
<div class="stats">
<div class="stats-names">
<div id="stats">
<div id="stats-names">
SCORE<br/>
RECORD<br/>
TEMPS<br/>
@ -25,13 +25,13 @@
OBJECTIF<br/>
LIGNES<br/>
</div>
<div id="stats-values" class="stats-values"></div>
<div id="stats-values"></div>
</div>
</div>
<canvas id="matrix" class="matrix" width="200" height="400">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
<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" class="next" width="120" height="400"></canvas>
<canvas id="next"width="120" height="400"></canvas>
</div>
</div>
</body>