Tic Tac Toe ( Error )

 Main.dart

import 'package:flutter/material.dart';
import 'HomePage.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tic Tac Toe',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.purple),
      home: HomePage(),
    );
  }
}


HomePage.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // Step 1: Set up images

  AssetImage cross = AssetImage('images/cross.png');
  AssetImage circle = AssetImage('images/circle.png');
  AssetImage edit = AssetImage('images/edit.png');

  bool isCross = true;
  String msg = "";
  List<String> gameState = [];

  // Step 2: Initialize the state of box with empty

  @override
  void initState() {
    super.initState();

    setState(() {
      this.gameState = [
        'empty',
        'empty',
        'empty',
        'empty',
        'empty',
        'empty',
        'empty',
        'empty',
        'empty',
      ];

      this.msg = "";
    });
  }

  // Step 3: Playgame Method

  playGame(int index) {
    if (this.gameState[index] == 'empty') {
      setState(() {
        if (this.isCross)
          this.gameState[index] = 'cross';
        else
          this.gameState[index] = 'circle';

        this.isCross = !this.isCross;
        this.checkWin();
      });
    }
  }

  // Step 4: Reset the Game

  resetGame() {
    setState(() {
      this.gameState = [
        'empty',
        'empty',
        'empty',
        'empty',
        'empty',
        'empty',
        'empty',
        'empty',
        'empty',
      ];

      this.msg = "";
    });
  }

  // Step 5: Get image method
  getImage(String value) {
    switch (value) {
      case ('edit'):
        return edit;
        break;

      case ('circle'):
        return circle;
        break;

      case ('cross'):
        return cross;
        break;
    }
  }

  // Step 6: Check winner

  checkWin() {
    if ((gameState[0] != 'empty') && (gameState[0] == gameState[1]) && (gameState[1] == gameState[2])) {
      setState(() {
        this.msg = 'Player ${this.gameState[0]} Wins';
      });
    } else if ((gameState[3] != 'empty') && (gameState[3] == gameState[4]) && (gameState[4] == gameState[5])) {
      setState(() {
        this.msg = 'Player ${this.gameState[3]} Wins';
      });
    } else if ((gameState[6] != 'empty') && (gameState[6] == gameState[7]) && (gameState[7] == gameState[8])) {
      setState(() {
        this.msg = 'Player ${this.gameState[6]} Wins';
      });
    } else if ((gameState[0] != 'empty') && (gameState[0] == gameState[3]) && (gameState[3] == gameState[6])) {
      setState(() {
        this.msg = 'Player ${this.gameState[0]} Wins';
      });
    } else if ((gameState[1] != 'empty') && (gameState[1] == gameState[4]) && (gameState[4] == gameState[7])) {
      setState(() {
        this.msg = 'Player ${this.gameState[1]} Wins';
      });
    } else if ((gameState[2] != 'empty') && (gameState[2] == gameState[5]) && (gameState[5] == gameState[8])) {
      setState(() {
        this.msg = 'Player ${this.gameState[2]} Wins';
      });
    } else if ((gameState[0] != 'empty') && (gameState[0] == gameState[4]) && (gameState[4] == gameState[8])) {
      setState(() {
        this.msg = 'Player ${this.gameState[0]} Wins';
      });
    } else if ((gameState[2] != 'empty') && (gameState[2] == gameState[4]) && (gameState[4] == gameState[6])) {
      setState(() {
        this.msg = 'Player ${this.gameState[2]} Wins';
      });
    } else if (!gameState.contains('empty')) {
      setState(() {
        this.msg = 'Game Draw';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tic Tac Toe'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
              child: GridView.builder(
            padding: EdgeInsets.all(20.0),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 1.0, crossAxisSpacing: 10.0, mainAxisSpacing: 10.0),
            itemCount: this.gameState.length,
            itemBuilder: (context, i) => SizedBox(
              width: 100.0,
              height: 100.0,
              child: MaterialButton(
                onPressed: () {
                  this.playGame(i);
                },
                child: Image(
                  image: this.getImage(
                    this.gameState[i],
                  ),
                ),
              ),
            ),
          )),
          Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              this.msg,
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          MaterialButton(
            color: Colors.purple,
            minWidth: 300.0,
            height: 50.0,
            child: Text(
              'Reset Game',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
              ),
            ),
            onPressed: () {
              this.resetGame();
            },
          ),
          Container(
            padding: EdgeInsets.all(20.0),
            child: Text(
              'Made by Dipanshu',
              style: TextStyle(fontSize: 18),
            ),
          ),
        ],
      ),
    );
  }
}


OUTPUT





Comments

Post a Comment