{"id":134,"date":"2020-02-20T22:34:53","date_gmt":"2020-02-20T21:34:53","guid":{"rendered":"https:\/\/benjaminperonne.fr\/src\/wordpress\/?p=134"},"modified":"2021-04-09T03:09:10","modified_gmt":"2021-04-09T01:09:10","slug":"puissance4","status":"publish","type":"post","link":"https:\/\/benjaminperonne.fr\/src\/wordpress\/2020\/02\/20\/puissance4\/","title":{"rendered":"Puissance4"},"content":{"rendered":"\n

Presentation<\/h3>\n\n\n\n

Power 4 is a game made as part of practical work for school. You can try it here<\/a><\/p>\n\n\n\n

You can find all the resources on my Github<\/a><\/p>\n\n\n\n

Main Code<\/h3>\n\n\n\n
\/**\r\n * @author Benjamin Peronne\r\n * @email contact@benjaminperonne.fr\r\n *\/\r\n\r\n\/*\r\nJS | Activit\u00e9 2\r\n*\/\r\n\r\ndocument.querySelector('#jeu').style.visibility = 'hidden';\r\n\r\nvar j1 = new Object();\r\nvar j2 = new Object();\r\nlet players = [j1, j2];\r\n\r\nvar current_player = 1;\r\nlet nbr_instances = 0;\r\nlet keep_playing = true;\r\n\r\nj1.ins = false;\r\nj2.ins = false;\r\n\r\n\/\/Rempli le plateau de pions\r\nfunction init_plateau() {\r\n    var plateau = document.querySelector('#plateau');\r\n    \/* Remplir le plateau *\/\r\n    for (let i = 0; i < 49; i++) {\r\n        let tmp = document.createElement('div');\r\n        tmp.classList.add('pion');\r\n        tmp.setAttribute('onclick', 'touch(' + i + ')');\r\n        plateau.appendChild(tmp);\r\n    }\r\n    document.querySelector('#jeu').style.visibility = 'visible';\r\n}\r\n\r\n\/\/Fontion d'inscription\r\nfunction ins(player) {\r\n    \/\/ Completer pour v\u00e9rifier l'inscription\r\n    if (player == 1) {\r\n        j1.ins = true;\r\n        var x = document.getElementsByName('j1');\r\n        let j1_name = document.getElementById('j1-name');\r\n\r\n        x = x[0];\r\n        \/* Mettre le nom du joueur dans la balise #j1-name *\/\r\n        j1_name.replaceChild(\r\n            document.createTextNode(x.value),\r\n            j1_name.firstChild\r\n        );\r\n        x.disabled = false;\r\n        j1.name = j1_name.firstChild;\r\n        \/\/ j1.name = x.value;\r\n    } else {\r\n        j2.ins = true;\r\n        var x = document.getElementsByName('j2');\r\n        let j2_name = document.getElementById('j2-name');\r\n        x = x[0];\r\n        \/* Mettre le nom du joueur dans la balise #j2-name *\/\r\n        j2_name.replaceChild(\r\n            document.createTextNode(x.value),\r\n            j2_name.firstChild\r\n        );\r\n        x.disabled = true;\r\n        j2.name = j2_name.firstChild;\r\n        \/\/ j2.name = x.value;\r\n    }\r\n\r\n    if (j1.ins && j2.ins) {\r\n        \/\/ Retirer le panneau d'inscription\r\n        var ins = document.getElementById('ins');\r\n        ins.parentNode.removeChild(ins);\r\n        \/* retirer la balise div #ins du html *\/\r\n\r\n        \/\/Initialise le plateau\r\n        init_plateau();\r\n\r\n        \/\/lien avec les logo\r\n        j1.logo = document.querySelector('.fas.fa-user.j1');\r\n        j2.logo = document.querySelector('.fas.fa-user.j2');\r\n\r\n        \/\/Instruction de jeu\r\n        \/* Mettre le nom du joueur dans la balise player-name *\/\r\n        document\r\n            .getElementById('player-name')\r\n            .appendChild(document.createTextNode(j1.name.data));\r\n\r\n        \/\/ne joue pas pour le moment\r\n        j2.logo.classList.toggle('fas');\r\n        j2.logo.classList.toggle('far');\r\n\r\n        \/\/ document.getElementById('j1-name').innerText = j1.name;\r\n        \/\/ document.getElementById('j2-name').innerText = j2.name;\r\n        \/\/ document.getElementById('j1-name').textContent = j1.name;\r\n        \/\/ document.getElementById('j2-name').textContent = j2.name;\r\n    }\r\n}\r\n\r\nfunction empty(box) {\r\n    tokens = box.style.backgroundColor;\r\n    return tokens != 'red' && tokens != 'yellow';\r\n}\r\n\r\n\/\/ We check if a line has 4 tokens of the same color aligned\r\nfunction if_aligned(board, item, i, n, step = 1, r = 0) {\r\n    if (i > n || r == 4) return [r, item];\r\n    else {\r\n        let c = board[i].style.backgroundColor;\r\n        return c && c == item\r\n            ? if_aligned(board, item, i + step, n, step, r + 1)\r\n            : if_aligned(board, c, i + step, n, step, 1);\r\n    }\r\n}\r\n\r\nfunction evaluate(board, i, col) {\r\n    let r = 0,\r\n        tmp = 0;\r\n\r\n    \/\/ ----------------- verif horizontal\r\n    if ((r = if_aligned(board, 'red', i - col, i - col + 6))[0] == 4 && r[1])\r\n        return r[1] == 'red' ? -1 : 1;\r\n    \/\/ ----------------- verif horizontal\r\n\r\n    \/\/ ----------------- verif vertical\r\n    if ((r = if_aligned(board, 'red', col, col + 42, 7))[0] == 4 && r[1])\r\n        return r[1] == 'red' ? -1 : 1;\r\n    \/\/ ----------------- verif vertical\r\n\r\n    tmp = i - col * 7 - col;\r\n    \/\/ ----------------- verif diagonal lower left\r\n    if (tmp > 0) r = if_aligned(board, '', tmp, 48, 8);\r\n    \/\/ ----------------- verif diagonal lower left\r\n    \/\/ ----------------- verif upper diagonal to the left\r\n    else {\r\n        tmp = col - (i - col) \/ 7;\r\n        r = if_aligned(board, 'red', tmp, 48 - tmp * 7, 8);\r\n    }\r\n    \/\/ ----------------- verif upper diagonal to the left\r\n\r\n    if (r[0] == 4 && r[1]) return r[1] == 'red' ? -1 : 1;\r\n\r\n    tmp = i - (6 - col) * 6;\r\n    \/\/ ----------------- verif diagonal lower right\r\n    if (tmp > 0)\r\n        r = if_aligned(board, '', tmp, tmp + (6 - (tmp - 6) \/ 7) * 6, 6);\r\n    \/\/ ----------------- verif diagonal lower right\r\n    \/\/ ----------------- verif upper diagonal to the right\r\n    else {\r\n        tmp = col + (i - col) \/ 7;\r\n        r = if_aligned(board, 'red', tmp, 42 - (6 - tmp) * 7, 6);\r\n    }\r\n    \/\/ ----------------- verif upper diagonal to the right\r\n    if (r[0] == 4 && r[1]) return r[1] == 'red' ? -1 : 1;\r\n\r\n    return 0;\r\n}\r\n\r\nfunction touch(id) {\r\n    var pions = document.querySelectorAll('.pion'),\r\n        names = document.getElementById('player-name'),\r\n        infos = document.getElementById('info'),\r\n        r = 0,\r\n        i = 0,\r\n        col = id % 7,\r\n        jouable = false;\r\n\r\n    for (i = col; i <= 41 && empty(pions[i]) && empty(pions[i + 7]); i += 7)\r\n        jouable = true;\r\n\r\n    if (empty(pions[id]) && (jouable || i < 7) && keep_playing) {\r\n        nbr_instances += 1;\r\n        pions[i].style.backgroundColor = current_player == 1 ? 'red' : 'yellow';\r\n\r\n        if (nbr_instances >= 6) {\r\n            r = evaluate(pions, i, col);\r\n            if (r) {\r\n                keep_playing = false;\r\n                infos.replaceChild(\r\n                    document.createTextNode(' Won !'),\r\n                    infos.lastChild\r\n                );\r\n            } else if (!r && nbr_instances == 49) {\r\n                keep_playing = false;\r\n                names.replaceChild(\r\n                    document.createTextNode('PAR: '),\r\n                    names.firstChild\r\n                );\r\n                infos.replaceChild(\r\n                    document.createTextNode(' No player wins !'),\r\n                    infos.lastChild\r\n                );\r\n            }\r\n        }\r\n\r\n        if (!r && keep_playing) {\r\n            current_player = current_player == 1 ? 2 : 1;\r\n            names.replaceChild(\r\n                document.createTextNode(players[current_player - 1].name.data),\r\n                names.firstChild\r\n            );\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n\n\n\n
Images<\/h3>\n\n\n\n
  • \"\"<\/figure><\/li>
  • \"\"<\/figure><\/li>
  • \"\"<\/figure><\/li><\/ul><\/figure>\n","protected":false},"excerpt":{"rendered":"
    Presentation Power 4 is a game made as part of practical work for school. You can try it here You can find all the resources on my Github Main Code Images<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/benjaminperonne.fr\/src\/wordpress\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjaminperonne.fr\/src\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benjaminperonne.fr\/src\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benjaminperonne.fr\/src\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjaminperonne.fr\/src\/wordpress\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":5,"href":"https:\/\/benjaminperonne.fr\/src\/wordpress\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":144,"href":"https:\/\/benjaminperonne.fr\/src\/wordpress\/wp-json\/wp\/v2\/posts\/134\/revisions\/144"}],"wp:attachment":[{"href":"https:\/\/benjaminperonne.fr\/src\/wordpress\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benjaminperonne.fr\/src\/wordpress\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benjaminperonne.fr\/src\/wordpress\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}