Форум

prototip · #1 (**permalink**) 15.05.2021, 12:12

Всем привет. Нужна помощь. При написании игры "ЖИЗНЬ" столкнулся с проблемой, при выставлении нужного нам размера игры в поле ввода "ширина и высота", меняется размер. Сейчас все построено на том, что у поля постоянный размер(т.е. если например выставить размер игры 500х500, игра будет работать только в поле 300х300 т.к. это стандартный размер). Как это можно реализовать?
Ссылка на работу игры:
https://codepen.io/Siarhei1607/pen/JjWYpqW

рони · #2 (**permalink**) 15.05.2021, 13:58

prototip,
забавно ...

else {
mas2[i][j] == 0;
}

рони · #3 (**permalink**) 15.05.2021, 14:07

prototip,

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        #canvas {
            width: 300;
            height: 300;
            border: 2px solid black;
            margin: 40px;
        }
    </style>
    <title>life</title>
</head>

<body>
    <canvas id="canvas" width="300" height="300"></canvas>

    <label for="height">Высота:</label>
    <input type="text" class="inputText" id="height"  value="500"/>
    <label for="width">Ширина:</label>
    <input type="text" class="inputText" id="width"  value="500"/>
    <input type="button" value="Создать поле" class="btn red" id="create" />
    <p>Таймер: <span id="count">0</span></p>
    <button id="start">Start</button>
    <script>
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        let width = document.getElementById("width");
        let height = document.getElementById("height");
        let mas = [];
        let count = 0;
        let timer;

        canvas.onclick = function(event) {
            let x = event.offsetX;
            let y = event.offsetY;

            x = Math.floor(x / 10);
            y = Math.floor(y / 10);

            mas[y][x] = 1;
            drawField();
        };

        function resizeCanvas() {
            canvas.width = width.value;
            canvas.height = height.value;
            goLife();
        }

        function goLife() {
            let width = canvas.width;
            let height = canvas.height;
            let n = width / 10;
            let m = height / 10;

            for (let i = 0; i < m; i++) {
                mas[i] = [];
                for (let j = 0; j < n; j++) {
                    mas[i][j] = 0;
                }
            }
        }
        goLife();

        function drawField() {
            let width = canvas.width;
            let height = canvas.height;
            ctx.clearRect(0, 0, width, height);
            for (let i = 0; i < height / 10; i++) {
                for (let j = 0; j < width / 10; j++) {
                    if (mas[i][j] == 1) {
                        ctx.fillRect(j * 10, i * 10, 10, 10);
                    }
                }
            }
        }

        function startLife() {
            let mas2 = [];
            let width = canvas.width;
            let height = canvas.height;
            for (let i = 0; i < height / 10; i++) {
                mas2[i] = [];
                for (let j = 0; j < width / 10; j++) {
                    let neighbors = [-1, 1].reduce((a, b) => {
                    b = mas[i + b];
                    if(b === void(0)) return a;
                    let num = b[j];
                    if(b[j + 1] !== void(0)) num += b[j + 1];
                    if(b[j - 1] !== void(0)) num += b[j - 1];
                    return a + num;
                    }, 0);
                    neighbors = [-1, 1].reduce((a, b) => a += mas[i][j + b] !== void(0) && mas[i][j + b], neighbors);
                    if (neighbors == 2 || neighbors == 3) {
                        mas2[i][j] = 1;
                    } else {
                        mas2[i][j] = 0;
                    };


                }

            }

            mas = mas2;
            drawField();
            count++;
            document.getElementById('count').innerHTML = count;
            timer = setTimeout(startLife, 300);
        }



        document.getElementById("create").onclick = resizeCanvas;
        document.getElementById("start").onclick = startLife;
    </script>
</body>

</html>

prototip · #4 (**permalink**) 15.05.2021, 14:50

рони,
не верно, если я сейчас выставлю ширину и высоту игрового поля 500х500, то квадратики в нижней части не будут ставится да и если нажать на кнопку start, игра не запустится

рони · #5 (**permalink**) 15.05.2021, 15:53

Сообщение от prototip

если я сейчас

исправлено)))

prototip · #6 (**permalink**) 16.05.2021, 09:25

рони,
Большое спасибо)

рони · #7 (**permalink**) 16.05.2021, 09:37

prototip,
лучше сократить все вычисления ширины и высоты до одного раза, а не делать это в каждой функции, есть и другие места для оптимизации.

prototip · #8 (**permalink**) 16.05.2021, 13:49

рони, тут я с вами согласен. Обьясните пожалуйста почему, когда я выношу эти переменные ширины и высоты в глобальную переменную, код перестает работать?

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let widthInput = document.getElementById("width");
let heightInput = document.getElementById("height");

let width = canvas.width;
let height = canvas.height;
  let n = width / 10;
  let m = height / 10;

let xRect= 10;
let yRect= 10;
    
let mas = [];
let count = 0;
let timer;

canvas.onclick = function (event) {
  let x = event.offsetX; 
  let y = event.offsetY;

  x = Math.floor(x / 10);
  y = Math.floor(y / 10);

  mas[y][x] = 1; 
  drawField();
};

function resizeCanvas(){
canvas.width = widthInput.value;
canvas.height = heightInput.value;
  goLife();
  }

function goLife() {

  for (let i = 0; i < m; i++) {
    mas[i] = []; 
    for (let j = 0; j < n; j++) {
      mas[i][j] = 0;
    }
  }
}
goLife();

function drawField(){
  
  ctx.clearRect(0, 0, width, height);
  for (let i = 0; i < m; i++) {
       for (let j = 0; j < n / 10; j++) {

      if (mas[i][j] === 1) {
        ctx.fillRect(j * xRect, i * yRect, 10, 10);
      }
    }
  }
}

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);
                    if (neighbors == 2 || neighbors == 3) {
                        mas2[i][j] = 1;
                    } else {
                        mas2[i][j] = 0;
      };
                }
            }
            mas = mas2;
            drawField();
            count++;
            document.getElementById('count').innerHTML = count;
            timer = setTimeout(startLife, 300);
        }
function pauseLife(){
  clearInterval(timer)
}

function stopLife(){
  
}

document.getElementById("create").onclick = resizeCanvas;
document.getElementById("start").onclick = startLife;
document.getElementById("pause").onclick = pauseLife;
document.getElementById("stop").onclick = stopLife;

рони · #9 (**permalink**) 16.05.2021, 14:39

prototip,
объявлять надо глобально, а присваивать значение только в goLife()

prototip · #10 (**permalink**) 16.05.2021, 21:23

рони,
последний вопрос и я отстану от вас)
Подскажите пожалуйста, как сделать, чтобы при нажатии кнопки "Стоп" игра остановилась, таймер сбросился на ноль и я смог заново начать игру

Форум

Справочник

Discord чат

Курсы javascript