Quellcodes „Tic Tac Toe mit AngularJS“

Download als zip-Archiv (316KB)

index.html

<!DOCTYPE html>
<html ng-app="memoryGame">
	<head>
		<title>Tic Tac Toe mit AngularJS</title>
        <meta charset="utf-8">
        <meta name="keywords" content="Tic Tac Toe">
        <meta name="author" content="Jan Wieners | www.lehre.jan-wieners.de/">
        <meta name="description" content="Ein in JavaScript und AngularJS implementiertes Tic Tac Toe Spiel">

        <link type="text/css" rel="stylesheet" media="screen" href="css/style.css" />
	</head>
	
	<body ng-controller="gameCtrl">

        <div id="gameBoard">

            <div id="messages">
                {{ message }}
            </div>

            <table>
                <tr ng-repeat="row in grid track by $index">

                    <td ng-repeat="field in row track by $index"
                        ng-click="placeSymbol($parent.$index, $index)"> {{ field}} </td>

                </tr>
            </table>

        </div>

        <script type="text/javascript" src="js/libs/angular.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
	</body>

</html>

style.css

body {

    font-family: helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

#gameBoard {

    width: 450px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

#gameBoard table tr td {

    width: 150px;
    height: 150px;
    background-color: #ccc;
    margin: 1px;
    cursor: pointer;
    text-align: center;
    font-size: 45px;
}

#gameBoard table tr td:hover {

    background-color: #eee;
}

app.js

// Daten
var game = {

    rows: 3,
    columns: 3,
    players: [{

        name: 'Jan',
        symbol: 'X'
    }, {

        name: 'Chuck',
        symbol: 'O'
    }],
    gameOver: false
};

var memoryGame = angular.module('memoryGame', []);

memoryGame.controller('gameCtrl', ['$scope', function($scope) {

    $scope.grid = [];
    $scope.message = '';
    $scope.currentPlayerID = 0;

    $scope.placeSymbol = function(fieldX, fieldY) {

        if (!game.gameOver) {

            if ($scope.grid[fieldX][fieldY] === '') {

                $scope.grid[fieldX][fieldY] = game.players[$scope.currentPlayerID].symbol;

                if ($scope.playerWon()) {

                } else {
                    $scope.changePlayer();
                }
            }
        }
    };

    $scope.playerWon = function() {

        var g =  $scope.grid;

        if (g[0][0] !== '' && g[0][0] === g[0][1] && g[0][1] === g[0][2]) {
            $scope.message = 'You win!';
            game.gameOver = true;
            return true;
        }

        // ToDo: Add other win situations / checks

        return false;
    };

    $scope.changePlayer = function() {

        if ($scope.currentPlayerID === game.players.length - 1) {

            $scope.currentPlayerID = 0;
        } else {

            $scope.currentPlayerID++;
        }
    };

    $scope.makeGrid = function() {

        var row, col;

        for (row = 0; row < game.rows; row++) {

            $scope.grid[row] = [];

            for (col = 0; col < game.columns; col++) {

                $scope.grid[row][col] = '';
            }
        }

    };

    $scope.makeGrid();
}]);