Witam. Postanowiłem w mojej nauce Canvas iść o krok dalej i napisać samemu grę Tic Tao Toe, wszystko ładnie szło aż do momentu, w którym trzeba ją zakończyć. Nie wiem jak przerwać pętlę gry ponieważ całość napisałem tak, że jej "nie ma?" :/ Proszę o pomoc czy da się to naprawić a jeśli tak to w jaki sposób. Proszę uwzględnić fakt, że jestem zielony.
PS. Próbowałem kombinować z if-em opisanym w komentarzu // testttttttttttttttttttttttttttt ale mi nie wychodzi i nie wiem dlaczego :( Z góry dzięki za każdą okazaną pomoc
window.addEventListener('load', init, false) var canvasBg = document.getElementById('canvasBg'); var ctxBg = canvasBg.getContext('2d'); var canvasObj = document.getElementById('canvasObj'); var ctxObj = canvasObj.getContext('2d'); var canvasText= document.getElementById('canvasText'); var ctxText = canvasText.getContext('2d'); var background = new Image(); background.src = "background.png"; var mouseX = 0; var mouseY = 0; var p1 = new button(100, 200, 100, 200); var p2 = new button(200, 300, 100, 200); var p3 = new button(300, 400, 100, 200); var p4 = new button(100, 200, 200, 300); var p5 = new button(200, 300, 200, 300); var p6 = new button(300, 400, 200, 300); var p7 = new button(100, 200, 300, 400); var p8 = new button(200, 300, 300, 400); var p9 = new button(300, 400, 300, 400); var newGame = new button(500, 700, 300, 400); var p1c, p2c, p3c, p4c, p5c, p6c, p7c, p8c, p9c; var who; function init() { playGame(); document.addEventListener('click', mouseClicked, false); } function playGame() { clear(); drawBg(); whoNow(); } function drawBg() { ctxBg.drawImage(background, 0, 0); } function drawX(oP, yP) { this.xPosition = oP; this.yPosition = yP; var size = 80; ctxObj.beginPath(); ctxObj.moveTo(xPosition, yPosition); ctxObj.lineTo(xPosition+size, yPosition+size); ctxObj.moveTo(xPosition+size, yPosition); ctxObj.lineTo(xPosition, yPosition+size); ctxObj.stroke(); } function drawO(xC, yC) { this.xCenter = xC; this.yCenter = yC; var radius = 40; ctxObj.beginPath(); ctxObj.arc(xCenter, yCenter, radius, 0,2*Math.PI); ctxObj.stroke(); } function clear() { ctxObj.clearRect(0, 0, 800, 600); p1c = p2c = p3c = p4c = p5c = p6c = p7c = p8c = p9c = null; who = 'o'; } function whoNow() { // poprawić ctxText.clearRect(0, 0, 800, 600); ctxText.font = "italic bold 30px Arial"; ctxObj.fillStyle = "#222222"; ctxText.fillText ("Ruch gracza: ", 505, 140); ctxText.fillText (" ' "+who+" ' ", 560, 180); } function win(w) { // zrobic this. winner = w; if ((p1c == p2c && p2c == p3c && p1c != null) || (p4c == p5c && p5c == p6c && p4c != null) || (p7c == p8c && p8c == p9c && p7c != null) || (p1c == p4c && p4c == p7c && p1c != null) || (p2c == p5c && p5c == p8c && p2c != null) || (p3c == p6c && p6c == p9c && p3c != null) || (p1c == p5c && p5c == p9c && p1c != null) || (p3c == p5c && p5c == p7c && p3c != null)) { ctxText.font = "italic bold 30px Arial"; ctxObj.fillStyle = "#222222"; // poprawić if (this.winner == 'o') { ctxText.fillText (" Wygrał gracz: x" , 400, 500); // poprawić } else { ctxText.fillText (" Wygrał gracz: o" , 400, 500); // poprawić } this.winner = koniec; // testtttttttttttttttttttttttttttttttttttttttttttt } } var test = new win(); // testtttttttttttttttttttttttttttttttttttttttttttt function logic(a) { this.area = a; if (test.winner == null) { // testtttttttttttttttttttttttttttttttttttttttttttt switch(area) { case 1: if (p1c == null) { if (who == 'o') { drawO(150, 150); p1c = 'o'; who = 'x'; } else { drawX(110, 110); p1c = 'x'; who = 'o'; } } break; case 2: if (p2c == null) { if (who == 'o') { drawO(250, 150); p2c = 'o'; who = 'x'; } else { drawX(210, 110); p2c = 'x'; who = 'o'; } } break; case 3: if (p3c == null) { if (who == 'o') { drawO(350, 150); p3c = 'o'; who = 'x'; } else { drawX(310, 110); p3c = 'x'; who = 'o'; } } break; case 4: if (p4c == null) { if (who == 'o') { drawO(150, 250); p4c = 'o'; who = 'x'; } else { drawX(110, 210); p4c = 'x'; who = 'o'; } } break; case 5: if (p5c == null) { if (who == 'o') { drawO(250, 250); p5c = 'o'; who = 'x'; } else { drawX(210, 210); p5c = 'x'; who = 'o'; } } break; case 6: if (p6c == null) { if (who == 'o') { drawO(350, 250); p6c = 'o'; who = 'x'; } else { drawX(310, 210); p6c = 'x'; who = 'o'; } } break; case 7: if (p7c == null) { if (who == 'o') { drawO(150, 350); p7c = 'o'; who = 'x'; } else { drawX(110, 310); p7c = 'x'; who = 'o'; } } break; case 8: if (p8c == null) { if (who == 'o') { drawO(250, 350); p8c = 'o'; who = 'x'; } else { drawX(210, 310); p8c = 'x'; who = 'o'; } } break; case 9: if (p9c == null) { if (who == 'o') { drawO(350, 350); p9c = 'o'; who = 'x'; } else { drawX(310, 310); p9c = 'x'; who = 'o'; } } break; } } // testtttttttttttttttttttttttttttttttttttttttttttt whoNow(); win(who); } function button(xL, xR, yT, yB) { this.xLeft = xL; this.xRight = xR; this.yTop = yT; this.yBottom = yB; } button.prototype.checkClicked = function() { if (this.xLeft <= mouseX && mouseX <= this.xRight && this.yTop <= mouseY && mouseY <= this.yBottom) return true; }; function mouseClicked(e) { mouseX = e.clientX - canvasBg.offsetLeft; mouseY = e.clientY - canvasBg.offsetTop; if (p1.checkClicked()) logic(1); if (p2.checkClicked()) logic(2); if (p3.checkClicked()) logic(3); if (p4.checkClicked()) logic(4); if (p5.checkClicked()) logic(5); if (p6.checkClicked()) logic(6); if (p7.checkClicked()) logic(7); if (p8.checkClicked()) logic(8); if (p9.checkClicked()) logic(9); if (newGame.checkClicked()) playGame(); }