How to Build a Chess Board with JavaScript

I was inspired to build a chess app. While the logistics will take me a while to implement, I was able to generate the rank and file game board. To render the board, I needed to consider the parameters involved in the rank and file system.

• Number of squares: 84.
• Square colors: White, black.
• Color organization: alternating*.

I put an asterisk next to alternating, because it’s not as simple as alternating every time.

For instance, the firsts row starts with a white square and ends with a black one. The next row starts with a black square and ends with a white one. If you were to render the squares with pure alternation, you’d end up with identical rows populating the board.

So, how do we properly render the squares on the board? We can do it one of two ways.

Option 1: By Rows

One way would be to alternate the direction in which the rendering takes place. First row, render left to right. Next row, render right to left, etc.

This direction of render can be determined by the CSS property flex-direction. If the index of the row is odd, don’t apply the flex-direction. If it is, apply flex-direction: row-reverse;.

We can determine which is an odd/even row by using the modulo operator. If i % 2 === 0 then it’s an even row. Otherwise, it’s odd. See below.

var board = document.getElementById('boardInner');
const renderBoard1 = (useLabels) =>{
  for (var i = 0; i < 8; ++i){
    var row = document.createElement('DIV')
    row.className = 'row'
    row.style.flexDirection = i % 2 === 0 ? '' : 'row-reverse'; 
    for (var j = 0; j < 8; ++j){
      var square = document.createElement('DIV')
      square.className = 'square'
      square.style.backgroundColor = j % 2 === 0 ? 'white' : 'black'
      row.appendChild(square)
    }
    board.appendChild(row)
  }   
 }

While this does use a nested loop (which translates to On²) and is an example of an exponential regression , since you’re looping through a dataset of 8 items, and for each of those items, you’re performing another loop of 8 iterations, this can be seen as 8 iterations by 8 iterations.

This translates to 64 total iterations; the same amount of iterations for our next option.

Option 2: By Squares

By initializing a variable (we’ll call it change), we can determine when to change the initial color, and then starting from that color continue the alternating color assignment.

So, for the first row, change = false and the initial color is white. As we move down the squares, we alternate between black and white until we reach the last square.

This is where we change the value of change to true, before continuing the pattern. Repeat the procedure until you’ve rendered all 64 squares. See below.

var board = document.getElementById('boardInner');
const renderBoard2 = (useLabels) =>{
  var change = false //initialized variable
  var backgroundColor = 'white'
  for (var i = 0; i < 64; ++i){
    var el = document.createElement('DIV')
    el.className = 'square'
    change = i % 8 === 0 || i === 0
    backgroundColor = change ? backgroundColor : backgroundColor === 'white' ? 'black' : 'white'
    el.style.backgroundColor = backgroundColor
    board.appendChild(el)
    change = false
  }
}

By initializing a variable, we can determine when to change the start color. The start color determines the next color and so on. We can determine when it’s time to change the initial color by checking if i % 8 === 0 || i === 0.

This conditional checks if the value of index divided by 8 is 0, meaning it is a multiple of 8 and indicates the end of a row. The i === 0 check is for the first index.

At the end of the function, we change change back to false so as to not re-initialize the start color accidentally and throw off the pattern.

Both of these options consist of the same number of lines of code and perform the same amount of iterations.

One could argue that the second option declares more variables than the first one, but in this case, it doesn’t amount to much of a difference (if any) in performance. Both options render the below result.

I added a little animation for fun

There you have it! A quick file and rank game board generator.

Thank you for reading!

#javascript #game development #programming

What is GEEK

Buddha Community

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

• For single line comment in JavaScript we have to use // (double slashes)
• For multiple line comments we have to use / * – – * /

<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company

JavaScript — Build your object a builder!

Design Patterns

Before we will go over the builder design pattern, let’s briefly go over design patterns in general.

What is a Design Pattern?

A design pattern is a general and reusable solution for common problems you may encounter when designing your software. Each design pattern solves a different problem and can be customized to your use case with much ease.

Why do we need them?

One of the main reasons we need design patterns is to make our software very changeable, so it will be maintainable and will support future changes.

All software programs have to change and modify or they will cease to exist. The amount of time we spend on maintaining a software program is bigger than the amount of time it takes us to develop the program.

#javascript #javascript-tips #design-patterns #javascript-design-pattern #javascript-development