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 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>
</div>
</div>

24
public/script/view.js
View File

@ -1,17 +1,21 @@
let gapPiece = 6;
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 data = imageData.data;
// const imageData = boardContext.getImageData(x, y, board.width/10, board.width/10);
// const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
data[i] = data[i] * color[0] / 255;
data[i + 1] = data[i + 1] * color[1] / 255;
data[i + 2] = data[i + 2] * color[2] / 255;
data[i + 3] = data[i + 3] * oppacity / 255;
}
// for (let i = 0; i < data.length; i += 4) {
// data[i] = data[i] * color[0] / 255;
// data[i + 1] = data[i + 1] * color[1] / 255;
// data[i + 2] = data[i + 2] * color[2] / 255;
// data[i + 3] = data[i + 3] * oppacity / 255;
// }
boardContext.putImageData(imageData, x, y);
// boardContext.putImageData(imageData, x, y);
}
function drawTetrisOnThePreview(x, y, color) {

16
public/style/index.css
View File

@ -5,8 +5,8 @@ body {
place-items: center;
background: repeating-conic-gradient(
from 45deg,
#253a5e 0% 25%,
#3c5e8b 0% 50%
#fff34f 0% 25%,
#ff8b07 0% 50%
);
background-size: max(10vw, 10svh) max(10vw, 10svh);
background-color: #3c5e8b;
@ -29,19 +29,21 @@ body {
width: 300px;
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 {
width: 150px;
background: white;
}
.last {
width: 150px;
background: white;
}
.main-menu {