Scribd
Upload
18 views3 pages

Game Angular Teste

This document contains code for a tic-tac-toe game implemented with Angular. The code defines components and logic for displaying the game board, tracking the current player's turn, and determining when a player has won.

Uploaded by

alewebmx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views3 pages

Game Angular Teste

This document contains code for a tic-tac-toe game implemented with Angular. The code defines components and logic for displaying the game board, tracking the current player's turn, and determining when a player has won.

Uploaded by

alewebmx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

// @ts-ignore

import { Component, OnInit } from '@angular/core';


import { count } from 'rxjs';

@Component({
selector: 'app-root',
template: `
<div id="statusArea" className="status">
Next player: <span>{{ nextPlayer }}</span>
</div>
<div id="winnerArea" className="winner">
Winner: <span [attr.class]="winner ? 'winner' : ''">{{ winner }}</span>
</div>
<button (click)="resetGame()" class="button">Reset</button>
<section style="margin-top:10px">
<div class="row" *ngFor="let row of [1, 2, 3]">
<button
*ngFor="let col of [1, 2, 3]"
(click)="play(col, row)"
class="square"
style="width:40px;height:40px;position:relative"
>
<span
class="span"
style="position:absolute; left: 0;
right: 0;

margin:auto"
>{{ arrayPlayers[row - 1][col - 1] }}</span
>
</button>
</div>
</section>
`,
styles: [
`
.winner {
color: white;
font-size: 15px;
font: bold;
background: green;
padding: 5px;
border-radius: 5px;
}
#winnerArea {
margin-top: 5px;
}

.span {
font-size: 15px;
}
`,
],
})
export class AppComponent implements OnInit {
// code goes here
public arrayPlayers: String[][] = [[], [], []];
public newPlayer = <any[]>[];
public winner: string = '';
nextPlayer = <any[]>['X'];

ngOnInit() {}

play(col: any, row: any) {


this.nextPlayer = this.newPlayer.slice(-1);

if (this.nextPlayer[0] === 'X') {


if (this.arrayPlayers[row - 1][col - 1]) {
this.nextPlayer = ['O'];
return;
}
this.arrayPlayers[row - 1][col - 1] = 'O';

this.nextPlayer = ['X'];
} else {
if (this.arrayPlayers[row - 1][col - 1]) {
this.nextPlayer = ['X'];
return;
}
this.arrayPlayers[row - 1][col - 1] = 'X';

this.nextPlayer = ['O'];
}

for (let i = 0; i < this.arrayPlayers.length; i++) {


if (
this.arrayPlayers[i][0] === 'X' &&
this.arrayPlayers[i][1] === 'X' &&
this.arrayPlayers[i][2] === 'X'
) {
this.winner = 'X Winner';
}
if (
this.arrayPlayers[i][0] === 'O' &&
this.arrayPlayers[i][1] === 'O' &&
this.arrayPlayers[i][2] === 'O'
) {
this.winner = 'O Winner';
}

for (let j = 0; j <= this.arrayPlayers[i].length; j++) {


if (
this.arrayPlayers[0][j] === 'X' &&
this.arrayPlayers[1][j] === 'X' &&
this.arrayPlayers[2][j] === 'X'
) {
this.winner = 'X Winner';
}
if (
this.arrayPlayers[0][j] === 'O' &&
this.arrayPlayers[1][j] === 'O' &&
this.arrayPlayers[2][j] === 'O'
) {
this.winner = 'O Winner';
}

if (
(this.arrayPlayers[0][j] === 'X' &&
this.arrayPlayers[1][j + 1] === 'X' &&
this.arrayPlayers[2][j + 2] === 'X') ||
(this.arrayPlayers[0][j + 2] === 'X' &&
this.arrayPlayers[1][j + 1] === 'X' &&
this.arrayPlayers[2][j] === 'X')
) {
this.winner = 'X Winner';
}

if (
(this.arrayPlayers[0][j] === 'O' &&
this.arrayPlayers[1][j + 1] === 'O' &&
this.arrayPlayers[2][j + 2] === 'O') ||
(this.arrayPlayers[0][j + 2] === 'O' &&
this.arrayPlayers[1][j + 1] === 'O' &&
this.arrayPlayers[2][j] === 'O')
) {
this.winner = 'O Winner';
}
}
}

this.newPlayer.push(this.arrayPlayers[row - 1][col - 1]);


}

resetGame() {
this.newPlayer = [];
this.arrayPlayers = [[], [], []];
this.winner = '';
}
}

You might also like