Змейка JavaScript
Только начал изучение.
JS Код:
function createMatrix() |
SergeiGeek,
:cray: :cray: :cray: <!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cell {
float: left;
height: 12px;
width: 12px;
border: #0000CD 1px solid;
}
#matrix{
width: 280px;
}
.red{
background: #FF0000;
}
</style>
<script>
function createMatrix()
{
var matrix = document.getElementById('matrix');
var n = 20 * 20;
for (var i = 0; i < n; i++)
{
var div = document.createElement('div');
div.className = 'cell';
matrix.appendChild(div);
}
}
function getCell(row, col)
{
var divs = document.querySelectorAll('.cell');
return divs[--row * 20 + --col]
}
function setCell(row, col, val)
{
getCell(row, col).classList[val ? 'add' : 'remove']('red')
}
window.onload = function()
{
createMatrix();
setCell(1, 1, true);
}
</script>
</head>
<body>
<div id="matrix"></div>
</body>
</html>
|
Великолепно!
Поясните каждый пункт, для более лучшего понимания, если вам не сложно Код:
getCell(row, col).classList[val ? 'add' : 'remove']('red') |
Цитата:
Условный оператор доступ-через-квадратные-скобки |
Спасибо друг! :) А можно теперь задать движение этому квадрату за счет стрелочек клавиатуры. К этому всему я добавил вот что:
document.onkeyDown = function()
{
var KEY_CODE = {
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
};
if (event.keyCode == KEY_CODE.LEFT) {
}
Лучше реализовать через IF или SWITCH ? Додумать не могу как заставить квадрат двигаться. |
То что ты мне написал выше.
function getCell(row, col)
37
{
38
var divs = document.querySelectorAll('.cell');
39
return divs[--row * 20 + --col]
40
}
41
42
function setCell(row, col, val)
43
{
44
getCell(row, col).classList[val ? 'add' : 'remove']('red')
45
}
Такое возможно реализовать с помощью JQuerry? |
Цитата:
|
Цитата:
|
змейка игра макет
SergeiGeek,
кликнуть по квадратику потом нажать стрелки на клавиатуре. <!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cell {
float: left;
height: 12px;
width: 12px;
border: #0000CD 1px solid;
}
#matrix{
width: 280px;
}
.red{
background: #FF0000;
}
</style>
<script>
function createMatrix() {
var matrix = document.getElementById('matrix');
var n = 20 * 20;
for (var i = 0; i < n; i++) {
var div = document.createElement('div');
div.className = 'cell';
matrix.appendChild(div);
}
}
function getCell(row, col) {
var divs = document.querySelectorAll('.cell');
return divs[row * 20 + col]
}
function setCell(row, col, val) {
var div = getCell(row, col)
div && div.classList[val ? 'add' : 'remove']('red')
}
window.onload = function() {
createMatrix();
setCell(10, 10, true);
var b = {
39: ["left", 1],
37: ["left", -1],
40: ["top", 1],
38: ["top", -1],
top: 10,
left: 10
};
document.body.onkeydown = function(a) {
a = a || window.event;
a = a.keyCode;
if (b[a]) {
setCell(b.top, b.left, false)
var d = b[a][0];
b[d] += b[a][1];
b[d] < 0 && (b[d] = 19)
b[d] %= 20;
setCell(b.top, b.left, true)
}
return false;
};
};
</script>
</head>
<body>
<div id="matrix"></div>
</body>
</html>
|
спасибо! =)
a = a || window.event;
57
a = a.keyCode;
58
if (b[a]) {
59
setCell(b.top, b.left, false)
60
var d = b[a][0];
61
b[d] += b[a][1];
62
b[d] < 0 && (b[d] = 19)
63
b[d] %= 20;
64
setCell(b.top, b.left, true)
красиво это написано, а где можно прочесть про значения %= || += и тд? |
Цитата:
|
Спасибо тебе друг за помощь! :) Не хочу быть навязчивым, но сильно хочу разобраться во всем.
window.onload = function() {
createMatrix();
setCell(1, 1, true);
var b = {
39: ["left", 1],
37: ["left", -1],
40: ["top", 1],
38: ["top", -1],
top: 1,
left: 1
};
В переменной заданы значения.. если первые 4 это коды JS по стрелочкам на клаве.. а вот TOP LEFT - это зачем? И каким образом они взаимодействуют с кодом? |
Цитата:
|
|
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var CELL_COLOR = 'red';
var BG_COLOR = 'white';
function createMatrix() {
var matrix = document.getElementById('matrix');
var n = 20 * 20;
for (var i=0; i < n; i++) {
var div = document.createElement('div');
div.className = 'cell';
matrix.appendChild(div);
}
}
function getCellEl (row, col) {
return document.getElementById('matrix').children[(row - 1) * 20 + col - 1];
}
function setCell(row, col, val) {
var cell = getCellEl(row, col);
cell.style.backgroundColor = (val == true) ? CELL_COLOR : BG_COLOR;
}
function getCell(row, col) {
var cell = getCellEl;
return cell.style.backgroundColor == CELL_COLOR;
}
window.onload = function() {
var currentRow = 1;
var currentCol = 1;
createMatrix();
setCell(currentRow, currentCol, true);
window.onkeydown = function(event) {
setCell(currentRow, currentCol, false);
switch (event.keyCode) {
case KEY_LEFT:
currentCol -= 1;
break;
case KEY_UP:
currentRow -= 1;
break;
case KEY_DOWN:
currentRow += 1;
break;
case KEY_RIGHT:
currentCol += 1;
break;
}
if ( currentRow < 1) {
currentRow = 1;
}
else if (currentRow > 20) {
currentRow = 20;
}
if (currentCol < 1) {
currentCol = 1;
}
else if (currentCol > 20) {
currentCol = 20;
}
setCell(currentRow, currentCol, true);
}
}
Как заставить этот квадрат двигаться постоянно? без нажатия клавиш в одном направлении? И менять курс клавишами на клавиатуре. А по достижении стенки - выводить сообщение о поражении? =)) |
движение с ограничением размерами видимой части окна
SergeiGeek,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body,html{background:#FC9;height:100%}
div{height:100px;width:100px;background:#006400;position:relative;left:200px;top:200px}
</style>
<script>
window.onload = function() {
function move() {
if (b.left < 0 || b.left > document.documentElement.clientWidth - 100|| b.top < 0 || b.top > document.documentElement.clientHeight-100) {alert('game over!'); return}
for (var a in c)
if (c[a]) {
var d = b[a][0];
b[d] += b[a][1];
div.style[d] = b[d] + "px"
}
window.requestAnimationFrame(move)
}
var b = {
39: ["left", 3],
37: ["left", -3],
40: ["top", 3],
38: ["top", -3],
left: 200,
top: 200
},
c = {};
move();
var div = document.getElementById("show");
document.body.onkeydown = function(a) {
a = a || window.event;
a = a.keyCode;
a in b && (c = {}, c[a] = true);
return false
};
};
</script>
</head>
<body>
<div id="show" ></div>
</body>
</html>
|
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var CELL_COLOR = 'red';
var BG_COLOR = 'white';
function createMatrix() {
var matrix = document.getElementById('matrix');
var n = 20 * 20;
for (var i=0; i < n; i++) {
var div = document.createElement('div');
div.className = 'cell';
matrix.appendChild(div);
}
}
function getCellEl (row, col) {
return document.getElementById('matrix').children[(row - 1) * 20 + col - 1];
}
function setCell(row, col, val) {
var cell = getCellEl(row, col);
cell.style.backgroundColor = (val == true) ? CELL_COLOR : BG_COLOR;
}
function getCell(row, col) {
var cell = getCellEl;
return cell.style.backgroundColor == CELL_COLOR;
}
window.onload = function() {
var currentRow = 1;
var currentCol = 1;
createMatrix();
setCell(currentRow, currentCol, true);
window.onkeydown = function(event) {
setCell(currentRow, currentCol, false);
switch (event.keyCode) {
case KEY_LEFT:
currentCol--;
break;
case KEY_UP:
currentRow--;
break;
case KEY_DOWN:
currentRow++;
break;
case KEY_RIGHT:
currentCol++;
break;
}
if ( currentRow < 1) {
currentRow = 1;
alert("The End");
}
else if (currentRow > 20) {
currentRow = 20;
alert("The End");
}
if (currentCol < 1) {
currentCol = 1;
alert("The End");
}
else if (currentCol > 20) {
currentCol = 20;
alert("The End");
}
setCell(currentRow, currentCol, true);
}
}
Всю голову изломал.... как можно через setInterval запустить эту змейку? :( Спасибо за вышеизложенный пример, я не знаю как его применить к моему примеру. |
Цитата:
|
Цитата:
|
SergeiGeek,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cell {
float: left;
height: 12px;
width: 12px;
border: #0000CD 1px solid;
}
#matrix{
width: 280px;
}
.red{
background: #FF0000;
}
</style>
<script>
function createMatrix() {
var matrix = document.getElementById('matrix');
var n = 20 * 20;
for (var i = 0; i < n; i++) {
var div = document.createElement('div');
div.className = 'cell';
matrix.appendChild(div);
}
}
function getCell(row, col) {
var divs = document.querySelectorAll('.cell');
return divs[row * 20 + col]
}
function setCell(row, col, val) {
var div = getCell(row, col)
div && div.classList[val ? 'add' : 'remove']('red')
}
window.onload = function() {
createMatrix();
setCell(10, 10, true);
var b = {
39: ["col", 0.05],
37: ["col", -0.05],
40: ["row", 0.05],
38: ["row", -0.05],
row: 10,
col: 10
},
c = {};
function move() {
if (b.col < 0 || b.col > 19|| b.row < 0 || b.row > 19) {alert('game over!'); return}
for (var a in c)
if (c[a]) {
setCell(b.row|0, b.col|0, false)
var d = b[a][0];
b[d] += b[a][1];
setCell(b.row|0, b.col|0, true)
}
window.requestAnimationFrame(move)
}
move();
document.body.onkeydown = function(a) {
a = a || window.event;
a = a.keyCode;
a in b && (c = {}, c[a] = true);
return false
};
};
</script>
</head>
<body>
<div id="matrix"></div>
</body>
</html>
|
Да тысяча чертей!!! Вы гуру Скрипта :)) Возьмите меня в ученики.. я буду картофель чистить.. носки стирать... научите меня также!))
|
SergeiGeek,
здешние гуру в http://javascript.ru/forum/offtopic/ сидят, даже картошку чистить не берут :cray: :) |
| Часовой пояс GMT +3, время: 14:58. |