Quantcast
Channel: Forum Pasja Informatyki - Najnowsze pytania bez odpowiedzi
Viewing all articles
Browse latest Browse all 22017

JS Canvas - Gra TicTaoToe - przerwanie gry

$
0
0

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();
}

 


Viewing all articles
Browse latest Browse all 22017

Trending Articles