<!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>