Javascript-форум - Линии "чистым" JS

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Линии "чистым" JS (https://javascript.ru/forum/misc/11465-linii-chistym-js.html)

Линии "чистым" JS

Здравствуйте

Совсем недавно начал изучать JS. Статьи, описанные на сайте, очень хорошо изложенные и хотелось бы поблагодарить автора за них.

Сейчас дошел до раздела События. Решил, что одно чтение слишком сухо - надо сделать простейший JS приложение... крестики-нолики

С самого начала встретился с проблемой как нарисовать линии только с помощью JS. Нашел такой код:

Код:

function drawLine( lineObjectHandle, Ax, Ay, Bx, By, lineImgPath )

{

    /*

     *        lineObjectHandle = an IMG tag with position:absolute

     */

    var

        xMin        = Math.min( Ax, Bx ),

        yMin        = Math.min( Ay, By ),

        xMax        = Math.max( Ax, Bx ),

        yMax        = Math.max( Ay, By ),

        boxWidth    = Math.max( xMax-xMin, 1 ),

        boxHeight   = Math.max( yMax-yMin, 1 ),

        tmp         = Math.min( boxWidth, boxHeight ),

        smallEdge   = 1,

        newSrc;





    while( tmp>>=1 )

        smallEdge<<=1;



    newSrc = lineImgPath+ smallEdge +( (Bx-Ax)*(By-Ay)<0?"up.gif":"down.gif" );

    if( lineObjectHandle.src.indexOf( newSrc )==-1 )

        lineObjectHandle.src = newSrc;



    with( lineObjectHandle.style )

    {

        width   = boxWidth        +"px";

        height  = boxHeight        +"px";

        left    = xMin                +"px";

        top     = yMin                +"px";

    }

}

Как использовать этот код?

Как я понял надо подставить задать Ax, Ay, Bx, By необходимые значения.

Вначале кода написал

Код:

lineObjectHandle = "up.gif"

lineObjectHandle.position='absolute'

Чувствую, что совсем в лес ушел. Буду рад обьяснениям и указанию моих ошибок

Цитата:

Сообщение от Aspiring

Чувствую, что совсем в лес ушел.

Вот уж точно. Вы крестики и нолики рисуете? Зачем? Картинки подставляйте.

Цитата:

Сообщение от Kolyaj (Сообщение 68556)

Вот уж точно. Вы крестики и нолики рисуете? Зачем? Картинки подставляйте.

Нет :)

Я сетку рисую для крестиков-ноликов

Цитата:

Сообщение от Aspiring

Я сетку рисую для крестиков-ноликов

зачем?
чем вам таблица не угодила?

Сетку тоже можно картинкой сделать.

Рисовать таблицу на HTML?

Хочу полностью сделать игру на JS, даже если это будет очень нерациональным решением.

Можете указать как использовать вышестоящий код?

Можно и картинкой, но чисто для "спортивного интереса" хочу на JS

Цитата:

Сообщение от Aspiring

Рисовать таблицу на HTML?

Хочу полностью сделать игру на JS, даже если это будет очень нерациональным решением.

наркоман, чтоле?
у тебя навязчивая мания.
"чистый JS" без HTML-а практически бесполезен, и его практически не используют

Сделая таблицу с помощью js (document.createElement), ты как раз и сделаешь "Линии "чистым" JS":)

Цитата:

Сообщение от Gvozd

"чистый JS" без HTML-а практически бесполезен, и его практически не используют

Тут, конечно, Gvozd забыл уточнить, что браузерный JS без HTML бесполезен. :)

Создал таблицу по совету Sweet

Теперь не могу осуществить, чтобы при клике на ячейку в ячейке появлялась запись (Х и О).

Пробывал несколько способов:

cont.onclick='write(X)';

cont.onclick='document.cont.createTextNode("X")'

cont.onclick='cont = "X"'

Ничего не сработало. Какой код применить в данной ситуации?

Цитата:

Сообщение от Aspiring

Пробывал несколько способов:

А вы уже закончили изучать JavaScript и теперь просто пишете всякий бред наугад? Продолжайте читать статьи, в них всё доходчиво написано.

используй тег canvas

Цитата:

Сообщение от Aspiring

cont.onclick='write(X)';

cont.onclick='document.cont.createTextNode("X")'

cont.onclick='cont = "X"'

Жжешь! :lol: Пиши еще!!!:write:

Цитата:

Сообщение от KOLANICH

используй тег canvas

Для начала нужно хотя бы с основами разобраться

До конца статьи не прочитал. Но все-равно требовался некий опыт создания приложении для продолжении. Искал по статьям - ничего не нашел.

Понял, что вышенаписанные мною варианты просто бред.

Мое решение:
cont=document.createElement('input');
cont.onclick='value = "X"'

Подсмотрел приложения других, там на каждую кнопку функция смены значения. Т.е. 9 (при 3X3 клеток) практический одинаковых функции только на смену значении формы. Также условия победы написаны вручную: если значение клеток (а1=1 и в1=1 и с1=1) или (а1=1 и в2=1 и с3=1) ..., то игрок один выигрывает.

Это не считается плохим тоном программирования?

В школе в подобной задаче на Pascal я бы просто задал условия по индексам:
if ( (i=j) or (i=n-j+1) or (...) ) and (a[i,j]=1) then write('Player 1 has won the round')
Вышенаписанный код неправильный :no: , но надеюсь Вы поняли, что я имел ввиду

Цитата:

Сообщение от Aspiring

Т.е. 9 (при 3X3 клеток) практический одинаковых функции только на смену значении формы

обработчик вешается на всю таблицу, внутри обработчика через event.target определяем по какой ячейке кликнули, и добавляем в нее рисунок.
http://javascript.ru/tutorial/events

чёрт подери
создаёшь канвас
рисуешь 4 линии поделив длину и ширину на 3
и помножив на 1 и 2
вешаешь обработчик на клик
если попадает в опр интервал значит в опр клетке
проводишь 2 линии или рисуешь кружок
что сложного?

Спасибо, но я не интересовался логикой решения задачи.

Код:

function changing(clicked){

if (clicked == 1){

spot = empty1 ;}

if (clicked == 2){

spot = empty2 ;}

if (clicked == 3){

spot = empty3 ;}

if (clicked == 4){

spot = empty4 ;}

if (clicked == 5){

spot = empty5 ;}

if (clicked == 6){

spot = empty6 ;}

if (clicked == 7){

spot = empty7 ;}

if (clicked == 8){

spot = empty8 ;}

if (clicked == 9){

spot = empty9 ;}

if (spot == -1){

if (t == 0){

xo = " O " ;

spot = 0

}

else {

xo = " X " ;

spot = 1

}

if (clicked == 1){

empty1 = spot;}

if (clicked == 2){

empty2 = spot ;}

if (clicked == 3){

empty3 = spot ;}

if (clicked == 4){

empty4 = spot ;}

if (clicked == 5){

empty5 = spot ;}

if (clicked == 6){

empty6 = spot ;}

if (clicked == 7){

empty7 = spot ;}

if (clicked == 8){

empty8 = spot ;}

if (clicked == 9){

empty9 = spot ;}

}

else {

if (spot == 0){

xo = " O ";}

if (spot == 1){

xo = " X ";}

change = 0

}

return (xo) ;

}

function change_b1(form){

clicked = 1;

changing(clicked) ;

t = turnchange(t) ;

form.b1.value = xo;

form.whoseturn.value = whogoesnow

win();

return;

}

function change_b2(form){

clicked = 2;

changing(clicked) ;

form.b2.value = xo;

t = turnchange(t) ;

form.whoseturn.value = whogoesnow

win();

return;

}

function change_b3(form){

clicked = 3;

changing(clicked) ;

form.b3.value = xo;

t = turnchange(t) ;

form.whoseturn.value = whogoesnow

win();

return;

}

function change_b4(form){

clicked = 4;

changing(clicked) ;

form.b4.value = xo;

t = turnchange(t) ;

form.whoseturn.value = whogoesnow

win();

return;

}

function change_b5(form){

clicked = 5;

changing(clicked) ;

form.b5.value = xo;

t = turnchange(t) ;

form.whoseturn.value = whogoesnow

win();

return;

}

function change_b6(form){

clicked = 6;

changing(clicked) ;

form.b6.value = xo;

t = turnchange(t) ;

form.whoseturn.value = whogoesnow

win();

return;

}

function change_b7(form){

clicked = 7;

changing(clicked) ;

form.b7.value = xo;

t = turnchange(t) ;

form.whoseturn.value = whogoesnow

win();

return;

}

function change_b8(form){

clicked = 8;

changing(clicked) ;

form.b8.value = xo;

t = turnchange(t) ;

form.whoseturn.value = whogoesnow

win();

return;

}

function change_b9(form){

clicked = 9;

changing(clicked) ;

form.b9.value = xo;

t = turnchange(t) ;

form.whoseturn.value = whogoesnow

win();

return;

}

На каждую кнопку по функции, на каждый клик по условии. Разве это не является неграмотным решением или такое допустимо?

Цитата:

Сообщение от Aspiring

Разве это не является неграмотным решением или такое допустимо?

да, это криво.

Цитата:

Сообщение от Aspiring

Разве это не является неграмотным решением или такое допустимо?

Т.е. самого не смущают 9 абсолютно одинаковых функций?

Riim, Kolyaj, спасибо за комментарий. Это не мой код.