first brick of menu
This commit is contained in:
flo
parent
0d8b03841b
commit
a64f682ae3
@ -4,20 +4,37 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Tetris on the web</title>
|
<title>Tetris on the web</title>
|
||||||
<link rel="stylesheet" href="./style/index.css" />
|
|
||||||
<script src="./script/index.js" defer></script>
|
<script src="./script/index.js" defer></script>
|
||||||
|
<link rel="stylesheet" href="./style/index.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div id="score" class="first">
|
<div id="left-part" class="first">
|
||||||
<p>
|
<p>
|
||||||
Score:
|
Score:
|
||||||
<span id="score-value">0</span>
|
<span id="score-value">0</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="tetris" class="tetris">
|
<div id="tetris" class="tetris">
|
||||||
<canvas id="tetris-canvas" width="300" height="600"></canvas>
|
<canvas class="hidden" id="tetris-canvas" width="300" height="600"></canvas>
|
||||||
|
<div class="main-menu hidden" id="main-menu" >
|
||||||
|
<button id="start-button">Start</button>
|
||||||
|
</div>
|
||||||
|
<div class="gameOver hidden">
|
||||||
|
<p>Game Over</p>
|
||||||
|
<button id="restart-button">Restart</button>
|
||||||
|
<button id="main-menu">Main Menu</button>
|
||||||
|
</div>
|
||||||
|
<div class="pause hidden">
|
||||||
|
<p>Paused</p>
|
||||||
|
<button id="resume-button">Resume</button>
|
||||||
|
<button id="main-menu">Main Menu</button>
|
||||||
|
</div>
|
||||||
|
<div class="load-menu" id="load-menu">
|
||||||
|
<span class="loader"></span>
|
||||||
|
<p>Loading...</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="last"></div>
|
<div class="last"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,5 +1,14 @@
|
|||||||
const board = document.getElementById('tetris-canvas');
|
const board = document.getElementById('tetris-canvas');
|
||||||
const scoreElement = document.getElementById('score-value');
|
const scoreElement = document.getElementById('score-value');
|
||||||
|
const loadMenu = document.getElementById('load-menu');
|
||||||
|
const mainMenu = document.getElementById('main-menu');
|
||||||
|
|
||||||
|
const startButton = document.getElementById('start-button');
|
||||||
|
|
||||||
|
startButton.addEventListener('click', () =>
|
||||||
|
{
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
const boardContext = board.getContext('2d');
|
const boardContext = board.getContext('2d');
|
||||||
|
|
||||||
@ -9,11 +18,7 @@ boardContext.fillRect(0, 0, board.width, board.height);
|
|||||||
const img = new Image();
|
const img = new Image();
|
||||||
img.src = '../img/PieceTetris.png';
|
img.src = '../img/PieceTetris.png';
|
||||||
|
|
||||||
let downInterval = setInterval(() => {
|
let downInterval;
|
||||||
moveDown();
|
|
||||||
|
|
||||||
refresh();
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
let rightInterval;
|
let rightInterval;
|
||||||
|
|
||||||
@ -78,14 +83,6 @@ const templatePiece = [
|
|||||||
]
|
]
|
||||||
];
|
];
|
||||||
|
|
||||||
const MOVELEFT = 1;
|
|
||||||
const MOVERIGHT = 2;
|
|
||||||
const MOVEDOWN = 3;
|
|
||||||
const ROTATE = 4;
|
|
||||||
const MOVEDOWNFAST = 5;
|
|
||||||
const RESPAWN = 6;
|
|
||||||
|
|
||||||
const history = [];
|
|
||||||
|
|
||||||
|
|
||||||
const templateColor = [
|
const templateColor = [
|
||||||
@ -136,10 +133,26 @@ let color = []
|
|||||||
|
|
||||||
let boardData = [];
|
let boardData = [];
|
||||||
|
|
||||||
for (let i = 0; i < 10; i++) {
|
const MOVELEFT = 1;
|
||||||
boardData[i] = [];
|
const MOVERIGHT = 2;
|
||||||
for (let j = 0; j < 20; j++) {
|
const MOVEDOWN = 3;
|
||||||
boardData[i][j] = [0, 0, 0, 255];
|
const ROTATE = 4;
|
||||||
|
const MOVEDOWNFAST = 5;
|
||||||
|
const RESPAWN = 6;
|
||||||
|
|
||||||
|
const history = [];
|
||||||
|
|
||||||
|
function startGame() {
|
||||||
|
boardData = [];
|
||||||
|
currentPiece = [];
|
||||||
|
color = [];
|
||||||
|
history = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
boardData[i] = [];
|
||||||
|
for (let j = 0; j < 20; j++) {
|
||||||
|
boardData[i][j] = [0, 0, 0, 255];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -434,65 +447,64 @@ function fasteDrop() {
|
|||||||
history.push([MOVEDOWNFAST, 0]);
|
history.push([MOVEDOWNFAST, 0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
img.onload = () => {
|
document.addEventListener('keydown', (event) => {
|
||||||
initAndChangeSpeedDrop();
|
if (event.key == 'ArrowUp' && !keyPress.includes('ArrowUp')) {
|
||||||
loadTetris();
|
rotate();
|
||||||
refresh();
|
} else if (event.key == 'ArrowDown' && !keyPress.includes('ArrowDown')) {
|
||||||
|
clearInterval(downInterval);
|
||||||
|
downInterval = setInterval(() => {
|
||||||
|
moveDown();
|
||||||
|
|
||||||
|
refresh();
|
||||||
|
}, 50);
|
||||||
|
} else if (event.key == 'ArrowLeft' && !keyPress.includes('ArrowLeft')) {
|
||||||
|
moveLeft();
|
||||||
|
|
||||||
document.addEventListener('keydown', (event) => {
|
leftInterval = setInterval(() => {
|
||||||
if (event.key == 'ArrowUp' && !keyPress.includes('ArrowUp')) {
|
|
||||||
rotate();
|
|
||||||
} else if (event.key == 'ArrowDown' && !keyPress.includes('ArrowDown')) {
|
|
||||||
clearInterval(downInterval);
|
|
||||||
downInterval = setInterval(() => {
|
|
||||||
moveDown();
|
|
||||||
|
|
||||||
refresh();
|
|
||||||
}, 50);
|
|
||||||
} else if (event.key == 'ArrowLeft' && !keyPress.includes('ArrowLeft')) {
|
|
||||||
moveLeft();
|
moveLeft();
|
||||||
|
|
||||||
leftInterval = setInterval(() => {
|
refresh();
|
||||||
moveLeft();
|
}, 100);
|
||||||
|
} else if (event.key == 'ArrowRight' && !keyPress.includes('ArrowRight')) {
|
||||||
|
moveRight();
|
||||||
|
|
||||||
refresh();
|
rightInterval = setInterval(() => {
|
||||||
}, 100);
|
|
||||||
} else if (event.key == 'ArrowRight' && !keyPress.includes('ArrowRight')) {
|
|
||||||
moveRight();
|
moveRight();
|
||||||
|
refresh();
|
||||||
|
}, 100);
|
||||||
|
} else if (event.key == ' ' && !keyPress.includes(' ')) {
|
||||||
|
fasteDrop();
|
||||||
|
}
|
||||||
|
|
||||||
rightInterval = setInterval(() => {
|
refresh();
|
||||||
moveRight();
|
|
||||||
refresh();
|
|
||||||
}, 100);
|
|
||||||
} else if (event.key == ' ' && !keyPress.includes(' ')) {
|
|
||||||
fasteDrop();
|
|
||||||
}
|
|
||||||
|
|
||||||
refresh();
|
console.log(event.key);
|
||||||
|
|
||||||
console.log(event.key);
|
keyPress.push(event.key);
|
||||||
|
});
|
||||||
|
|
||||||
keyPress.push(event.key);
|
document.addEventListener('keyup', (event) => {
|
||||||
|
if (event.key == 'ArrowDown') {
|
||||||
|
clearInterval(downInterval);
|
||||||
|
downInterval = setInterval(() => {
|
||||||
|
moveDown();
|
||||||
|
|
||||||
|
refresh();
|
||||||
|
}, 1000);
|
||||||
|
} else if (event.key == 'ArrowLeft') {
|
||||||
|
clearInterval(leftInterval);
|
||||||
|
} else if (event.key == 'ArrowRight') {
|
||||||
|
clearInterval(rightInterval);
|
||||||
|
}
|
||||||
|
|
||||||
|
keyPress = keyPress.filter((key) => {
|
||||||
|
return key != event.key;
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener('keyup', (event) => {
|
img.onload = () => {
|
||||||
if (event.key == 'ArrowDown') {
|
loadMenu.classList.add('hidden');
|
||||||
clearInterval(downInterval);
|
mainMenu.classList.remove('hidden');
|
||||||
downInterval = setInterval(() => {
|
|
||||||
moveDown();
|
|
||||||
|
|
||||||
refresh();
|
|
||||||
}, 1000);
|
|
||||||
} else if (event.key == 'ArrowLeft') {
|
|
||||||
clearInterval(leftInterval);
|
|
||||||
} else if (event.key == 'ArrowRight') {
|
|
||||||
clearInterval(rightInterval);
|
|
||||||
}
|
|
||||||
|
|
||||||
keyPress = keyPress.filter((key) => {
|
|
||||||
return key != event.key;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -21,9 +21,6 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
div {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
@ -31,12 +28,78 @@ body {
|
|||||||
.tetris {
|
.tetris {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 600px;
|
height: 600px;
|
||||||
|
|
||||||
|
background: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.first {
|
.first {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.last {
|
.last {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-menu {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-menu {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border: 5px solid #FFF;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
animation: pulse 1s linear infinite;
|
||||||
|
}
|
||||||
|
.loader:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border: 5px solid #FFF;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
animation: scaleUp 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scaleUp {
|
||||||
|
0% { transform: translate(-50%, -50%) scale(0) }
|
||||||
|
60% , 100% { transform: translate(-50%, -50%) scale(1)}
|
||||||
|
}
|
||||||
|
@keyframes pulse {
|
||||||
|
0% , 60% , 100%{ transform: scale(1) }
|
||||||
|
80% { transform: scale(1.2)}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user