ZuoTi.Pro
Question

WEB230 - JavaScript 1 Assignment 6a Use Events and DOM manipulation to create a playable Tic Tac Toe game. Do the following u
[6, 7, 8). [0, 3, 6). [1, 4, 71, 12, 5, 8], te, 4, 8], [2, 4, 61 1: /* The argument to checkWin is the class of the player wh
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

✔ Recommended Answer
Answer #1

Working code implemented in HTML, CSS & JS and appropriate comments provided for better understanding:

Here I am attaching code for these files:

  • tictactoe.html
  • main.css
  • main.js

Source code for tictactoe.html:

<!doctype html>
<html>
<head>
   <title>Tic Tac Toe</title>
   <meta name="viewport" content="width=600"/>
   <link rel="stylesheet" href="main.css"/>
   <script defer src="main.js"></script>
</head>
<body>
   <h1>Tic Tac Toe</h1>
   <div id="players">
       <div id="X" class="">Player X</div>
       <div id="O" class="">Player O</div>
       <input type="button" class="button" value="New Game"/>
   </div>
   <table>
       <tbody>
           <tr>
               <td id="c0"></td>
               <td id="c1"></td>
               <td id="c2"></td>
           </tr>
           <tr>
               <td id="c3"></td>
               <td id="c4"></td>
               <td id="c5"></td>
           </tr>
           <tr>
               <td id="c6"></td>
               <td id="c7"></td>
               <td id="c8"></td>
           </tr>
       </tbody>
   </table>
</body>
</html>

Source code for main.css:

body {
text-align: center;
font-size: 16px;
font-family: 'Comic Sans MS', Helvetica, sans-serif;
}
table {
margin-left:auto;
margin-right:auto;
width: 551px;
-webkit-user-select: none;
border-collapse: collapse;
}
td {
height: 175px;
width: 175px;
text-align: center;
font-size: 120px;
}
td:nth-of-type(2) {
   border-left: 2px solid #cccccc;
   border-right: 2px solid #cccccc;
}
tr:nth-of-type(2) td {
   border-top: 2px solid #cccccc;
   border-bottom: 2px solid #cccccc;
}
#players {
margin-left:auto;
margin-right:auto;
padding: 20px 10px 10px 10px;
width: 511px;
text-align: left;
}
#players > div {
display: inline-block;
padding-right: 25px;
color: #cccccc;
-webkit-transition-duration: 200ms;
}
.button {
float: right;
}
.current-player {
color: black !important;
-webkit-transform: scale(1.5);
}
.X-marker {
color: rgb(40, 143, 66);
}
.X-marker:before {
content: "X";
}
.O-marker {
color: rgb(31, 0, 204);
}
.O-marker:before {
content: "O";
}

.X-marker.O-marker {
color: rgb(241, 79, 4);
}
.X-marker.O-marker:before {
content: "?";
}

Source code for main.js:

"use strict";

var playerX = document.querySelector("#X");
playerX.classList.add('current-player');
var playerO = document.querySelector("#O");
//playerO.classList.add('current-player');

function move(event){
var square = document.querySelector(".current-player").id;
var player = event.target;
console.log("Your move. " + square);
playerX.classList.toggle('current-player');
playerO.classList.toggle('current-player');
if (square == "X") {
player.classList.add("X-marker");
}
else {
player.classList.add("O-marker");
}
player.removeEventListener("click", move);
checkWin(square + "-marker");
}

var cell = document.querySelectorAll('td');
for (var i = 0; i<cell.length; i++){
cell[i].addEventListener("click", move);
}

var wins = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [2, 4, 6], [0, 4, 8], [2, 4, 6] ];
function checkWin(player1) {
console.log()
var grid = Array.from(cell, function(quad){
return quad.classList.contains(player1);
});
for (var win of wins) {
if (grid[win[0]] && grid[win[1]] && grid[win[2]]){
for (var sq of win) {
cell[sq].style.backgroundColor = "lightgreen";
}
for (var sq = 0; sq < 9; sq++){
cell[sq].removeEventListener("click", move);
}
alert(player1 + " Wins!");
return true;
}
}
return false;
}

function reset(){
for (var i = 0; i < cell.length; i++){
cell[i].removeAttribute("class");
cell[i].style.backgroundColor = "transparent";
for (var sq = 0; sq < 9; sq++){
cell[sq].addEventListener("click", move);
}
playerO.classList.toggle('current-player');
playerX.classList.toggle('current-player');
}
}
var reset2 =
document.querySelector(".button");
reset2.addEventListener("click", reset);

Sample Output Screenshots:

Tic Tac Toe Player X Player o New Game XX Х ОО

Hope it helps, if you like the answer give it a thumbs up. Thank you.

7 2
Add a comment
Know the answer?
Add Answer to:
WEB230 - JavaScript 1 Assignment 6a Use Events and DOM manipulation to create a playable Tic...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Similar Homework Help Questions

  • given below are the project description and their Html and css files i need javascript according...

    given below are the project description and their Html and css files i need javascript according to the project and other files! WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...

  • javascript

    In this project you will write the JavaScript code to create a calculator. Good thing is that everyone knows how the calculator works. It is a challenging project, give yourself lots of time to complete it.1. You are provided with an HTML, and CSS files.. Look at these files to understandhow to use them and modify them if needed based on your code. (Note: You can adddifferent selector (id, class) in HTML ONLY and cannot make any changes to CSS.)Create...

  • Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () =>...

    Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () => { console.log("You clicked?"); }); let button = document.querySelector("button"); button.addEventListener("click", () => { console.log("First Button clicked."); }); // How can we modify this so that it will occur when the 2nd button is clicked? // We need to use querySelectorAll which will produce a nodelist/array of all the buttons. Then we can reference which button we want to apply the click event using [] with...

  • In traditional Tic Tac Toe game, two players take turns to mark grids with noughts and...

    In traditional Tic Tac Toe game, two players take turns to mark grids with noughts and crosses on the 3 x 3 game board. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row in the game board wins the game. Super Tic Tac Toe game also has a 3 x 3 game board with super grid. Each super grid itself is a traditional Tic Tac Toe board. Winning a game of Tic...

  • EXTRA CREDIT 1: Tic Tac Toe (Please use c++ code) also please verify it works because...

    EXTRA CREDIT 1: Tic Tac Toe (Please use c++ code) also please verify it works because I've received wrong answers in the past. Thank You 99 17 30 12 EXTRA CREDIT 1: Tic Tac Toe (10 points) Write a console program that plays Tic Tac Toe with the user. The program displays a 3 by 3 grid, which is initially blank. When the player takes a turn, an X is added to the grid. When the computer takes a turn,...

  • Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO:...

    Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO: Change The Title</title>    </head>    <body>      <h1></h1>      <p>First paragraph.</p>      <p class="intro">Second <span>paragraph</span>.</p>      <button id="start">Start</button>      <main> </main>      <!--       Test 6: DOM Programming       You MAY consult the notes for week 7, but you MAY NOT discuss this test or       your code with any other students.  All work must be your own.       Instructions:              1. Put all solution code in a file named solution.js.  When you upload your          solution to...

  • In a game of Tic Tac Toe, two players take turns making an available cell in...

    In a game of Tic Tac Toe, two players take turns making an available cell in a 3 x 3 grid with their respective tokens (either X or O). When one player has placed three tokens in a horizontal, vertical, or diagonal row on the grid, the game is over and that player has won. A stalemate occurs when all the cells on the grid have been filled with tokens and neither player has achieved a win. Write a program...

  • In a game of Tic Tac Toe, two players take turns making an available cell in...

    In a game of Tic Tac Toe, two players take turns making an available cell in a 3 x 3 grid with their respective tokens (either X or O). When one player has placed three tokens in a horizontal, vertical, or diagonal row on the grid, the game is over and that player has won. A stalemate occurs when all the cells on the grid have been filled with tokens and neither player has achieved a win. Write a program...

  • Using C++ Create a Blackjack program with the following features: Single player game against the dealer....

    Using C++ Create a Blackjack program with the following features: Single player game against the dealer. Numbered cards count as the number they represent (example: 2 of any suit counts as 2) except the Aces which can count as either 1 or 11, at the discretion of the player holding the card. Face cards count as 10. Player starts with $500. Player places bet before being dealt a card in a new game. New game: Deal 2 cards to each...

  • (C++) Please create a tic tac toe game. Must write a Player class to store each...

    (C++) Please create a tic tac toe game. Must write a Player class to store each players’ information (name and score) and to update their information (increase their score if appropriate) and to retrieve their information (name and score).The players must be called by name during the game. The turns alternate starting with player 1 in the first move of round 1. Whoever plays last in a round will play second in the next round (assuming there is one).The rows...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
Active Questions
ADVERTISEMENT