danasf · February 18, 2014 19:01
diff --git a/tictactoe.html b/tictactoe.html
 <!DOCTYPE HTML>
 <html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Tic Tac Toe</title>
    <link href='http://fonts.googleapis.com/css?family=Orbitron:400,700' rel='stylesheet' type='text/css'>
    <style>
      body { background:#000; color:#00ff00; margin: 0px; padding: 0px; font-family: "Orbitron","Helvetica","Arial","Sans-serif";}
      h1 {  font-weight: 700; font-size: 3em; }
      button { font-family: "Orbitron","Helvetica","Arial","Sans-serif"; background:#000; color:#00FF00; border:1px solid #00FF00; padding:7px;}
      #container { width:900px; margin:10px auto; text-align: center;}
      .segment { margin-right:30px; }
      .highlight { font-weight:700; }
    </style>
  </head>
  <body id="main">
    <div id="container">
    <h1>Tic-Tac-Toe</h1>
    <h3 id="message"></h3>
    <p><span class="segment">Player <span id="player" class="highlight">1</span></span> <span class="segment">Moves: <span id="moves" class="highlight">0</span></span> <span class="segment"><button id="reset">RESET</button></span></p>
    <canvas id="myBoard" width="600" height="600"></canvas>
    <p>CC 4.0 BY-SA Dana Sniezko, 2014.</p>
    </div>
    <script>

    /** 
    * Game Logic
    **/
    function Game() {
      this.moves=0;
      this.player=0;
      this.winner;
      this.clicked = new Array(8);
    }


    Game.prototype.setMove = function (pos) {
      this.clicked[pos]=this.player;
      this.player = (this.player == 0 ? 1 : 0);
      this.moves++;
    }

    /* Determine winner! This could probably be more efficient! */
    Game.prototype.isWin = function () {
      
      for (var i = 0; i <3; i++) {
      // if horizontal is either 0 or 3
      var sumH=this.clicked[0+i*3] + this.clicked[1+i*3] + this.clicked[2+i*3];
      if(sumH==3) { this.winner=2; }
      else if(sumH==0) { this.winner=1; }

      // if vertical is eitehr 0 or 3
      var sumV=this.clicked[0+i] + this.clicked[3+i] + this.clicked[6+i];
      if(sumV==3) { this.winner=2; }
      else if(sumV==0) { this.winner=1; }
      };

      // diagnoal 
      var sumD1=this.clicked[0] + this.clicked[4] + this.clicked[8];
      var sumD2=this.clicked[2] + this.clicked[4] + this.clicked[6];
   
      if(sumD1==3 || sumD2==3) { this.winner=2; }
      if(sumD1==0 || sumD2==0) { this.winner=1; }

      return this.winner;
    }


    Game.prototype.reset = function () {
      this.moves=0;
      this.player=0;
      delete this.winner;
      this.clicked = new Array(8);
    }

    /** 
    * Drawing logic for Board
    **/

    function Board(context,stroke,player0,player1,side) {
      context.strokeStyle = stroke;
      this.player0 = player0;
      this.player1 = player1;
      this.side = side;
      this.drawBoard();
    }

    Board.prototype.drawBoard = function() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < 3; i++) {
          for (var j = 0; j < 3; j++) {
            context.strokeRect(i*this.side,j*this.side,this.side,this.side); 
           }
       }
      context.stroke();
    }

    Board.prototype.redrawSq = function (x,y,curPlayer) {
         context.fillStyle = (curPlayer == 0 ? this.player0 : this.player1);
         context.fillRect(x*side,y*this.side,this.side,this.side); 
    }

    // define
    canvas = document.getElementById('myBoard');
    context = this.canvas.getContext('2d');
    moveCounter = document.getElementById("moves");
    currPlayer = document.getElementById("player");

    var x,y;
    var side = 200;
    var game = new Game();
    // new board, context, stroke, player1,player2, side length
    var board = new Board(context,"#00FF00","#FF0000","#00FF00",side);   
    //board.drawBoard();
    // on click get x and y
    canvas.addEventListener("click",function(evt) {
       x = evt.pageX-canvas.offsetLeft;
       y = evt.pageY-canvas.offsetTop;
      // get square position, use Floor to round down
      //console.log(Math.floor(x/side)+","+Math.floor(y/side),Math.floor(x/side)+Math.floor(y/side)*3,game.clicked[pos]);
      var pos = Math.floor(x/side)+Math.floor(y/side)*3;
      
      if(game.clicked[pos] == undefined) {
         if(game.winner != undefined) { alert("Player"+game.winner+" has already won. You can't make another move."); }
         else {
         //console.log("That square is free");
         game.clicked[pos]=game.player;
         board.redrawSq(Math.floor(x/side),Math.floor(y/side),game.player);
         game.setMove();

         currPlayer.innerHTML= (game.player == 0 ? "1" : "2" );
         moveCounter.innerHTML=game.moves;
         if(game.isWin() != undefined) { document.getElementById("message").innerHTML = "WE HAVE A WINNER, PLAYER"+game.winner+"!"; }
         }
       } 
       else {
        alert("That square is already taken. You can't do that!");
       }
    });     
    
    document.getElementById('reset').addEventListener('click',function(){
      game.reset();
      board.drawBoard();
      currPlayer.innerHTML= (game.player == 0 ? 1 : 2 );
      moveCounter.innerHTML=0;
      document.getElementById("message").innerHTML ="";
    },false);
    </script>
  </body>
 </html>
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="utf-8">
	<title>Tic Tac Toe</title>
	<link href='http://fonts.googleapis.com/css?family=Orbitron:400,700' rel='stylesheet' type='text/css'>
	<style>
	body { background:#000; color:#00ff00; margin: 0px; padding: 0px; font-family: "Orbitron","Helvetica","Arial","Sans-serif";}
	h1 { font-weight: 700; font-size: 3em; }
	button { font-family: "Orbitron","Helvetica","Arial","Sans-serif"; background:#000; color:#00FF00; border:1px solid #00FF00; padding:7px;}
	#container { width:900px; margin:10px auto; text-align: center;}
	.segment { margin-right:30px; }
	.highlight { font-weight:700; }
	</style>
	</head>
	<body id="main">
	<div id="container">
	<h1>Tic-Tac-Toe</h1>
	<h3 id="message"></h3>
	<p><span class="segment">Player <span id="player" class="highlight">1</span></span> <span class="segment">Moves: <span id="moves" class="highlight">0</span></span> <span class="segment"><button id="reset">RESET</button></span></p>
	<canvas id="myBoard" width="600" height="600"></canvas>
	<p>CC 4.0 BY-SA Dana Sniezko, 2014.</p>
	</div>
	<script>

	/**
	* Game Logic
	**/
	function Game() {
	this.moves=0;
	this.player=0;
	this.winner;
	this.clicked = new Array(8);
	}


	Game.prototype.setMove = function (pos) {
	this.clicked[pos]=this.player;
	this.player = (this.player == 0 ? 1 : 0);
	this.moves++;
	}

	/* Determine winner! This could probably be more efficient! */
	Game.prototype.isWin = function () {

	for (var i = 0; i <3; i++) {
	// if horizontal is either 0 or 3
	var sumH=this.clicked[0+i3] + this.clicked[1+i3] + this.clicked[2+i*3];
	if(sumH==3) { this.winner=2; }
	else if(sumH==0) { this.winner=1; }

	// if vertical is eitehr 0 or 3
	var sumV=this.clicked[0+i] + this.clicked[3+i] + this.clicked[6+i];
	if(sumV==3) { this.winner=2; }
	else if(sumV==0) { this.winner=1; }
	};

	// diagnoal
	var sumD1=this.clicked[0] + this.clicked[4] + this.clicked[8];
	var sumD2=this.clicked[2] + this.clicked[4] + this.clicked[6];

	if(sumD1==3 \|\| sumD2==3) { this.winner=2; }
	if(sumD1==0 \|\| sumD2==0) { this.winner=1; }

	return this.winner;
	}


	Game.prototype.reset = function () {
	this.moves=0;
	this.player=0;
	delete this.winner;
	this.clicked = new Array(8);
	}

	/**
	* Drawing logic for Board
	**/

	function Board(context,stroke,player0,player1,side) {
	context.strokeStyle = stroke;
	this.player0 = player0;
	this.player1 = player1;
	this.side = side;
	this.drawBoard();
	}

	Board.prototype.drawBoard = function() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	for (var i = 0; i < 3; i++) {
	for (var j = 0; j < 3; j++) {
	context.strokeRect(ithis.side,jthis.side,this.side,this.side);
	}
	}
	context.stroke();
	}

	Board.prototype.redrawSq = function (x,y,curPlayer) {
	context.fillStyle = (curPlayer == 0 ? this.player0 : this.player1);
	context.fillRect(xside,ythis.side,this.side,this.side);
	}

	// define
	canvas = document.getElementById('myBoard');
	context = this.canvas.getContext('2d');
	moveCounter = document.getElementById("moves");
	currPlayer = document.getElementById("player");

	var x,y;
	var side = 200;
	var game = new Game();
	// new board, context, stroke, player1,player2, side length
	var board = new Board(context,"#00FF00","#FF0000","#00FF00",side);
	//board.drawBoard();
	// on click get x and y
	canvas.addEventListener("click",function(evt) {
	x = evt.pageX-canvas.offsetLeft;
	y = evt.pageY-canvas.offsetTop;
	// get square position, use Floor to round down
	//console.log(Math.floor(x/side)+","+Math.floor(y/side),Math.floor(x/side)+Math.floor(y/side)*3,game.clicked[pos]);
	var pos = Math.floor(x/side)+Math.floor(y/side)*3;

	if(game.clicked[pos] == undefined) {
	if(game.winner != undefined) { alert("Player"+game.winner+" has already won. You can't make another move."); }
	else {
	//console.log("That square is free");
	game.clicked[pos]=game.player;
	board.redrawSq(Math.floor(x/side),Math.floor(y/side),game.player);
	game.setMove();

	currPlayer.innerHTML= (game.player == 0 ? "1" : "2" );
	moveCounter.innerHTML=game.moves;
	if(game.isWin() != undefined) { document.getElementById("message").innerHTML = "WE HAVE A WINNER, PLAYER"+game.winner+"!"; }
	}
	}
	else {
	alert("That square is already taken. You can't do that!");
	}
	});

	document.getElementById('reset').addEventListener('click',function(){
	game.reset();
	board.drawBoard();
	currPlayer.innerHTML= (game.player == 0 ? 1 : 2 );
	moveCounter.innerHTML=0;
	document.getElementById("message").innerHTML ="";
	},false);
	</script>
	</body>
	</html>
No results found