Цитата:
<!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>
|
рони,
спасибо |
рони,
prototip, Насколько я помню, логика в этой игре другая. |
|
ekaterina22,
согласен, правила игру другие, спасибо что нашли мне новую работёнку) |
ekaterina22,
Цитата:
mas2[i][j] = +(neighbors == 3 || (mas[i][j] && neighbors == 2)); |
рони,
подскажите пожалуйста, начал тестить игру и если выставить большие размеры поля игры(например 100000х100000) игра падает из-за ошибки по памяти. Поэтому решил показывать предупреждение, что такой размер нельзя создать. Вставил после 55 строки:
if(canvas.width >= 1000 || canvas.height >= 1000) {
alert("Максимальный размер поля игры 1000")
}
вылетает предупреждение алерт с моим текстом, и при нажатии кнопки ОК, поле создается. Как сделать, чтобы после нажатия ОК поле не создавалось, а можно было бы вводить заново новый размер. Или есть другой способ как это можно сделать? |
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="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>
<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++;
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>
|
рони,
спасибо за помощь |
рони,
подскажите пожалуйста, при многократном нажатии на кнопку start скорость игры увеличивается с каждым нажатием, при этом нужно столько же нажать на кнопку стоп, чтобы остановить игру. Решил этот баг убрать, но итоге решил добавить 3 радиокнопки, которые будут настраивать скорость игры(low, medium, hight), при этом medium скорость будет стоять по умолчанию. как это можно реализовать?
<label>Speed:</label>
<input type="radio" id="low" /> <label>low </label>
<input type="radio" id="medium" checked/> <label>medium </label>
<input type="radio" id="hight" /> <label>hight </label>
|
| Часовой пояс GMT +3, время: 20:24. |