Посмотрите код игры "Крестики нолики"
Первая моя более-менее большая работа на js . Скажите минусы и плюсы.
<div id="wrapper"> <div class="block" id="b1"></div> <div class="block" id="b2"></div> <div class="block" id="b3"></div> <div class="block" id="b4"></div> <div class="block" id="b5"></div> <div class="block" id="b6"></div> <div class="block" id="b7"></div> <div class="block" id="b8"></div> <div class="block" id="b9"></div> <div class="clr"></div> <div id="result">Нет победителя</div> <button id="reset">Обновить</button> </div> * {list-style-type: none; text-decoration: none; } /*.clear */ #wrapper {width: 310px; margin: 15px auto; position: relative; } .block {width: 100px; height: 100px; float: left; background: black; margin: 0 2px 2px 0;} .active {opacity: 1; transition: 2s; } #b1, #b9,#b8, #b7, #b6, #b5, #b4, #b3, #b2 {width: 100px; height: 100px; background:#d0aa9b ; margin: 0 2px 2px 0; font-size: 90px; text-align: center; vertical-align: middle; } #result { font-size: 0px; margin-top: 50px; font-weight: bold;} .clr { clear: both; } "use scrict" var b9 = document.getElementById('b9'); var b8 = document.getElementById('b8'); var b7 = document.getElementById('b7'); var b6 = document.getElementById('b6'); var b5 = document.getElementById('b5'); var b4 = document.getElementById('b4'); var b3 = document.getElementById('b3'); var b2 = document.getElementById('b2'); var b1 = document.getElementById('b1'); var result = document.getElementById('result'); var a1 = [];var a2 = [];var a3 = [];var a4 = [];var a5 = [];var a6 = [];var a7 = [];var a8 = [];var a9 = [];// для того чтобы не могла сработать второй раз область var progress = []; // массив дает очередь хода var o1 = []; var o2 = []; var o3 =[];var o4 = []; var o5 = []; var o6 =[];var o7 = []; var o8 = []; var o8 =[]; var o9 = []; var x1 = []; var x2 = []; var x3 =[];var x4 = []; var x5 = []; var x6 =[];var x7 = []; var x8 = []; var x8 =[]; var x9 = []; function win_o(){ // проверяет на выигрыш нолик if (o1.length == 1 & o2.length == 1 & o3.length == 1 || o4.length == 1 & o5.length == 1 & o6.length == 1 || o7.length == 1 & o8.length == 1 & o9.length == 1 || o1.length == 1 & o4.length == 1 & o7.length == 1 || o2.length == 1 & o5.length == 1 & o8.length == 1 || o3.length == 1 & o6.length == 1 & o9.length == 1 || o1.length == 1 & o5.length == 1 & o9.length == 1 || o3.length == 1 & o5.length == 1 & o7.length == 1 ) { result.innerHTML = 'Победил нолик'; result.style.fontSize = '20px'; end() } else if (progress.length == 9) { result.innerHTML = 'Ничья'; result.style.fontSize = '20px'; } }; function win_x(){ // проверяет на выигрыш крестик if (x1.length == 1 & x2.length == 1 & x3.length == 1 || x4.length == 1 & x5.length == 1 & x6.length == 1 || x7.length == 1 & x8.length == 1 & x9.length == 1 || x1.length == 1 & x4.length == 1 & x7.length == 1 || x2.length == 1 & x5.length == 1 & x8.length == 1 || x3.length == 1 & x6.length == 1 & x9.length == 1 || x1.length == 1 & x5.length == 1 & x9.length == 1 || x3.length == 1 & x5.length == 1 & x7.length == 1 ) { result.innerHTML = 'Победил крестик'; result.style.fontSize = '20px'; end() } else if (progress.length == 9) { result.innerHTML = 'Ничья'; result.style.fontSize = '20px'; } }; function end() { // функция не дает ходить при выигрыше. Если есть ходы. a9.push('1');a8.push('1');a7.push('1');a6.push('1' );a5.push('1');a4.push('1');a3.push('1');a2.push(' 1');a1.push('1'); } document.getElementById('reset').onclick = function() { // кнопка reset location.reload(); } // блоки b9.onclick = function() { if ( a9.length >= 1) { // не дает нажать повторно return } else if ( progress.length % 2 == 0) { a9.push('1'); // фиксирует нажатие o9.push('2'); // добавляет значени нолика в массив. progress.push('1'); // массив дает очередь хода b9.innerHTML = "O"; // добавляет нолик b9.style.color = '#3c5ed8'; // цвет нолика b9.style.backgroundColor = 'transparent'; // убирает фон win_o(); // проверка на выигрыш } else if ( progress.length % 2 == 1) { a9.push('1'); x9.push('2'); progress.push('1'); b9.style.backgroundColor = 'transparent'; b9.innerHTML = "X"; b9.style.color = '#ea493a'; win_x(); } }; b8.onclick = function() { if ( a8.length >= 1) { return } else if ( progress.length % 2 == 0) { a8.push('1'); o8.push('2'); progress.push('1'); b8.style.backgroundColor = 'transparent'; b8.innerHTML = "O"; b8.style.color = '#3c5ed8' win_o(); } else if ( progress.length % 2 == 1) { a8.push('1'); progress.push('1'); x8.push('2'); b8.style.backgroundColor = 'transparent'; b8.innerHTML = "X"; b8.style.color = '#ea493a' win_x(); } }; b7.onclick = function() { if ( a7.length >= 1) { return } else if ( progress.length % 2 == 0) { a7.push('1'); o7.push('2'); progress.push('1'); b7.style.backgroundColor = 'transparent'; b7.innerHTML = "O"; b7.style.color = '#3c5ed8' win_o(); } else if ( progress.length % 2 == 1) { a7.push('1'); x7.push('2'); progress.push('1'); b7.style.backgroundColor = 'transparent'; b7.innerHTML = "X"; b7.style.color = '#ea493a' win_x(); } }; b6.onclick = function() { if ( a6.length >= 1) { return } else if ( progress.length % 2 == 0) { a6.push('1'); progress.push('1'); o6.push('2'); b6.style.backgroundColor = 'transparent'; b6.innerHTML = "O"; b6.style.color = '#3c5ed8' win_o(); } else if ( progress.length % 2 == 1) { a6.push('1'); x6.push('2'); progress.push('1'); b6.style.backgroundColor = 'transparent'; b6.innerHTML = "X"; b6.style.color = '#ea493a' win_x(); } }; b5.onclick = function() { if ( a5.length >= 1) { return } else if ( progress.length % 2 == 0) { a5.push('1'); progress.push('1'); o5.push('2'); b5.style.backgroundColor = 'transparent'; b5.innerHTML = "O"; b5.style.color = '#3c5ed8' win_o(); } else if ( progress.length % 2 == 1) { a5.push('1'); x5.push('2'); progress.push('1'); b5.style.backgroundColor = 'transparent'; b5.innerHTML = "X"; b5.style.color = '#ea493a' win_x(); } }; b4.onclick = function() { if ( a4.length >= 1) { return } else if ( progress.length % 2 == 0) { a4.push('1'); progress.push('1'); o4.push('2'); b4.style.backgroundColor = 'transparent'; b4.innerHTML = "O"; b4.style.color = '#3c5ed8' win_o(); } else if ( progress.length % 2 == 1) { a4.push('1'); x4.push('2'); progress.push('1'); b4.style.backgroundColor = 'transparent'; b4.innerHTML = "X"; b4.style.color = '#ea493a' win_x(); } }; b3.onclick = function() { if ( a3.length >= 1) { return } else if ( progress.length % 2 == 0) { a3.push('1'); o3.push('2'); progress.push('1'); b3.style.backgroundColor = 'transparent'; b3.innerHTML = "O"; b3.style.color = '#3c5ed8' win_o(); } else if ( progress.length % 2 == 1) { a3.push('1'); x3.push('2'); progress.push('1'); b3.style.backgroundColor = 'transparent'; b3.innerHTML = "X"; b3.style.color = '#ea493a' win_x(); } }; b2.onclick = function() { if ( a2.length >= 1) { return } else if ( progress.length % 2 == 0) { a2.push('1'); o2.push('2'); progress.push('1'); b2.style.backgroundColor = 'transparent'; b2.innerHTML = "O"; b2.style.color = '#3c5ed8' win_o(); } else if ( progress.length % 2 == 1) { a2.push('1'); x2.push('2'); progress.push('1'); b2.style.backgroundColor = 'transparent'; b2.innerHTML = "X"; b2.style.color = '#ea493a' win_x(); } }; b1.onclick = function() { if ( a1.length >= 1) { return } else if ( progress.length % 2 == 0) { a1.push('1'); o1.push('2'); progress.push('1'); b1.style.backgroundColor = 'transparent'; b1.innerHTML = "O"; b1.style.color = '#3c5ed8' win_o(); } else if ( progress.length % 2 == 1) { a1.push('1'); x1.push('2'); progress.push('1'); b1.style.backgroundColor = 'transparent'; b1.innerHTML = "X"; b1.style.color = '#ea493a' win_x(); } }; |
Много буков
проверять выигрыш можно проще combo = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]]; var win=(a)=>combo.find(el=>el.every((el)=>a.includes(el))); |
если будите писать алгоритм для игры с компьютером это же матрицу можно использовать для проверки опасных ситуций
var warn=(a,b)=>{ return combo.find(els=>{ var s = 0; return els.some((el)=>{ if(s>0) return a.includes(el); if(a.includes(el)&&!els.some(el=>b.includes(el))) s++; }); }); }; |
Dennnn,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Часовой пояс GMT +3, время: 14:28. |