|
Сообщение от prototip
|
|
при нажатии кнопки "Стоп" игра остановилась, таймер сбросился на ноль и я смог заново начать игру
|
<!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="330" />
<label for="width">Ширина:</label>
<input type="text" class="inputText" id="width" value="220" />
<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>
<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 = 7;
let yRect = 19;
let mas = [];
let timer;
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() {
canvas.width = widthInput.value = (widthInput.value/xRect|0) * xRect;
canvas.height = heightInput.value = (heightInput.value/yRect|0) * yRect;
width = canvas.width;
height = canvas.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() {
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 == 2 || neighbors == 3)
}
}
mas = mas2;
drawField();
count.innerHTML++;
timer = setTimeout(startLife, 300);
}
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>