HomeworkLib
Question

Trying to understand java script.. The code provided prints out a game board of cells that are 10 x 10.   I currnetly have it printed out so that it will print out pink squares. how can i create a click even on any of the pink squares that when they are clicked it will turn the square black...   then any square that is black when it is clicked it will change back to the color pink

html/js code and css code is provided..

html/js code code ------------------------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="StyleSheet1.css" />
</head>
<body>
    <div class="container body-content">
        <h1>Multiplayer Conway's Game of Life</h1>
        <br />
        <div class="gameboard-container">
          
            <table id="gameboard" cellspacing="1"></table>

         
        </div>
      


      

    </div>


    <script>

        var gameArrayLength = 10;
     

    
        window.onload = function () {
            drawBoard();
        

        }


        //draw the initial game board
        function drawBoard() {
            var boardTable = document.getElementById("gameboard");
            for (var i = 0; i < gameArrayLength; i++) {
                var currentRow = boardTable.insertRow(i);

                for (var j = 0; j < gameArrayLength; j++) {
                    var cellNumber = i * gameArrayLength + j;
                    var cell = currentRow.insertCell(j);
                    cell.className = "cell cell-off";
                    cell.id = cellNumber;
                }
            }
        }

     
    </script>

</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------

css code

body {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px
}

.gameboard-controls {
    background-color: #bbe0ff;
    border-bottom: 1px solid black;
}


.gameboard-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    border: 5px solid black;
    border-radius: 7px;
}

#gameboard {
    width: 100%;
    cursor: pointer;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
}

.cell {
    width: 14px;
    height: 12px;
    margin: 1px;
    border: 1px solid #e0e0e0;
}

.cell-on {
    background-color: black;
}

.cell-off {
    background-color: pink;
}

.cell-queued {
    background-color: black;
}

ⓘ localhost52136/HtmiPagel.html Multiplayer Conways Game of Life

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Dear student ,

As per the above requirement, kindly find the below solution.

Here in the code I had added some lines of code that will handle the color for the cell. I am not made any changes in css so not submitting that file again only submitting the html file code.

Below is the code for the page "gameBoard.html"

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="StyleSheet1.css" />

</head>

<body>

<div class="container body-content">

<h1>Multiplayer Conway's Game of Life</h1>

<br />

<div class="gameboard-container">

<table id="gameboard" cellspacing="1"></table>

</div>

</div>

<script>

var gameArrayLength = 10;

window.onload = function () {

drawBoard();

}

//draw the initial game board

function drawBoard() {

var boardTable = document.getElementById("gameboard");

for (var i = 0; i < gameArrayLength; i++) {

var currentRow = boardTable.insertRow(i);

for (var j = 0; j < gameArrayLength; j++) {

var cellNumber = i * gameArrayLength + j;

var cell = currentRow.insertCell(j);

cell.className = "cell cell-off";

cell.id = cellNumber;

}

}

}

//attaching event listener to table

document.getElementById("gameboard").addEventListener("click", tableClick);

//defination for tableClick() function , this function finds which cell is clicked

function tableClick() {

var tbl = document.getElementById("gameboard");

if (tbl != null) {

for (var i = 0; i < tbl.rows.length; i++) {

for (var j = 0; j < tbl.rows[i].cells.length; j++)

tbl.rows[i].cells[j].onclick = function () { changeColor(this); };

}

}

}

//this is function is called to change the color of cell

function changeColor(cel)

{

if (cel.className == "cell-off")

{

cel.className = "cell-on"

}

else

{

cel.className = "cell-off"

}

}

</script>

</body>

</html>

Output : When you open this page in the browser , you will get the screen as shown below

G gameßoard.html С ⓘfile:///C/Users/nagesh.am/Desktop/lavaScriptError/gameBoard.html A elebrate IT Train 囵Why Angular 4? wheWhen you click or double click on any cell that is pink square you will get the screen as shown below

G gameßoard.html С 0) file:///C/Users/nagesh.am/Desktop/lavaScriptError/gameBoard.html Accelebrate ITT ain why Angular ? wh 7

than again click on the same cell and check the output.

NOTE : KINDLY PROVIDE THE FEEDBACK ABOUT THE SOLUTION

0 0
Add a comment
Know the answer?
Add Answer to:
Trying to understand java script.. The code provided prints out a game board of cells that...
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

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • The code below modifies the CSS style on button click. Give the output of the code...

    The code below modifies the CSS style on button click. Give the output of the code and modify the code such that background color of title should also be modified . <!DOCTYPE html> <html lang="en"> <head> <title>JavaScript and HTML</title> <meta charset="utf-8"/> <style> h1 { color:blue; background-color:lightGreen; border:12px solid green; padding: 5px; border-radius: 15px; text-align: center; } p, h1 { } } </style> <script> function changeTitleCSSStyle() { var title = document.querySelector("#mainTitle"); title.style.color = 'black'; title.style.border = "5px dashed red"; } </script>...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

  • Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /*...

    Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /* Date:           Today's Date --> September 22, 2019 /* Description:   Lab Number --> Lab04 /*doctype css*/ @import url(fonts/chuckfive.css); @import url(fonts/merriweather.css); body    { background-color: rgb(199,201,191);        } div { border: 1px solid black;        padding: 100px 100px 100px 100px;        background-color: gray; } nav { text-align: center;    color: rgb( 7,20,138); } header, footer   { background-color: rgb(199,201,199);        color:...

  • HTML and css using notepad++ WHen you run the code, you will see a horizontal menue...

    HTML and css using notepad++ WHen you run the code, you will see a horizontal menue with several options. I want a small horizontal line between each option. I also want that done using div inside a div. Thank you <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px;...

  • HTML css When i refresh the page, the picture doesnt move at all for #i1 i...

    HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...

  • HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...

    HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids and have come across a snag. I need this: To look more like this.... It does not really need to be perfect as far as scaling, at this point I just want the yellow box in the corner with borders like the pic. Also the original pic has white borders that we are ignoring. HTML <!doctype html> <html lang="en"> <head> <!-- Required meta tags...

  • I have to make a pixel art maker using javascript. HTML and CSS were already provided....

    I have to make a pixel art maker using javascript. HTML and CSS were already provided. I only had to do the JavaScript part. Every time I run the HTML folder nothing happens when I choose the width, height, and color. This is my code: (ONLY JS IS SUPPOSED TO BE FIXED). JS: // Select color input // Select size input const colorPicker = document.getElementsById('colorPicker'); const rowNum = document.getElementsById('inputHeight'); const cellNum = document.getElementById('inputWidth'); const pixelCanvas = document.getElementById('pixelCanvas'); const form =...

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • finished the web page ********************************************************* .js // I've added a span with the id "count" which...

    finished the web page ********************************************************* .js // I've added a span with the id "count" which you can use to modify // the number of clicks on the page // you can do this by getting the value; incrementing it and then // modifying the value of the span function changeColor(){     const colors = ['red', 'green', 'blue', 'cyan', 'yellow', 'black', 'silver', 'tan'];     // Choose a random float from [0, 1) the multiply by length to get random index     // Math.floor()...

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