♟️ Code CHESS in JavaScript (Super simple!)

Found this hard? Learn the fundamentals of JavaScript here:

🚀 Sign up to to receive access for the final code.

____
⭐ Check out my IDE here and get 1 month free:

⭐ New to code and none of this is making sense? Watch my ’12hr+ YouTube Coding Bootcamp’ in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It’s on my channel and its 100% free.

⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here (I get no commission from this link, but am in a partnership):

⭐ You can get a blockchain domain with my affiliate link here:

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! :

⭐ Sign up for weekly coding tips from my newsletter partnership:

You can also find me on:
Twitter:
Instagram:

169 Comments

  1. I started similar as you did and finished with TypeScript instead of pure JS and a deep Object Oriented Programming approach. I really recommend people to try it out the code is way more easy to maintain, read and develop. At the same time I manipulated the DOM mostly directly with JS/TypeScript and I learned a lot about it. Very fun project and an amazing way to learn. Now I will extend this to a Fullstack application with database because why not?

  2. why this line is undefined in my code const byOpponent = (e.target.firstChild?.classList.contains(oponentGo))

  3. is there any reference that will do in the angular chess game UI

  4. const gameBoard = document.querySelector("#gameboard");
    const playerDisplay = document.querySelector("#player");
    const infoDisplay = document.querySelector("#info-display");

    const width = 0;

    const startPieces = [
    rock, knight, bishop, queen, king, bishop, knight, rook,
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    rock, knight, bishop, queen, king, bishop, knight, rook,
    ]

    function createBoard() {
    startPieces.forEach((startPiece) => {
    const square = document.createElement('div');
    square.classList.add('square');
    square.setAttribute('square-id')
    square.classList.add('beige');
    gameBoard.append(square);
    });
    }

    createBoard();

  5. please help there are no squares
    const gameBoard = document.querySelector("#gameboard");
    const playerDisplay = document.querySelector("#player");
    const infoDisplay = document.querySelector("#info-display");

    const width = 0;

    const startPieces = [
    rock, knight, bishop, queen, king, bishop, knight, rook,
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    rock, knight, bishop, queen, king, bishop, knight, rook,
    ]

    function createBoard() {
    startPieces.forEach((startPiece) => {
    const square = document.createElement('div');
    square.classList.add('square');
    square.setAttribute('square-id')
    square.classList.add('beige');
    gameBoard.append(square);
    });
    }

    createBoard();

  6. const gameBoard = document.querySelector("#gameboard");
    const playerDisplay = document.querySelector("#player");
    const infoDisplay = document.querySelector("#info-display");

    const width = 0;

    const startPieces = [
    rock, knight, bishop, queen, king, bishop, knight, rook,
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    rock, knight, bishop, queen, king, bishop, knight, rook,
    ]

    function createBoard() {
    startPieces.forEach((startPiece) => {
    const square = document.createElement('div');
    square.classList.add('square');
    square.setAttribute('square-id')
    square.classList.add('beige');
    gameBoard.append(square);
    });
    }

    createBoard();

  7. const gameBoard = document.querySelector("#gameboard");
    const playerDisplay = document.querySelector("#player");
    const infoDisplay = document.querySelector("#info-display");

    const width = 0;

    const startPieces = [
    rock, knight, bishop, queen, king, bishop, knight, rook,
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    rock, knight, bishop, queen, king, bishop, knight, rook,
    ]

    function createBoard() {
    startPieces.forEach((startPiece) => {
    const square = document.createElement('div');
    square.classList.add('square');
    square.setAttribute('square-id')
    square.classList.add('beige');
    gameBoard.append(square);
    });
    }

    createBoard();

  8. const gameBoard = document.querySelector("#gameboard");
    const playerDisplay = document.querySelector("#player");
    const infoDisplay = document.querySelector("#info-display");

    const width = 0;

    const startPieces = [
    rock, knight, bishop, queen, king, bishop, knight, rook,
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    rock, knight, bishop, queen, king, bishop, knight, rook,
    ]

    function createBoard() {
    startPieces.forEach((startPiece) => {
    const square = document.createElement('div');
    square.classList.add('square');
    square.setAttribute('square-id')
    square.classList.add('beige');
    gameBoard.append(square);
    });
    }

    createBoard();

  9. const gameBoard = document.querySelector("#gameboard");
    const playerDisplay = document.querySelector("#player");
    const infoDisplay = document.querySelector("#info-display");

    const width = 0;

    const startPieces = [
    rock, knight, bishop, queen, king, bishop, knight, rook,
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    rock, knight, bishop, queen, king, bishop, knight, rook,
    ]

    function createBoard() {
    startPieces.forEach((startPiece) => {
    const square = document.createElement('div');
    square.classList.add('square');
    square.setAttribute('square-id')
    square.classList.add('beige');
    gameBoard.append(square);
    });
    }

    createBoard();

  10. hello there isnt 64 squares
    fix pleae chatgpt doesnt know what to do
    const gameBoard = document.querySelector("#gameboard");
    const playerDisplay = document.querySelector("#player");
    const infoDisplay = document.querySelector("#info-display");

    const width = 0;

    const startPieces = [
    rock, knight, bishop, queen, king, bishop, knight, rook,
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    rock, knight, bishop, queen, king, bishop, knight, rook,
    ]

    function createBoard() {
    startPieces.forEach((startPiece) => {
    const square = document.createElement('div');
    square.classList.add('square');
    square.setAttribute('square-id')
    square.classList.add('beige');
    gameBoard.append(square);
    });
    }

    createBoard();

  11. HELLO SOURCE CODE PLEASE?????????????????IAMSTUCK THEREI S NO 64 BOXESconst gameBoard = document.querySelector("#gameboard");
    const playerDisplay = document.querySelector("#player");
    const infoDisplay = document.querySelector("#info-display");

    const width = 0;

    const startPieces = [
    rock, knight, bishop, queen, king, bishop, knight, rook,
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    rock, knight, bishop, queen, king, bishop, knight, rook,
    ]

    function createBoard() {
    startPieces.forEach((startPiece) => {
    const square = document.createElement('div');
    square.classList.add('square');
    square.setAttribute('square-id')
    square.classList.add('beige');
    gameBoard.append(square);
    });
    }

    createBoard();

  12. const gameBoard = document.querySelector("#gameboard");
    const playerDisplay = document.querySelector("#player");
    const infoDisplay = document.querySelector("#info-display");

    const width = 0;

    const startPieces = [
    rock, knight, bishop, queen, king, bishop, knight, rook,
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    rock, knight, bishop, queen, king, bishop, knight, rook,
    ]

    function createBoard() {
    startPieces.forEach((startPiece) => {
    const square = document.createElement('div');
    square.classList.add('square');
    square.setAttribute('square-id')
    square.classList.add('beige');
    gameBoard.append(square);
    });
    }

    createBoard();

    HELLO? WHY IS THERE NO 64 BOXES
    const gameBoard = document.querySelector("#gameboard");
    const playerDisplay = document.querySelector("#player");
    const infoDisplay = document.querySelector("#info-display");

    const width = 0;

    const startPieces = [
    rock, knight, bishop, queen, king, bishop, knight, rook,
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    '', '', '', '', '', '', '', '',
    pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
    rock, knight, bishop, queen, king, bishop, knight, rook,
    ]

    function createBoard() {
    startPieces.forEach((startPiece) => {
    const square = document.createElement('div');
    square.classList.add('square');
    square.setAttribute('square-id')
    square.classList.add('beige');
    gameBoard.append(square);
    });
    }

    createBoard();

  13. why isnt mine working?
    let element = document.createElement('div');
    element.setAttribute("class", "my-class");
    element.style.background = "red";
    element.innerText = "Hello";
    element.addEventListener('click', function(event) {
    event.preventDefault();
    console.log("Clicked!")
    })
    document.body.append(element);let element = document.createElement('div');
    element.setAttribute("class", "my-class");
    element.style.background = "red";
    element.innerText = "Hello";
    element.addEventListener('click', function(event) {
    event.preventDefault();
    console.log("Clicked!")
    })
    document.body.append(element);let element = document.createElement('div');
    element.setAttribute("class", "my-class");
    element.style.background = "red";
    element.innerText = "Hello";
    element.addEventListener('click', function(event) {
    event.preventDefault();
    console.log("Clicked!")
    })
    document.body.append(element);let element = document.createElement('div');
    element.setAttribute("class", "my-class");
    element.style.background = "red";
    element.innerText = "Hello";
    element.addEventListener('click', function(event) {
    event.preventDefault();
    console.log("Clicked!")
    })
    document.body.append(element);let element = document.createElement('div');
    element.setAttribute("class", "my-class");
    element.style.background = "red";
    element.innerText = "Hello";
    element.addEventListener('click', function(event) {
    event.preventDefault();
    console.log("Clicked!")
    })
    document.body.append(element);let element = document.createElement('div');
    element.setAttribute("class", "my-class");
    element.style.background = "red";
    element.innerText = "Hello";
    element.addEventListener('click', function(event) {
    event.preventDefault();
    console.log("Clicked!")
    })
    document.body.append(element);let element = document.createElement('div');
    element.setAttribute("class", "my-class");
    element.style.background = "red";
    element.innerText = "Hello";
    element.addEventListener('click', function(event) {
    event.preventDefault();
    console.log("Clicked!")
    })
    document.body.append(element);

  14. jesus christ why am i trying to learn programming
    cant fuckign do this

  15. got stuck around 15:51 .. legit exact code … whats wrong why dont the squares show up?

  16. Appreciate how your camera doesnt take up half the screen, incredibly professional! 😊

  17. why did you make your videos unavailable??????

  18. i appreciate people using more and more javascript, keep up the good work!

  19. muito foda, very foda, vou fazer um projeto assim.

  20. I can’t add the svg into my JavaScript file

  21. Everything you provide our community is pure gold!Thank you Ania!!!

  22. Impressive Ania,
    Could you make them into all in one game zone including the admin dashboard?

  23. your rook's logic is wrong … i am damn sure

  24. can't decide what is more beautiful, you or the code. So, i watched the video twice, once for the code and second time i just looked at you… So distracting…

  25. You really should not code logic for figures in that way it is obvious that it is too repetitive and redundant and hard to debug, and when there is repeating you should be using loops.example for bishop :case 'bishop':
    // Calculate the difference between the target and start squares
    const diff = Math.abs(targetId – startId);

    // Check if the move is along a diagonal (difference is a multiple of width + 1 or width – 1)
    if (diff % (width + 1) === 0 || diff % (width – 1) === 0) {

    const step = diff % (width + 1) === 0 ? (width + 1) : (width – 1);

    // Determine the direction of the step (positive or negative)
    const direction = targetId > startId ? 1 : -1;

    // Loop through each square along the diagonal to check for blocking pieces
    for (let i = startId + step * direction; i !== targetId; i += step * direction) {
    const square = document.querySelector(`[square-id="${i}"]`);

    // If a square contains a piece, the path is blocked
    if (square.firstChild) {
    return false;
    }
    }

    return true;
    }

    return false;

  26. i thought we would write html and style with grid css

  27. Did you ever do a follow up for check logic? I was thinking of making chess in something (JS made sense so I'd have a GUI), but the thing I was finding the most difficult was determining what moves were legal, mainly due to stuff like pins on the king.

  28. i need to pay 499 dollars to access the source code?

  29. Thank you Madam !! i was dreaming with this chess program !! i will do it !!

  30. Hello, could you add subtitles in your language and then translate it into my language, your class is very interesting, thank you

  31. I've just found one gem of a playlist. Very thankful!

  32. té surman 1 trap toa mé ze te ve kom proféseur tte ma vi keur keur lodeur de ta kilot hmmmmmmmm

  33. at the final demonstration the white king is still in check and it cannot move forward

  34. I believe there might be an issue with this if I haven't made a mistake on my part:

    For the rook (and by extension, the queen), the code for moving left and right in a straight line is:
    startId + 1 === targetId ||

    startId + 2 === targetId ||

    startId + 3 === targetId ||

    startId + 4 === targetId ||

    startId + 5 === targetId ||

    startId + 6 === targetId ||

    startId + 7 === targetId ||

    //–

    startId – 1 === targetId ||

    startId – 2 === targetId ||

    startId – 3 === targetId ||

    startId – 4 === targetId ||

    startId – 5 === targetId ||

    startId – 6 === targetId ||

    startId – 7 === targetId ||

    So if rook/queen is standing in for example position 5 it as possible to move it 1 row ahead and 2/3/4/5 positions to the side to positions 11/10/9/8 as it falls in the code of being +- 7 positions, which is of course an illegal move,.

    I solved it by in the createBoard function adding:
    square.setAttribute('row', row)

    Creating a variable:
    let startPositionRow

    in dragStart function:
    startPositionRow = e.target.parentNode.getAttribute('row')

    in checkIfValid function:
    const targetRow = Number(target.getAttribute('row'))

    const startRow = Number(startPositionRow)

    if(

    startId + 1 === targetId && startRow === targetRow ||

    startId + 2 === targetId && startRow === targetRow ||

    startId + 3 === targetId && startRow === targetRow ||

    startId + 4 === targetId && startRow === targetRow ||

    startId + 5 === targetId && startRow === targetRow ||

    startId + 6 === targetId && startRow === targetRow ||

    startId + 7 === targetId && startRow === targetRow ||

    startId – 1 === targetId && startRow === targetRow ||

    startId – 2 === targetId && startRow === targetRow ||

    startId – 3 === targetId && startRow === targetRow ||

    startId – 4 === targetId && startRow === targetRow ||

    startId – 5 === targetId && startRow === targetRow ||

    startId – 6 === targetId && startRow === targetRow ||

    startId – 7 === targetId && startRow === targetRow ||
    )

  35. this is my code for the checkIfValid function and my pawns do act accordingly

    function checkIfValid(target) {
    const targetId = Number(target.getAttribute("square-id")) ||
    Number(target.parentNode.getAttribute("square-id"));
    const startId = Number(startPositionId);
    const piece = draggedElement.id;
    console.log("targetId", targetId);
    console.log("startId", startId);
    console.log("piece", piece);

    switch (piece) {
    case "pawn":
    const starterRow = [8,9,10,11,12,13,14,15];
    if (
    starterRow.includes(startId) && startId + width * 2 === targetId ||
    startId + width === targetId ||
    startId + width – 1 === targetId &&
    document.querySelector(`[square-id="${startId + width – 1}"`).firstChild ||
    startId + width + 1 === targetId &&
    document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild
    ) {
    return true;
    }
    }
    }

    anyone else with this issue or see a mistake?

  36. Egyptian_Home 🥰 أكل و كروشية🥰 says:

    I have a question ,how can I hide the sign next to the cursor that appears when I drag a piece

  37. does someone have the complete code from this video

  38. Shalom evening howdy how my Lady. Super simple for you maybe NOT for me! Well, playing chess is but not programming it!

  39. i have been waiting ages for someone to build something like this with javascript 🙂 im currently building a survival game with buttons and crafting and inventory menu and its difficult maybe this video will give me more ideas hopefully with the drag and drop.

Leave a Reply

Your email address will not be published. Required fields are marked *