Здравствуйте. Нужен совет. Как сделать подобие ООП? На данный момент навоял следующее:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
table {
border: 1px solid #00bfff;
border-collapse: collapse;
}
td {
border: 1px solid #00bfff;
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<script>
let snake = [];
const field = document.createElement('table');
let tr, td;
let timerID;
let direction = 'ArrowRight';
let prev;
let eaten;
let score = 0;
let generated;
let reverseDirections = {
'ArrowRight': 'ArrowLeft',
'ArrowLeft': 'ArrowRight',
'ArrowUp': 'ArrowDown',
'ArrowDown': 'ArrowUp'
};
let snakeInitWidth = 3;
let snakeInitHeight = 1;
let scoreElem = `<section id="score">Score: <span>0</span></section>`;
document.body.insertAdjacentHTML('afterbegin', scoreElem);
let fieldWidth = 41;
let fieldHeight = 21;
for (let i = 0; i < fieldHeight; i++) {
tr = document.createElement('tr');
for (let j = 0; j < fieldWidth; j++) {
td = document.createElement('td');
if (i == (fieldHeight - snakeInitHeight) / 2 && j >= (fieldWidth - snakeInitWidth) / 2 && j < (fieldWidth - snakeInitWidth) / 2 + snakeInitWidth) {
snake.unshift({x: j, y: i});
td.style.backgroundColor = '#00bfff'
}
tr.append(td);
}
field.append(tr);
}
document.body.append(field);
let fieldX = fieldWidth - 1;
let fieldY = fieldHeight - 1;
document.addEventListener('keydown', function(e) {
if (e.code == 'ArrowRight' || e.code == 'ArrowLeft' || e.code == 'ArrowUp' || e.code == 'ArrowDown') {
if (e.code != direction && direction != reverseDirections[e.code]) {
direction = e.code;
if (timerID) clearTimeout(timerID)
move(e.code);
}
}
});
function move(keyName) {
if (checkLoss()) {
clearTimeout(timerID);
blink();
return;
}
for (let i = 0; i < snake.length; i++) {
field.rows[snake[i].y].cells[snake[i].x].style.backgroundColor = '';
if (i == 0) {
prev = Object.assign({}, snake[i]);
if (keyName == 'ArrowUp') {
if (snake[i].y - 1 >= 0 && field.rows[snake[i].y - 1].cells[snake[i].x].style.backgroundColor == 'black' ||
snake[i].y - 1 < 0 && field.rows[fieldY].cells[snake[i].x].style.backgroundColor == 'black') {
eaten = true;
}
snake[i].y = (snake[i].y == 0) ? fieldY : snake[i].y - 1;
}
if (keyName == 'ArrowDown') {
if (snake[i].y + 1 <= fieldY && field.rows[snake[i].y + 1].cells[snake[i].x].style.backgroundColor == 'black' ||
snake[i].y + 1 > fieldY && field.rows[0].cells[snake[i].x].style.backgroundColor == 'black') {
eaten = true;
}
snake[i].y = (snake[i].y == fieldY) ? 0 : snake[i].y + 1;
}
if (keyName == 'ArrowRight') {
if (snake[i].x + 1 <= fieldX && field.rows[snake[i].y].cells[snake[i].x + 1].style.backgroundColor == 'black' ||
snake[i].x + 1 > fieldX && field.rows[snake[i].y].cells[0].style.backgroundColor == 'black') {
eaten = true;
}
snake[i].x = (snake[i].x == fieldX) ? 0 : snake[i].x + 1;
}
if (keyName == 'ArrowLeft') {
if (snake[i].x - 1 >= 0 && field.rows[snake[i].y].cells[snake[i].x - 1].style.backgroundColor == 'black' ||
snake[i].x - 1 < 0 && field.rows[snake[i].y].cells[fieldX].style.backgroundColor == 'black') {
eaten = true;
}
snake[i].x = (snake[i].x == 0) ? fieldX : snake[i].x - 1;
}
if (eaten) {
score += 10;
document.querySelector('#score > span').innerHTML = score;
let lastCell = Object.assign({}, prev);
snake.splice(1, 0, lastCell);
field.rows[prev.y].cells[prev.x].style.backgroundColor = '#00bfff';
eaten = false;
generateFood();
i = 0;
continue;
}
} else {
let temp = snake[i];
snake[i] = prev;
prev = temp;
}
field.rows[snake[i].y].cells[snake[i].x].style.backgroundColor = '#00bfff';
}
timerID = setTimeout(() => move(keyName), 100);
}
move('ArrowRight');
function checkLoss() {
for (let i = 1; i < snake.length; i++) {
if (snake[0].x == snake[i].x && snake[0].y == snake[i].y) return true;
}
return false;
}
function blink() {
debugger;
let count = 0;
function tick() {
if (count == 6)
return;
for (let i = 0; i < snake.length; i++) {
if (count % 2 == 0) {
field.rows[snake[i].y].cells[snake[i].x].style.backgroundColor = '';
} else {
field.rows[snake[i].y].cells[snake[i].x].style.backgroundColor = '#00bfff';
}
}
count++;
setTimeout(tick, 500);
}
tick();
}
function generateFood() {
let emptyCells = Array.from(field.querySelectorAll('td')).filter((td) => td.style.backgroundColor == '');
generated = Math.floor(Math.random() * emptyCells.length);
emptyCells[generated].style.backgroundColor = 'black';
}
generateFood();
</script>
</body>
</html>
Думаю сделать два класса - Field и Snake. Класс Field будет создавать поле для игры, генерировать еду и некоторые другие методы. Класс Snake будет отвечать за создание, движение змейки. Или здесь ООП вообще не уместно?
