226 lines
8.0 KiB
HTML
226 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Tetrissimo</title>
|
|
<style>
|
|
body {
|
|
background-color: lightgray;
|
|
}
|
|
</style>
|
|
<link rel="shortcut icon" type="image/gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
|
|
</head>
|
|
<body>
|
|
<div style="display: flex">
|
|
<canvas id="canvas" width="480" height="600"></canvas>
|
|
|
|
<div style="margin-left: 20px">
|
|
<table>
|
|
<tr>
|
|
<th style="text-align: right"><label for="pixelSize">Pixel size:</label></th>
|
|
<td><input type="range" step="1" id="pixelSize" value="4" min="1" max="16"/></td>
|
|
<td><code id="pixelSizeValue"></code></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="text-align: right"><label for="borderWidth">Border width:</label></th>
|
|
<td><input type="range" step="1" id="borderWidth" value="2" min="0" max="8"/></td>
|
|
<td><code id="borderWidthValue"></code></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="text-align: right"><label for="padding">Padding:</label></th>
|
|
<td><input type="range" step="1" id="padding" value="4" min="0" max="16"/></td>
|
|
<td><code id="paddingValue"></code></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="text-align: right"><label for="gridLines">Grid lines:</label></th>
|
|
<td><input type="checkbox" id="gridLines" checked/></td>
|
|
<td><code id="gridLinesValue"></code></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="text-align: right"><label for="gridLineSize">Grid line size:</label></th>
|
|
<td><input type="range" id="gridLineSize" value="4" step="1" min="1" max="16"/></td>
|
|
<td><code id="gridLineSizeValue"></code></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="text-align: right"><label for="hudWidth">HUD width:</label></th>
|
|
<td><input type="range" id="hudWidth" value="32" step="4" min="4" max="64"/></td>
|
|
<td><code id="hudWidthValue"></code></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="text-align: right"><label for="hudHeight">HUD height:</label></th>
|
|
<td><input type="range" id="hudHeight" value="12" step="4" min="4" max="64"/></td>
|
|
<td><code id="hudHeightValue"></code></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="text-align: right"><label for="playAreaWidth">Play Area width:</label></th>
|
|
<td><input type="range" id="playAreaWidth" value="64" step="4" min="16" max="80"/></td>
|
|
<td><code id="playAreaWidthValue"></code></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="text-align: right"><label for="playAreaHeight">Play Area height:</label></th>
|
|
<td><input type="range" id="playAreaHeight" value="128" step="4" min="16" max="256"/></td>
|
|
<td><code id="playAreaHeightValue"></code></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="text-align: right"><label for="fps">FPS:</label></th>
|
|
<td><input type="range" id="fps" value="60" step="1" min="1" max="120"/></td>
|
|
<td><code id="fpsValue"></code></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="text-align: right"><label for="level">Level:</label></th>
|
|
<td><input type="range" id="level" value="1" step="1" min="1" max="10"/></td>
|
|
<td><code id="levelValue"></code></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<br />
|
|
|
|
<button id="playButton">Play</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script src="requirejs-polyfill.js"></script>
|
|
<script src="tetrissimo.js"></script>
|
|
<script>
|
|
(function() {
|
|
const playBtn = document.getElementById('playButton');
|
|
|
|
const pixelSizeRange = document.getElementById('pixelSize');
|
|
const pixelSizeValue = document.getElementById('pixelSizeValue');
|
|
const paddingRange = document.getElementById('padding');
|
|
const paddingValue = document.getElementById('paddingValue');
|
|
const gridLinesCheckbox = document.getElementById('gridLines');
|
|
const gridLinesValue = document.getElementById('gridLinesValue');
|
|
const gridLineSizeRange = document.getElementById('gridLineSize');
|
|
const gridLineSizeValue = document.getElementById('gridLineSizeValue');
|
|
const borderWidthRange = document.getElementById('borderWidth');
|
|
const borderWidthValue = document.getElementById('borderWidthValue');
|
|
const hudWidthRange = document.getElementById('hudWidth');
|
|
const hudWidthValue = document.getElementById('hudWidthValue');
|
|
const hudHeightRange = document.getElementById('hudHeight');
|
|
const hudHeightValue = document.getElementById('hudHeightValue');
|
|
const playAreaWidthRange = document.getElementById('playAreaWidth');
|
|
const playAreaWidthValue = document.getElementById('playAreaWidthValue');
|
|
const playAreaHeightRange = document.getElementById('playAreaHeight');
|
|
const playAreaHeightValue = document.getElementById('playAreaHeightValue');
|
|
const fpsRange = document.getElementById('fps');
|
|
const fpsValue = document.getElementById('fpsValue');
|
|
const levelRange = document.getElementById('level');
|
|
const levelValue = document.getElementById('levelValue');
|
|
|
|
const updateCanvas = () => {
|
|
const pixelSize = Number(pixelSizeRange.value);
|
|
const padding = Number(paddingRange.value);
|
|
const gridLineSize = Number(gridLineSizeRange.value);
|
|
const gridLines = gridLinesCheckbox.checked;
|
|
const borderWidth = Number(borderWidthRange.value);
|
|
const hudWidth = Number(hudWidthRange.value);
|
|
const hudHeight = Number(hudHeightRange.value);
|
|
const playAreaWidth = Number(playAreaWidthRange.value);
|
|
const playAreaHeight = Number(playAreaHeightRange.value);
|
|
|
|
pixelSizeValue.innerHTML = pixelSize.toString();
|
|
paddingValue.innerHTML = padding.toString();
|
|
gridLinesValue.innerHTML = gridLines ? 'on' : 'off';
|
|
gridLineSizeValue.innerHTML = gridLineSize.toString()
|
|
borderWidthValue.innerHTML = borderWidth.toString();
|
|
hudWidthValue.innerHTML = hudWidth.toString();
|
|
hudHeightValue.innerHTML = hudHeight.toString();
|
|
playAreaWidthValue.innerHTML = playAreaWidth.toString();
|
|
playAreaHeightValue.innerHTML = playAreaHeight.toString();
|
|
|
|
ui.setOptions({
|
|
pixelSize,
|
|
x: 0,
|
|
y: 0,
|
|
padding,
|
|
gridLines: gridLines ? gridLineSize : false,
|
|
borderWidth,
|
|
hud: {
|
|
width: hudWidth,
|
|
height: hudHeight,
|
|
},
|
|
playArea: {
|
|
width: playAreaWidth,
|
|
height: playAreaHeight,
|
|
}
|
|
});
|
|
|
|
ui.update();
|
|
};
|
|
|
|
pixelSizeRange.addEventListener('change', updateCanvas);
|
|
paddingRange.addEventListener('change', updateCanvas);
|
|
gridLineSizeRange.addEventListener('change', updateCanvas);
|
|
borderWidthRange.addEventListener('change', updateCanvas);
|
|
gridLinesCheckbox.addEventListener('input', updateCanvas);
|
|
hudWidthRange.addEventListener('change', updateCanvas);
|
|
hudHeightRange.addEventListener('change', updateCanvas);
|
|
playAreaWidthRange.addEventListener('change', updateCanvas);
|
|
playAreaHeightRange.addEventListener('change', updateCanvas);
|
|
|
|
playBtn.addEventListener('click', () => {
|
|
if (game.getState() === 'running') {
|
|
game.pause();
|
|
} else {
|
|
game.start();
|
|
}
|
|
});
|
|
|
|
const updateFps = () => {
|
|
const fps = Number(fpsRange.value);
|
|
fpsValue.innerHTML = fps.toString();
|
|
game.setTargetFps(fps);
|
|
};
|
|
|
|
fpsRange.addEventListener('change', updateFps);
|
|
|
|
const updateLevel = () => {
|
|
const level = Number(levelRange.value);
|
|
levelValue.innerHTML = level.toString();
|
|
|
|
const tetrissimoLevel = TetrissimoLevel['level' + level];
|
|
if (!tetrissimoLevel) {
|
|
throw new Error(`invalid level number "${level}"`);
|
|
}
|
|
|
|
game.setLevel(tetrissimoLevel);
|
|
};
|
|
|
|
levelRange.addEventListener('change', updateLevel);
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
const performAction = (type) => {
|
|
e.preventDefault();
|
|
game.performPieceAction({ type });
|
|
};
|
|
|
|
switch (e.code) {
|
|
case 'KeyA':
|
|
performAction('moveLeft');
|
|
break;
|
|
case 'KeyS':
|
|
performAction('moveDown');
|
|
break;
|
|
case 'KeyD':
|
|
performAction('moveRight');
|
|
break;
|
|
case 'Space':
|
|
performAction('rotateRight');
|
|
break;
|
|
case 'ShiftLeft':
|
|
performAction('rotateLeft');
|
|
break;
|
|
}
|
|
})
|
|
|
|
updateCanvas();
|
|
updateFps();
|
|
updateLevel();
|
|
}());
|
|
</script>
|
|
</body>
|
|
</html>
|