|
Сообщение от prototip
|
|
low, medium, hight
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
#canvas {
width: 300;
height: 300;
border: 2px solid black;
margin: 40px;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<label for="height">Высота:</label>
<input type="text" class="inputText" id="height" value="147" />
<label for="width">Ширина:</label>
<input type="text" class="inputText" id="width" value="147" />
<input type="button" value="Создать поле" class="btn red" id="create" />
<p>Таймер: <span id="count">0</span></p>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>
<label>Speed:</label>
<label><input type="radio" name="speed" value="800"/>low</label>
<label><input type="radio" name="speed" value="300" checked/>medium</label>
<label><input type="radio" name="speed" value="100"/>hight</label>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let widthInput = document.getElementById("width");
let heightInput = document.getElementById("height");
let count = document.getElementById('count');
let width, height, n, m;
let xRect = 10;
let yRect = 10;
let mas = [];
let timer;
let maxWidth = 1000;
let maxHeight = 1000;
canvas.onclick = function(event) {
event.stopPropagation();
let x = event.offsetX;
let y = event.offsetY;
x = Math.floor(x / xRect);
y = Math.floor(y / yRect);
mas[y][x] = 1;
drawField();
};
function resizeCanvas() {
width = Math.min(widthInput.value, maxWidth);
height = Math.min(heightInput.value, maxHeight);
let str = "";
if(width == maxWidth) str += ` Установлена максимальная ширина поля игры ${maxWidth}`
if(height == maxHeight) str += ` Установлена максимальная высота поля игры ${maxWidth}`
if(str) alert(str);
width = Math.trunc(width/xRect) * xRect;
height = Math.trunc(height/yRect) * yRect;
canvas.width = widthInput.value = width;
canvas.height = heightInput.value = height;
n = width / xRect;
m = height / yRect;
goLife();
}
function goLife() {
for (let i = 0; i < m; i++) {
mas[i] = [];
for (let j = 0; j < n; j++) {
mas[i][j] = 0;
}
}
}
resizeCanvas();
function drawField() {
ctx.clearRect(0, 0, width, height);
for (let i = 0; i < m; i++) {
for (let j = 0; j < n; j++) {
if (mas[i][j] === 1) {
ctx.fillRect(j * xRect, i * yRect, xRect, yRect);
}
}
}
}
function startLife() {
pauseLife();
let mas2 = [];
for (let i = 0; i < m; i++) {
mas2[i] = [];
for (let j = 0; j < n; j++) {
let neighbors = [-1, 1].reduce((a, b) => {
b = mas[i + b];
if (b === undefined)
return a;
let num = b[j];
if (b[j + 1] !== undefined) {
num += b[j + 1]
}
if (b[j - 1] !== undefined) {
num += b[j - 1]
}
return a + num;
}, 0);
neighbors = [-1, 1].reduce((a, b) => a += mas[i][j + b] !== undefined && mas[i][j + b], neighbors);
mas2[i][j] = +(neighbors == 3 || (mas[i][j] && neighbors == 2));
}
}
mas = mas2;
drawField();
count.innerHTML++;
const delay = document.querySelector("[name='speed']:checked").value;
timer = setTimeout(startLife, delay);
}
function pauseLife() {
clearInterval(timer)
}
function stopLife() {
pauseLife();
goLife();
drawField();
count.innerHTML = 0;
}
document.getElementById("create").onclick = resizeCanvas;
document.getElementById("start").onclick = startLife;
document.getElementById("pause").onclick = pauseLife;
document.getElementById("stop").onclick = stopLife;
</script>
</body>
</html>
