2a:null 2b:["$","title",null,{"children":"Morpion - 5* | linard-y | Observable"}] 31:T144b,class game { constructor() { this.ctx = renderer.getContext("2d"); this.canvas = this.ctx.canvas; this.model = new AppModel(); this.mouse = Object({x: 0, y: 0}); } ///////////////////////////////////////////////////////////////////// mouseMove = function(e) { this.mouse.x = e.offsetX; this.mouse.y = e.offsetY; this.move(this.mouse.x, this.mouse.y); }; mouseClick = function(e) { if (!this.model.playing) return; this.moveUser(); } ///////////////////////////////////////////////////////////////////// renderBoard = function() { this.ctx.fillStyle = color.canvas; this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.width); this.ctx.beginPath(); this.ctx.strokeStyle = color.border; this.ctx.lineWidth = 1; for (var x = 0.5; x < this.canvas.width; x += cellsize) { this.ctx.moveTo(x, 0); this.ctx.lineTo(x, this.canvas.height); } for (var y = 0.5; y < this.canvas.height; y += cellsize) { this.ctx.moveTo(0, y); this.ctx.lineTo(this.canvas.width, y); } this.ctx.stroke(); }; renderMove = function(nm) { var n = nm.n || this.model.n; var m = nm.m || this.model.m; if (this.model.matrix[n][m] === 1) this.renderX(n, m); else this.renderO(n, m); }; renderMoveHashLable = function(n, m, text, dx, dy) { var x = m * cellsize + dx * cellsize / 8; var y = n * cellsize + dy * cellsize / 8; this.ctx.fillStyle = color.canvas; this.ctx.fillRect(x, y, 10, 10); this.ctx.fillStyle = color.border; this.ctx.textBaseline = 'top'; this.ctx.fillText(text, x, y); }; renderMoveHash = function() { for (var n in this.model.hashStep) for (var m in this.model.hashStep[n]) { this.renderMoveHashLable(n, m, this.model.hashStep[n][m].sum, 1, 1); this.renderMoveHashLable(n, m, this.model.hashStep[n][m].attack, 1, 3); this.renderMoveHashLable(n, m, this.model.hashStep[n][m].defence, 6, 3); this.renderMoveHashLable(n, m, this.model.hashStep[n][m].attackPattern, 1, 6); this.renderMoveHashLable(n, m, this.model.hashStep[n][m].defencePattern, 6, 6); } }; renderWinLine = function() { var m1 = this.model.winLine[0]; var n1 = this.model.winLine[1]; var m2 = this.model.winLine[2]; var n2 = this.model.winLine[3]; var r = this.model.winLine[4] || 1; this.ctx.beginPath(); this.ctx.strokeStyle = color.winline; this.ctx.lineWidth = 3; this.ctx.lineCap = 'round'; this.ctx.moveTo(m1 * cellsize + cellsize/2 - (cellsize/2) * (m1 !== m2), n1 * cellsize + cellsize/2 - (cellsize/2) * (n1 !== n2) * r); this.ctx.lineTo(m2 * cellsize + cellsize/2 + (cellsize/2) * (m1 !== m2), n2 * cellsize + cellsize/2 + (cellsize/2) * (n1 !== n2) * r); this.ctx.stroke(); }; renderX = function(n, m) { this.ctx.beginPath(); var x = m * cellsize + cellsize/2; var y = n * cellsize + cellsize/2; this.ctx.fillStyle = color.canvas; this.ctx.fillRect(x - cellsize/2 + 1, y - cellsize/2 + 1, cellsize - 2, cellsize - 2); this.ctx.strokeStyle = '#C1876B'; this.ctx.lineWidth = 5; this.ctx.lineCap = 'round'; this.ctx.moveTo(x - cross, y - cross); this.ctx.lineTo(x + cross, y + cross); this.ctx.moveTo(x - cross, y + cross); this.ctx.lineTo(x + cross, y - cross); this.ctx.stroke(); }; renderO = function(n, m) { this.ctx.beginPath(); var x = m * cellsize + cellsize/2; var y = n * cellsize + cellsize/2; this.ctx.fillStyle = color.canvas; this.ctx.fillRect(x - cellsize/2 + 1, y - cellsize/2 + 1, cellsize - 2, cellsize - 2); this.ctx.strokeStyle = '#BEBD7F'; this.ctx.lineWidth = 5; this.ctx.lineCap = 'round'; this.ctx.arc(x, y, radius, 0, 2 * Math.PI); this.ctx.stroke(); }; setStyleCursor = function(x, y) { var n = Math.floor(y / cellsize); var m = Math.floor(x / cellsize); if (n < this.model.size && m < this.model.size && this.model.matrix[n][m] === 0) this.canvas.style.cursor = 'pointer'; else this.canvas.style.cursor = 'default'; return {n: n, m: m}; }; setStyleCursorDefault = function() { this.canvas.style.cursor = 'default'; }; moveAI = function() { var nm = this.model.moveAI(); this.renderMove(nm); if (!this.model.playing) this.renderWinLine(); }; moveUser = function() { if (!this.model.emptyCell()) return; var nm = this.model.moveUser(); this.renderMove(nm); this.setStyleCursorDefault(); if (!this.model.playing) this.renderWinLine(); else this.moveAI(); }; move = function(x, y) { if (!this.model.playing) return; this.model.setNM(this.setStyleCursor(x, y)); }; click = function() { if (!this.model.playing) return; this.moveUser(); }; }32:T2c81,class AppModel { constructor() { this.m; //Numéro de colonne active sur le plateau de jeu this.n; //Numéro de ligne active sur le plateau de jeu this.size = 15; // Taille du plateau de jeu (15х15 cellules) // Variable logique indiquant qui joue maintenant // vrai:: AI (X), faux:: joueur (0) this.who = true; // La matrice du plateau 15x15 rempli avec 0 (libre), 1 (croix), 2 (zéro) this.matrix = []; for (var n = 0; n < this.size; n++) { this.matrix[n] = []; for (var m = 0; m < this.size; m++) { this.matrix[n][m] = 0; } } // Nombre de cellules libres. Au début de chaque partie = 225 this.freeCells = this.size * this.size; // Tableau de hachage des coups potentiels this.hashStep = {7: {7: {sum: 0, attack: 1, defence: 0, attackPattern: 0, defencePattern: 0}}}; // la première étape si AI joue pour X this.playing = false; // True = jeu en cours (l'utilisateur peut cliquer sur le plateau, etc.) // Coordonnées de la ligne de la victoire this.winLine = []; this.prePattern = [ // Des motifs et leurs poids. X doit être remplacé par une croix (1) ou un zéro (0), 0 étant une cellule libre {s: 'xxxxx', w: 99999}, // cinq à la suite (ligne gagnante finale) {s: '0xxxx0', w: 7000}, // un quatuor ouvert de part et d'autre {s: '0xxxx', w: 4000}, // un quatuor ouvert à gauche {s: 'xxxx0', w: 4000}, // un quatuor ouvert à droites {s: '0x0xxx', w: 2000}, // etc... {s: '0xx0xx', w: 2000}, {s: '0xxx0x', w: 2000}, {s: 'xxx0x0', w: 2000}, {s: 'xx0xx0', w: 2000}, {s: 'x0xxx0', w: 2000}, {s: '0xxx0', w: 3000}, {s: '0xxx', w: 1500}, {s: 'xxx0', w: 1500}, {s: '0xx0x', w: 800}, {s: '0x0xx', w: 800}, {s: 'xx0x0', w: 800}, {s: 'x0xx0', w: 800}, {s: '0xx0', w: 200} ]; this.pattern = [[], [], []]; // Tableau de motifs pour X et 0, générés à partir de motifs précédents this.patternWin = [0, /(1){5}/, /(2){5}/, /[01]*7[01]*/, /[02]*7[02]*/]; // Motifs gagants this.directions = []; // Instructions pour le calcul des mouvements potentiels // Compteur de coups de jeu this.step = 0; for (var i in this.prePattern) // On initie un tableau de motifs pour le joueur #1 (croix) et le joueur #2 (zéros) { let s = this.prePattern[i].s; let pos = -1; let a = []; while ((pos = s.indexOf('x', pos + 1)) !== -1) { a[a.length] = s.substr(0, pos) + '7' + s.substr(pos + 1); } s = a.join('|'); let l = this.pattern[0].length; this.pattern[0][l] = this.prePattern[i].w; // Poids des motifs this.pattern[1][l] = new RegExp(s.replace(/x/g, '1')); // Motif le joueur #1, par exemple 011110 this.pattern[2][l] = new RegExp(s.replace(/x/g, '2')); // Motif le joueur #2, par exemple 022220 } for (var n = -2; n <= 2; n++) // Remplir un tableau de déplacements potentiels (dans un rayon de 2 cellules) { // et la définition de poids minimums (utilisés pour calculer les premiers coups jusqu'à l'apparition de motifs) for (var m = -2; m <= 2; m++) { if (n === 0 && m === 0) continue; if (Math.abs(n) <= 1 && Math.abs(m) <= 1) this.directions.push({n: n, m: m, w: 3}); else if (Math.abs(n) === Math.abs(m) || n * m === 0) this.directions.push({n: n, m: m, w: 2}); else this.directions.push({n: n, m: m, w: 1}); } } }; setStartData = function(a) { // Paramètres initiaux pour chaque nouveau jeu this.playing = true; if (a === 2) console.log('New Game! X - AI, O - user'); else console.log('New Game! X - user, O - AI'); }; setNM = function(a) { // Définition des coordonnées de la course actuelle this.n = a.n; this.m = a.m; }; emptyCell = function() { // Vérification de l'accessibilité d'une cellule pour un déplacement return this.matrix[this.n][this.m] === 0; }; moveUser = function() { // Mouvement de l'utilisateur this.playing = false; // On interdit les clics pendant que le calcul est en cours return this.move(this.n, this.m, false); }; moveAI = function() { // Coup de l'IA this.playing = false; var n, m; var max = 0; this.calculateHashMovePattern(); // Calcul des pondérations for (n in this.hashStep) // Trouve le coup avec la meilleure pondération for (m in this.hashStep[n]) if (this.hashStep[n][m].sum > max) max = this.hashStep[n][m].sum; var goodmoves = []; for (n in this.hashStep) // Trouver les meilleurs coups (s'il y en a plusieurs) for (m in this.hashStep[n]) if (this.hashStep[n][m].sum === max) { goodmoves[goodmoves.length] = {n: parseInt(n), m: parseInt(m)}; } var movenow = goodmoves[getRandomInt(0, goodmoves.length - 1)]; // Sélection d'un coup au hasard s'il y a plusieurs coups à choisir. this.n = movenow.n; this.m = movenow.m; return this.move(this.n, this.m, true); }; move = function(n, m, aiStep) { // Coup (IA ou utilisateur) if (this.hashStep[n] && this.hashStep[n][m]) delete this.hashStep[n][m]; this.matrix[n][m] = 2 - this.who; // Sauvegarde d'un coup dans la matrice this.who = !this.who; // Passer de X à O ou de O à X this.freeCells--; var t = this.matrix[this.n][this.m]; var s = ['', '', '', '']; var nT = Math.min(this.n, 4); var nR = Math.min(this.size - this.m - 1, 4); var nB = Math.min(this.size - this.n - 1, 4); var nL = Math.min(this.m, 4); for (var j = this.n - nT; j <= this.n + nB; j++) s[0] += this.matrix[j][this.m]; for (var i = this.m - nL; i <= this.m + nR; i++) s[1] += this.matrix[this.n][i]; for (var i = -Math.min(nT, nL); i <= Math.min(nR, nB); i++) s[2] += this.matrix[this.n + i][this.m + i]; for (var i = -Math.min(nB, nL); i <= Math.min(nR, nT); i++) s[3] += this.matrix[this.n - i][this.m + i]; var k; if ((k = s[0].search(this.patternWin[t])) >= 0) this.winLine = [this.m, this.n - nT + k, this.m, this.n - nT + k + 4]; else if ((k = s[1].search(this.patternWin[t])) >= 0) this.winLine = [this.m - nL + k, this.n, this.m - nL + k + 4, this.n]; else if ((k = s[2].search(this.patternWin[t])) >= 0) this.winLine = [this.m - Math.min(nT, nL) + k, this.n - Math.min(nT, nL) + k, this.m - Math.min(nT, nL) + k + 4, this.n - Math.min(nT, nL) + k + 4]; else if ((k = s[3].search(this.patternWin[t])) >= 0) this.winLine = [this.m - Math.min(nB, nL) + k, this.n + Math.min(nB, nL) - k, this.m - Math.min(nB, nL) + k + 4, this.n + Math.min(nB, nL) - k - 4, -1]; this.playing = (this.freeCells !== 0 && this.winLine.length === 0); // Vérification de fin de partie (victoire ou absence de cellules vides) if (this.playing) this.calculateHashMove(aiStep); console.log(++this.step + ': ' + n + ', ' + m); return {n: n, m: m}; }; calculateHashMove = function(attack) { for (var key in this.directions) { var n = this.n + this.directions[key].n; var m = this.m + this.directions[key].m; if (n < 0 || m < 0 || n >= this.size || m >= this.size) continue; if (this.matrix[n][m] !== 0) continue; if (!(n in this.hashStep)) this.hashStep[n] = {}; if (!(m in this.hashStep[n])) this.hashStep[n][m] = {sum: 0, attack: 0, defence: 0, attackPattern: 0, defencePattern: 0}; if (attack) this.hashStep[n][m].attack += this.directions[key].w; else this.hashStep[n][m].defence += this.directions[key].w; } }; calculateHashMovePattern = function() { var s; var k = 0; var attack = 2 - this.who; var defence = 2 - !this.who; var res; for (n in this.hashStep) for (m in this.hashStep[n]) { this.hashStep[n][m].sum = this.hashStep[n][m].attack + this.hashStep[n][m].defence; this.hashStep[n][m].attackPattern = 0; this.hashStep[n][m].defencePattern = 0; var n = parseInt(n); var m = parseInt(m); for (var q = 1; q <= 2; q++) for (var j = 1; j <= 4; j++) { s = ''; for (var i = -4; i <= 4; i++) switch (j) { case 1: if (n + i >= 0 && n + i < this.size) s += (i === 0) ? '7' : this.matrix[n + i][m]; break; case 2: if (m + i >= 0 && m + i < this.size) s += (i === 0) ? '7' : this.matrix[n][m + i]; break; case 3: if (n + i >= 0 && n + i < this.size) if (m + i >= 0 && m + i < this.size) s += (i === 0) ? '7' : this.matrix[n + i][m + i]; break; case 4: if (n - i >= 0 && n - i < this.size) if (m + i >= 0 && m + i < this.size) s += (i === 0) ? '7' : this.matrix[n - i][m + i]; break; } res = (q === 1) ? this.patternWin[2 + attack].exec(s) : this.patternWin[2 + defence].exec(s); if (res === null) continue; if (res[0].length < 5) continue; if (q === 1) for (var i in this.pattern[attack]) { if (this.pattern[attack][i].test(s)) this.hashStep[n][m].attackPattern += this.pattern[0][i]; } else for (var i in this.pattern[defence]) if (this.pattern[defence][i].test(s)) this.hashStep[n][m].defencePattern += this.pattern[0][i]; } this.hashStep[n][m].sum += 1.1 * this.hashStep[n][m].attackPattern + this.hashStep[n][m].defencePattern; k++; } }; };33:[] 2e:{"id":"fbdd1eb3544dc4b8","slug":"morpion-5","title":"Morpion - 5*","thumbnail":"84a16cf11f7c79a4c46b71e1c0d6c4983cbec618e06edefacd7a98d5a9ea0574","access_level":"public","create_time":"$D2022-09-07T18:43:59.236Z","update_time":"$D2022-09-09T18:32:45.780Z","view_time":null,"first_public_time":"$D2022-09-09T15:13:59.980Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":355,"publish_version":355,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Morpion - 5*","cells":[{"id":0,"value":"# Morpion - 5*","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"viewof firstPlayer = Inputs.radio(new Map([[\"Player\", 1], [\"AI\", 2]]), {label: \"Who's playing first? (get the cross!)\", value: 2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"viewof reset = Inputs.button(\"New Game\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"renderer = html`