From a32075cbd3a131a9f05507dcf359b72c02e2a291 Mon Sep 17 00:00:00 2001 From: joey Date: Wed, 17 Jun 2020 00:47:40 +0800 Subject: [PATCH 1/2] first version done --- index.html | 22 ++++++++++++++++++++++ script.js | 32 ++++++++++++++++++++++++++++++++ style.css | 15 +++++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..6c8d4df --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..9b957a5 --- /dev/null +++ b/script.js @@ -0,0 +1,32 @@ +console.log("hello world"); + +// var clearInput = function() { + +// } + +var player1 = "X"; +var player2 = "O"; +var playerTurn = 0; +var squareArray = document.querySelectorAll(".game-square") +console.log(squareArray) + +for ( i = 0 ; i < squareArray.length ; i ++ ) + squareArray[i].addEventListener('click', function(event){ + squareSelected(event); + }); + +var squareSelected = function (event) { + if ( playerTurn == 0 ) { + event.target.innerText = player1; + playerTurn = 1; + console.log(playerTurn); + } + + else { + event.target.innerText = player2; + playerTurn = 0; + console.log(playerTurn); + } + } + +console.log(playerTurn); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0dab251 --- /dev/null +++ b/style.css @@ -0,0 +1,15 @@ +.game-square { + display: inline-block; + background-color: red; + width: 50px; + height: 33px; + border: 1px solid grey; + margin: 1px; + padding: 1px; +} + +#board { + display: grid; + text-align: center; + scale: 2; +} \ No newline at end of file From bbe38d62dcba850c0c80ac6ed7c541d8909e11b2 Mon Sep 17 00:00:00 2001 From: joey Date: Wed, 17 Jun 2020 17:37:06 +0800 Subject: [PATCH 2/2] css changes --- index.html | 12 ++++++------ style.css | 9 +++++---- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 6c8d4df..aa98890 100644 --- a/index.html +++ b/index.html @@ -7,14 +7,14 @@
-
- +
+
-
- +
+
-
- +
+
diff --git a/style.css b/style.css index 0dab251..88c4227 100644 --- a/style.css +++ b/style.css @@ -1,15 +1,16 @@ .game-square { display: inline-block; background-color: red; - width: 50px; - height: 33px; + width: 80px; + height: 50px; border: 1px solid grey; margin: 1px; padding: 1px; + vertical-align: top; + font-size: 43px; } #board { - display: grid; + /*display: grid;*/ text-align: center; - scale: 2; } \ No newline at end of file