adminflsu/Tetris-on-the-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change piece and color

Browse Source
This commit is contained in:
flo 2025-04-23 14:09:50 +02:00
parent 2052f8ed3b
commit f26e4c553a
3 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -38,7 +38,7 @@
</div> </div>
</div> </div>
<div class="last"> <div class="last">
<button id="pause-button">Pause And Resume</button> <label id="pause-button">Pause And Resume</label>
<canvas id="preview-canvas" width="100" height="100"></canvas> <canvas id="preview-canvas" width="100" height="100"></canvas>
</div> </div>
</div> </div>

24
public/script/view.js
View File

@ -1,17 +1,21 @@
let gapPiece = 6;
function drawTetisWithOppacity(x, y, color, oppacity) { function drawTetisWithOppacity(x, y, color, oppacity) {
boardContext.drawImage(img, x, y, board.width/10, board.width/10); boardContext.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${oppacity/255})`
boardContext.fillRect(x + gapPiece/2, y + gapPiece/2, board.width/10 - gapPiece, board.width/10 - gapPiece);
// boardContext.drawImage(img, x, y, board.width/10, board.width/10);
const imageData = boardContext.getImageData(x, y, board.width/10, board.width/10); // const imageData = boardContext.getImageData(x, y, board.width/10, board.width/10);
const data = imageData.data; // const data = imageData.data;
for (let i = 0; i < data.length; i += 4) { // for (let i = 0; i < data.length; i += 4) {
data[i] = data[i] * color[0] / 255; // data[i] = data[i] * color[0] / 255;
data[i + 1] = data[i + 1] * color[1] / 255; // data[i + 1] = data[i + 1] * color[1] / 255;
data[i + 2] = data[i + 2] * color[2] / 255; // data[i + 2] = data[i + 2] * color[2] / 255;
data[i + 3] = data[i + 3] * oppacity / 255; // data[i + 3] = data[i + 3] * oppacity / 255;
} // }
boardContext.putImageData(imageData, x, y); // boardContext.putImageData(imageData, x, y);
} }
function drawTetrisOnThePreview(x, y, color) { function drawTetrisOnThePreview(x, y, color) {

16
public/style/index.css
View File

@ -5,8 +5,8 @@ body {
place-items: center; place-items: center;
background: repeating-conic-gradient( background: repeating-conic-gradient(
from 45deg, from 45deg,
#253a5e 0% 25%, #fff34f 0% 25%,
#3c5e8b 0% 50% #ff8b07 0% 50%
); );
background-size: max(10vw, 10svh) max(10vw, 10svh); background-size: max(10vw, 10svh) max(10vw, 10svh);
background-color: #3c5e8b; background-color: #3c5e8b;
@ -29,19 +29,21 @@ body {
width: 300px; width: 300px;
height: 600px; height: 600px;
background: black; padding: 10px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
background: rgb(34, 34, 34);
} }
.first { .first {
width: 150px; width: 150px;
background: white;
} }
.last { .last {
width: 150px; width: 150px;
background: white;
} }
.main-menu { .main-menu {