You are currently viewing Connect Four with Javascript & jQuery – Tutorial

Connect Four with Javascript & jQuery – Tutorial



In this programming tutorial, we’ll create a basic two player connect four game using Javascript, jQuery, CSS, and HTML. This tutorial is geared towards people who understand the basics of web technologies, but maybe want to watch how another developer builds a connect four application.

💻Code: https://github.com/codyseibert/js-connect-four

Check out Cody Seibert’s main channel: https://www.youtube.com/channel/UCsrVDPJBYeXItETFHG0qzyw

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 18 Comments

  1. kevin zhang

    thank you for teaching this practical example … I successfully duplicated it and I have learned so much … again, jQuery is the saver …

  2. Psycho God

    Great tutorial. The checking of the winner was a little bit to fast for me. But I think after watching this part some times I will get this, too.
    I tried to replicate this project for learning purposes in vanilla js. But I have a problem rewriting the line 79:

    $(this).trigger('mouseenter');

    First I think I have to listen at the board on the mouseover event instead to test, what child element I hovered over (at line 47):

    board.addEvenetListener('mouseover', function(e) {
    if(e.target.classList.contains('empty) {
    // find lastEmptyCell etc.
    }
    });

    Then I think I have to trigger the mouseover event from the child element and let it bubble up to the board (line 79):

    e.target.dispatchEvent(new Event('mouseover', { bubble: true });

    But the event listener above does not catch this event. It is only called if i dispatch the event from the board (board.dispatchEvent(new Event('mouseover'))). But then I cannot access the actual cell, that was hovered in the event listener.

    Has anyone an idea what I am making wrong?

    EDIT:
    I made a quick demo: https://codepen.io/anon/pen/pKMzYW?editors=1111
    If I click on a child, I would expect, that the mouseover event listener gets triggered and logs the child id.

  3. the moon

    Great tutorial. Went kind of fast at the checkForWinner method though.

  4. Kevin Urgilés

    I think you went a bit fast explaining how checkWinner() works . Out of that, the rest of the explanation is easy to grasp.

    Thanks a lot!

  5. Kevin M

    Once i add Attr everything disappear

  6. Dylan Campbell

    can someone explain the

    const cells = $('.col[data-col=${col}']')

    that makes no sense to me

  7. SuperMoritz95

    Awesome tutorial, good job! There only one thing in the checkWinFunction I'm not sure about if it is correct: checkDiagonalTLtoBL – Shouldn't it be "-1" for i of the directionB?
    Like this: return checkWin ( { i: 1, j: -1 }, { i: -1, j: 1 } );
    Strangely it works either way, so let me know if I am wrong!:)
    Cheers

  8. Prabal Gupta

    Are declarations made under "const" global or local??

  9. CLUSION

    When I hover over the connect4 frame the console.log doesn't work for some odd reason and the code it perfectly fine there is no errors and I debugged it ???

  10. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL

    The Ruvol Inventor

  11. Daniel Silva

    You change a LOT of stuff with keyboard shortcuts without communicating or explaining why and those oversights break the code for those who are following your steps, I counted at least three things being deleted off-camera without a single mention or warning.
    A waste of time 30 minutes in.

Leave a Reply