Java script — Блог по программированию http://ot7.ru Курсы по веб дизайну, программированию, графике и дизайну Thu, 28 Nov 2019 21:38:17 +0000 ru-RU hourly 1 https://wordpress.org/?v=6.7.2 https://ot7.ru/wp-content/uploads/2019/11/cropped-it2-32x32.jpg Java script — Блог по программированию http://ot7.ru 32 32 javascript. Урок 3. Загрузка файла с помощью javascript + AJAX с отображением индикатора загрузки. Сжатие изображений стороне сервера. https://ot7.ru/2018/06/18/javascript-%d1%83%d1%80%d0%be%d0%ba-3-%d0%b7%d0%b0%d0%b3%d1%80%d1%83%d0%b7%d0%ba%d0%b0-%d1%84%d0%b0%d0%b9%d0%bb%d0%b0-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-javascript-ajax-%d1%81/ Mon, 18 Jun 2018 11:59:16 +0000 http://manuscript.ikurs.kz/?p=2250 Файл к уроку.

ajax-file-progress-bar.com

Видео к уроку.

]]> Javascript. Урок 2. AJAX JSON примеры программ. С чего начать работу с AJAX JSON https://ot7.ru/2018/06/15/javascript-%d1%83%d1%80%d0%be%d0%ba-2-ajax-json-%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80%d1%8b-%d0%bf%d1%80%d0%be%d0%b3%d1%80%d0%b0%d0%bc%d0%bc-%d1%81-%d1%87%d0%b5%d0%b3%d0%be-%d0%bd%d0%b0%d1%87%d0%b0/ Fri, 15 Jun 2018 11:25:24 +0000 http://manuscript.ikurs.kz/?p=2247 Файл с материалами урока.

ajax

Видео урока.

 

]]> Javascript. Урок 1. Уроки по программированию Javascript для новичков. https://ot7.ru/2018/06/11/javascript-%d1%83%d1%80%d0%be%d0%ba-1-%d0%be%d0%b1%d0%b7%d0%be%d1%80-%d0%be%d1%81%d0%bd%d0%be%d0%b2%d0%bd%d1%8b%d1%85-%d0%bc%d0%be%d0%bc%d0%b5%d0%bd%d1%82%d0%be%d0%b2-%d0%b2-%d0%bf%d1%80%d0%be%d0%b3/ Mon, 11 Jun 2018 10:48:35 +0000 http://manuscript.ikurs.kz/?p=2241 Материалы к уроку 1.

Урок 1

Видео к уроку.

]]> Задания на циклы https://ot7.ru/2017/10/26/%d0%b7%d0%b0%d0%b4%d0%b0%d0%bd%d0%b8%d1%8f-%d0%bd%d0%b0-%d1%86%d0%b8%d0%ba%d0%bb%d1%8b/ Thu, 26 Oct 2017 05:04:33 +0000 http://manuscript.ikurs.kz/?p=2179 Задание:

  1. Вывести в столбец значения от 0 до 100
  2. Вывести в столбец значения от 100 до 0
  3. Вывести в столбец значения от 60 до 100
  4. Вывести в столбец значения от -39 до 100
  5. Вывести в строку четные числа
  6. Вывести в строку нечетные числа.
  7. Вывести в строку ряд 100 200 300 …..
  8. Вывести рисунки как на картинке ниже используя циклы

 

0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0

1 0 0 0 0 0 0 0 0
0 1 0 0 0 0 0 0 0
0 0 1 0 0 0 0 0 0
0 0 0 1 0 0 0 0 0
0 0 0 0 1 0 0 0 0
0 0 0 0 0 1 0 0 0
0 0 0 0 0 0 1 0 0
0 0 0 0 0 0 0 1 0
0 0 0 0 0 0 0 0 1

1 1 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1

0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 1 1 1 1

1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 0 0 0 0 0

0 1 1 1 1 1 1 1 1
0 0 1 1 1 1 1 1 1
0 0 0 1 1 1 1 1 1
0 0 0 0 1 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 0 1 1 1
0 0 0 0 0 0 0 1 1
0 0 0 0 0 0 0 0 1
0 0 0 0 0 0 0 0 0

1 1 1 1 1 1 1 1 0
1 1 1 1 1 1 1 0 0
1 1 1 1 1 1 0 0 0
1 1 1 1 1 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 0 0 0 0 0 0
1 1 0 0 0 0 0 0 0
1 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0

0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 1
0 0 0 0 0 0 0 1 1
0 0 0 0 0 0 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 1 1 1 1 1
0 0 0 1 1 1 1 1 1
0 0 1 1 1 1 1 1 1
0 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 1 1
0 1 1 1 1 1 1 1 0
0 0 1 1 1 1 1 0 0
0 0 0 1 1 1 0 0 0
0 0 0 0 1 0 0 0 0
0 0 0 1 1 1 0 0 0
0 0 1 1 1 1 1 0 0
0 1 1 1 1 1 1 1 0
1 1 1 1 1 1 1 1 1

0 0 0 0 0 0 0 0 1
0 0 0 0 0 0 0 1 1
0 0 0 0 0 0 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 1 1 1 1 1
0 0 0 0 0 1 1 1 1
0 0 0 0 0 0 1 1 1
0 0 0 0 0 0 0 1 1
0 0 0 0 0 0 0 0 1

0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 1 0 0 0 0
0 0 0 1 1 1 0 0 0
0 0 1 1 1 1 1 0 0
0 1 1 1 1 1 1 1 0

1 0 0 0 0 0 0 0 0
1 1 0 0 0 0 0 0 0
1 1 1 0 0 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 1 1 0 0 0 0
1 1 1 1 0 0 0 0 0
1 1 1 0 0 0 0 0 0
1 1 0 0 0 0 0 0 0
1 0 0 0 0 0 0 0 0

0 1 1 1 1 1 1 1 0
0 0 1 1 1 1 1 0 0
0 0 0 1 1 1 0 0 0
0 0 0 0 1 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0

1 0 0 0 0 0 0 0 1
1 1 0 0 0 0 0 1 1
1 1 1 0 0 0 1 1 1
1 1 1 1 0 1 1 1 1
1 1 1 1 1 1 1 1 1
1 1 1 1 0 1 1 1 1
1 1 1 0 0 0 1 1 1
1 1 0 0 0 0 0 1 1
1 0 0 0 0 0 0 0 1

1 1 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 1
1 0 1 1 1 1 1 0 1
1 0 1 0 0 0 1 0 1
1 0 1 0 1 0 1 0 1
1 0 1 0 0 0 1 0 1
1 0 1 1 1 1 1 0 1
1 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 1 1

1 1 1 1 1 1 1 1 1
1 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 0 1
1 0 0 0 0 0 1 0 1
1 0 1 1 1 0 1 0 1
1 0 1 0 0 0 1 0 1
1 0 1 1 1 1 1 0 1
1 0 0 0 0 0 0 0 1
1 1 1 1 1 1 1 1 1
]]> dropzone https://ot7.ru/2017/01/23/dropzone/ Mon, 23 Jan 2017 13:19:49 +0000 http://manuscript.ikurs.kz/?p=1861 Простой скрипт загрузки файлов

dropzone

]]> Задания onkeypress, onkeyup, onkeydown и onfocus https://ot7.ru/2016/07/21/%d0%b7%d0%b0%d0%b4%d0%b0%d0%bd%d0%b8%d1%8f-onkeypress-onkeyup-onkeydown-%d0%b8-onfocus/ Thu, 21 Jul 2016 06:35:02 +0000 http://manuscript.ikurs.kz/?p=1617 Задание

  1. Создать поле для ввода только цифр.
  2. Сделать поле, что бы в котором  при вводе буквы становились заглавными.
  3. Написать функция для вывода сообщения при вводе символа в поле (нажатие клавиши)
  4. Написать функция меняющую цвет поля при установки в нем курсора

Решение

1.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  Введите ваш возраст:
  <input type="text">
  <script>
    document.getElementsByTagName('input')[0].onkeypress = function(e) {
      e = e || event;
      if (e.ctrlKey || e.altKey || e.metaKey) return;
      var chr = getChar(e);
      // с null надо осторожно в неравенствах, т.к. например null >= '0' => true!
      // на всякий случай лучше вынести проверку chr == null отдельно
      if (chr == null) return;
      if (chr < '0' || chr > '9') {
        return false;
      }
    }
    function getChar(event) {
      if (event.which == null) {
        if (event.keyCode < 32) return null;
        return String.fromCharCode(event.keyCode) // IE
      }
      if (event.which != 0 && event.charCode != 0) {
        if (event.which < 32) return null;
        return String.fromCharCode(event.which) // остальные
      }
      return null; // специальная клавиша
    }
  </script>
</body>
</html>

2.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
имя: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

3.

<!DOCTYPE html>
<html>
<body>
<input type="text" onkeydown="myFunction()">
<script>
function myFunction() {
    alert("функция выполнена");
}
</script>
</body>
</html>

4.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
имя: <input type="text" id="fname" onfocus="myFunction()">
<script>
function myFunction() {
    document.getElementById("fname").style.backgroundColor = "red";
}
</script>
</body>
</html>

 

]]> Задание на onmousemove и onmouseout https://ot7.ru/2016/07/21/%d0%b7%d0%b0%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bd%d0%b0-onmousemove-%d0%b8-onmouseout/ Thu, 21 Jul 2016 06:30:48 +0000 http://manuscript.ikurs.kz/?p=1619 Задание

  1. Написать счетчик, который будет считать движения мыши в блоке.
  2. Написать программу для определения координат мыши в блоке.

Решение

1.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#demo {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}
p {
    background-color: white;
}
</style>
</head>
<body>
<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">Наведите мышь</span></p>
</div>
<script>
var x = 0;
var y = 0;
var z = 0;
function myMoveFunction() {
    document.getElementById("demo").innerHTML = z+=1;
}
</script>
</body>
</html>

2.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
    width: 500px;
    height: 500px;
    border: 1px solid black;
}
</style>
</head>
<body>
<p id="demo"></p>
<div onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<script>
function myFunction(e) {
    var x = e.clientX;
    var y = e.clientY;
    var coor = "координаты: (" + x + "," + y + ")";
    document.getElementById("demo").innerHTML = coor;
}
function clearCoor() {
    document.getElementById("demo").innerHTML = "";
}
</script>
</body>
</html>

 

]]> Урок 8. Игра крестики нолики на javascript https://ot7.ru/2016/07/21/%d1%83%d1%80%d0%be%d0%ba-8-%d0%b8%d0%b3%d1%80%d0%b0-%d0%ba%d1%80%d0%b5%d1%81%d1%82%d0%b8%d0%ba%d0%b8-%d0%bd%d0%be%d0%bb%d0%b8%d0%ba%d0%b8-%d0%bd%d0%b0-javascript/ Thu, 21 Jul 2016 06:19:25 +0000 http://manuscript.ikurs.kz/?p=1621 СВОЙСТВА и МЕТОДЫ

Length свойство, устанавливает или возвращает количество элементов в массиве

Нестандартное свойство innerText. Всеми браузерами, кроме Firefox 44- (согласно CanIUse.Com), поддерживается нестандартное свойство innerText.

У него, в некотором роде, преимущество перед textContent в том, что оно по названию напоминает innerHTML, его проще запомнить.

Однако, свойство innerText не следует использовать, так как оно не стандартное и не будет стандартным.

Это свойство возвращает текст не в том виде, в котором он в DOM, а в том, в котором он виден – как если бы мы выбрали содержимое элемента мышкой и скопировали его. В частности, если элемент невидим, то его текст возвращён не будет. Это довольно странная особенность существует по историческим причинам и скорее мешает, чем помогает.

Впрочем, при записи значения innerText работает так же, как и textContent.

Метод querySelectorAll ( ) возвращает все элементы в документе , который соответствует заданному селектор (ы) CSS , как статический объект NodeList .

Объект NodeList представляет коллекцию узлов . Узлам  могут быть доступны номера индексов . Индекс начинается с 0 .

КОД

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.cell { width: 50px; height: 50px; display: inline-block; border: 1px solid black; font-size: 50px; margin: 4px; padding: 0px; }
</style>
</head>
<body>
<div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div> <div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div> <div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>
<script>
(function (d){ player = true; 
  function clsCells(arr) {
  for(var i = 0, len = arr.length;i < len; i++) { 
    arr[i].innerText = ""};
  }; 
  d.onclick = function (e) { 
  if ((e.target.className == "cell") && (e.target.innerText == "")) { 
    if (player){ e.target.innerText = "X"; player = false; } 
    else { e.target.innerText = "O"; player = true; } 
    var arr = d.querySelectorAll('.cell'), v = []; 
    for(var i = 0, len = arr.length;i < len; i++) { 
          v[i] = arr[i].innerText }; 
    if ((v[0] == "X" && v[1] == "X" && v[2] == "X") || (v[3] == "X" && v[4] == "X" && v[5] == "X") || (v[6] == "X" && v[7] == "X" && v[8] == "X") || (v[0] == "X" && v[3] == "X" && v[6] == "X") || (v[1] == "X" && v[4] == "X" && v[7] == "X") || (v[2] == "X" && v[5] == "X" && v[8] == "X") || (v[0] == "X" && v[4] == "X" && v[8] == "X") || (v[2] == "X" && v[4] == "X" && v[6] == "X")) {alert("X wins!"); clsCells(arr);} if ((v[0] == "O" && v[1] == "O" && v[2] == "O") || (v[3] == "O" && v[4] == "O" && v[5] == "O") || (v[6] == "O" && v[7] == "O" && v[8] == "O") || (v[0] == "O" && v[3] == "O" && v[6] == "O") || (v[1] == "O" && v[4] == "O" && v[7] == "O") || (v[2] == "O" && v[5] == "O" && v[8] == "O") || (v[0] == "O" && v[4] == "O" && v[8] == "O") || (v[2] == "O" && v[4] == "O" && v[6] == "O")) {alert("O wins!"); clsCells(arr);} } 
    }; 
    })
    (document);
</script>
</body>
</html>

 

]]> Урок 10. AJAX https://ot7.ru/2016/07/21/%d1%83%d1%80%d0%be%d0%ba-9-ajax/ Thu, 21 Jul 2016 06:03:18 +0000 http://manuscript.ikurs.kz/?p=1605 AJAX выполняет обновление части веб-страницы, без перезагрузки всей страницы.

AJAX — метод для создания быстрых и динамических веб-страниц.

AJAX позволяет создание веб-страниц, которые будут обновляться асинхронно путем обмена небольшими объемами данных с сервером за кулисами. Это означает, что можно обновлять части веб-страницы, без перезагрузки всей страницы.

Классические веб-страниц, (которые не используют AJAX), перезагружают всю страницу, если содержание должно измениться.

Примеры приложений, использующих AJAX: Google Maps, Gmail, YouTube и Facebook.

Пример №1

СОБЫТИЯ

OnClick событие, выполнение JavaScript при щелчке по кнопке.

XMLHttpRequest () для чтения текстового файла.

Onreadystatechange событие, Когда запрос на сервер отправляется, мы хотим, чтобы выполнились некоторые действия, основанные на ответе.

Событие onreadystatechange срабатывает каждый раз, когда readyState изменения.

ReadyState свойство содержит статус XMLHttpRequest.

getElementById () Метод, возвращает элемент, который имеет атрибут ID с указанным значением.

Этот метод является одним из наиболее распространенных методов в HTML DOM, и используется почти каждый раз, когда вы хотите управлять, или получить информацию из, элемента на документе.

Возвращает NULL , если никакие элементы с указанным идентификатором не существует.

ID должно быть уникальным в пределах страницы. Тем не менее, если существует более одного элемента с указанным идентификатором, метод getElementById () возвращает первый элемент в исходном коде.

responseText свойство, Возвращает ответ сервера в виде строки.

КОД

<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2> 
Пусть AJAX изменить этот текст</h2></div>
<button type="button" onclick="loadDoc()">Изменение содержимого </button>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>
</body>
</html>

Пример №2

СОБЫТИЯ

OnKeyUp Событие, происходит, когда пользователь отпускает клавишу (на клавиатуре).

InnerHTML свойство, возвращает содержимое HTML (внутренний HTML) элемента.

КОД

<!DOCTYPE html>
<html>
<body>
<h3>Начните вводить имя в поле ввода ниже:</h3>
<form action="">
Имя: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Предложения: <span id="txtHint"></span></p>
<script>
function showHint(str) {
  var xhttp;
  if (str.length == 0) {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("txtHint").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "gethint.php?q="+str, true);
  xhttp.send();
}
</script>
</body>
</html>

 

]]> Урок 9. Игра змейка на javascript https://ot7.ru/2016/07/21/%d1%83%d1%80%d0%be%d0%ba-8-%d0%b8%d0%b3%d1%80%d0%b0-%d0%b7%d0%bc%d0%b5%d0%b9%d0%ba%d0%b0-%d0%bd%d0%b0-javascript/ Thu, 21 Jul 2016 06:02:21 +0000 http://manuscript.ikurs.kz/?p=1603 АЛГОРИТМ

— клеточки змейки помечаются классом «s» а еда классом «f», по наличию этих классов и определяется коллизия со змеей или с едой

— каждая новая клетка змеи помечается атрибутом «data-n» который равен number++ (постоянно увеличивается)

— ищем div’ы с классом «s» (клетки змеи) и находим клетку с минимальным значением data-n и делаем ее обычной (удаляем/перемещаем хвост змеи)

СОБЫТИЯ и МЕТОДЫ

OnKeyDown Событие, выполнение JavaScript, когда пользователь нажимает клавишу.

setInterval () Метод, вызывает функцию или вычисляет выражение через определенные промежутки времени.

Метод setInterval () будет продолжать вызов функции до вызова clearInterval (), или при закрытии окна.

getElementsByClassName () Метод, возвращает коллекцию всех элементов в документе с указанным именем класса, как NodeList объекта.

Объект NodeList представляет коллекцию узлов. Узлами могут быть номера индексов. Индекс начинается с 0.

alert () Метод, Окно оповещения, отображает окно с  предупреждением с заданным сообщением и кнопкой OK, часто используется, если вы хотите, убедиться, что информация доходит до пользователя.

SetAttribute () Метод, добавляет указанный атрибут к элементу, и придает ему определенное значение.

Если указанный атрибут уже существует, значение изменяется.

Math.round () Метод, округляет число до ближайшего целого числа.

Math.random() Метод,  Возвращает случайное число в диапазоне от 0 (включительно) и 1 (включительно)

html

<div id="main" class="main">
<div class='line'><div data-n='1' class="0_0 s"></div><div class="0_1"></div><div class="0_2"></div><div class="0_3"></div><div class="0_4"></div><div class="0_5"></div><div class="0_6"></div><div class="0_7"></div><div class="0_8"></div><div class="0_9"></div></div>
<div class="line"><div class="1_0"></div><div class="1_1"></div><div class="1_2"></div><div class="1_3"></div><div class="1_4"></div><div class="1_5"></div><div class="1_6"></div><div class="1_7"></div><div class="1_8"></div><div class="1_9"></div></div><div class="line"><div class="2_0"></div><div class="2_1"></div><div class="2_2"></div><div class="2_3"></div><div class="2_4"></div><div class="2_5"></div><div class="2_6"></div><div class="2_7"></div><div class="2_8"></div><div class="2_9"></div></div>
<div class="line"><div class="3_0"></div><div class="3_1"></div><div class="3_2"></div><div class="3_3"></div><div class="3_4"></div><div class="3_5"></div><div class="3_6"></div><div class="3_7"></div><div class="3_8"></div><div class="3_9"></div></div><div class="line"><div class="4_0"></div><div class="4_1"></div><div class="4_2"></div><div class="4_3"></div><div class="4_4"></div><div class="4_5"></div><div class="4_6"></div><div class="4_7"></div><div class="4_8"></div><div class="4_9"></div></div>
<div class="line"><div class="5_0"></div><div class="5_1"></div><div class="5_2"></div><div class="5_3"></div><div class="5_4"></div><div class="5_5"></div><div class="5_6"></div><div class="5_7"></div><div class="5_8"></div><div class="5_9"></div></div><div class="line"><div class="6_0"></div><div class="6_1"></div><div class="6_2"></div><div class="6_3"></div><div class="6_4"></div><div class="6_5"></div><div class="6_6"></div><div class="6_7"></div><div class="6_8"></div><div class="6_9"></div></div>
<div class="line"><div class="7_0"></div><div class="7_1"></div><div class="7_2"></div><div class="7_3"></div><div class="7_4"></div><div class="7_5"></div><div class="7_6"></div><div class="7_7"></div><div class="7_8"></div><div class="7_9"></div></div><div class="line"><div class="8_0"></div><div class="8_1"></div><div class="8_2"></div><div class="8_3"></div><div class="8_4"></div><div class="8_5"></div><div class="8_6"></div><div class="8_7"></div><div class="8_8"></div><div class="8_9"></div></div>
<div class="line"><div class="9_0"></div><div class="9_1"></div><div class="9_2"></div><div class="9_3"></div><div class="9_4"></div><div class="9_5"></div><div class="9_6"></div><div class="9_7"></div><div class="9_8"></div><div class="9_9"></div></div>
</div>

style

.main .line {
    clear: both;
}
.main .line div {
    width: 20px;
    height: 20px;
    float: left;
    margin: 1px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color .5s;
}
.main .line div.s {
    background-color: #bbb;
    transition: background-color .5s;
}
.main .line div.f {
    background-color: green;
    transition: background-color 2s;
}

script

<script>
  (function(width, height, length, current, dx, dy, x, y, hasFood, newEl){     
    
document.body.onkeydown = function(e){
    dx = (e.keyCode - 38) % 2, dy = (e.keyCode - 39) % 2; // перемещение змейки по координатам при нажатии клавиш
};
    
var timer = setInterval(function () {
    x = (x + dx) < 0 ? width - 1 : (x + dx) % width; 
    y = (y + dy) < 0 ? height - 1 : (y + dy) % height;
    newEl = document.getElementsByClassName(y + '_' + x)[0]
    if(newEl.className.indexOf('s') > 0) {
    	clearInterval(timer), alert('Game Over! Score: ' + length) // завершении игры при попадении в часть змейки
    };
    if(newEl.className.indexOf('f') > 0) {
    	newEl.className = newEl.className.replace(' f', ''), length++, hasFood = false;
    }
    newEl.className += ' s', newEl.setAttribute('data-n', current++); // увеличении змейки при съедании бонуса

    for(var i = 0, min = Infinity, item, items = document.getElementsByClassName('s'), len = items.length; i < len && len > length; i++)
    	if(+items[i].getAttribute('data-n') < min)
    		min = +items[i].getAttribute('data-n'), item = items[i];

    if(!!item) item.className = item.className.replace(' s', '');

    for(var fItem, fX, fY; !hasFood; fX = Math.round(Math.random() * 10 % width), fY = Math.round(Math.random() * 10 % height)) // появление бонуса
    	if(!!fX && !!fY && document.getElementsByClassName(fY + '_' + fX)[0].className.indexOf('s') < 0)
    		hasFood = true, document.getElementsByClassName(fY + '_' + fX)[0].className += ' f';
}, 500); // скорость движения змейки

})(10, 10, 5, 1, 1, 0, 0, 0, false, null);
    </script>

 

]]>