Доброго времени суток.
Есть трудность.
В html документе создан <div>в котором должно изменяться значение если координаты двух элементов двумерного массива совпадают.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="pac.css" class="css">
<title>PACman Revolution</title>
</head>
<!-- onkeydown реагирует на нажатие любой клавиши -->
<body onload="init();" onkeydown="move();">
<div id="score">
</div>
<br>
<div id="scene">
LOADING ...
</div>
<!--
DOM - nodes(attributes,children,.....)
events - functions() callback
Array - map
module - ....
components
-->
<script src="pac.js" type="text/javascript">
</script>
</body>
</html>
//module
//global
(function() {
//local
const MAX_ROWS = 10;
const MAX_COLS = 10;
var gdiv = null;
// legend
// "." -> empty
// "#" -> wall
// "@" -> pac
// "*" -> beer
var grid = [
//0, 1, 2, 3, 4, 5, 6, 7, 8, 9
['.', '.', '.', '.', '.', '.', '.', '.', '.', '.'], //0
['.', '.', '.', '.', '.', '.', '.', '.', '.', '.'], //1
['.', '.', '.', '.', '.', '.', '.', '.', '.', '.'], //2
['.', '.', '.', '.', '.', '.', '.', '.', '.', '.'], //3
['.', '.', '.', '.', '.', '.', '.', '.', '.', '.'], //4
['.', '.', '.', '.', '.', '.', '.', '.', '.', '.'], //5
['.', '.', '.', '.', '.', '.', '.', '.', '.', '.'], //6
['.', '.', '.', '.', '.', '.', '.', '.', '.', '.'], //7
['.', '.', '.', '.', '.', '.', '.', '.', '.', '.'], //8
['.', '.', '.', '.', '.', '.', '.', '.', '.', '.'] //9
];
function init() {
console.log('init initialising...')
gdiv = document.body.childNodes[5];
// addCherry();addCherry();addCherry();
for (n = parseInt(Math.random() * 5) + 3; n >= 0; n--) {
addCherry();
addCherry();
addCherry();
}
addPac();
addWall();
addWall();
addWall();
addWall();
show();
}
function move() {
console.log(window.event);
grid[pacr][pacc] = '.';
if (window.event.code == "ArrowUp" && pacr > 0) {
pacr--;
}
if (window.event.code == "ArrowDown" && pacr < 9) {
pacr++;
}
if (window.event.code == "ArrowLeft" && pacc > 0) {
pacc--;
}
if (window.event.code == "ArrowRight" && pacc < 9) {
pacc++;
}
grid[pacr][pacc] = '@';
show();
}
function addPac() {
window.pacr = parseInt(9.999 * Math.random());
window.pacc = parseInt(9.999 * Math.random());
grid[pacr][pacc] = '@';
}
window.move = move;
function addCherry() {
var r = parseInt(9.999 * Math.random());
var c = parseInt(9.999 * Math.random());
grid[r][c] = '*';
}
function addWall() {
var r = parseInt(9.999 * Math.random());
var c = parseInt(9.999 * Math.random());
var l = parseInt(6 * Math.random() + 2);
for (n = 0; n <= l; n++) {
grid[r][c + n] = '#';
}
}
function show() {
console.log('show initialising...');
//delete content
gdiv.innerHTML = '';
for (row = 0; row < MAX_ROWS; row++) {
for (col = 0; col < MAX_COLS; col++) {
if (grid[row][col] == '.') {
gdiv.innerHTML += '<div class="empty"></div>';
}
if (grid[row][col] == '*') {
gdiv.innerHTML += '<div class="cherry"></div>';
}
if (grid[row][col] == '#') {
gdiv.innerHTML += '<div class="wall"></div>';
}
if (grid[row][col] == '@') {
gdiv.innerHTML += '<div class="pac"></div>';
}
}
}
}
function showScore() {
var addScore = document.getElementById("score");
var score = 20;
addScore.innerHTML = score;
// if () {
// addScore.innerHTML = score += 5;
// }
// // document.getElementById("score") = score += 5;
}
showScore();
//export
window.init = init;
console.log(grid);
})();
