Vue.js로 체스판을 만들었더니 7줄이야.

바둑판은 왜 흑백입니까

서로의 흑백판 때문에 고전하는 이야기다.
나는 먼저 이후에 체스를 두는 전제에서 판을 쳤다.

이번 결승점.

1. 외관상 바둑판으로 인식되는 물건 만들기
2. 앞으로 체스 제작의 전제 구조가 되어야 한다

기념 기념첩

실제로 체스를 만드는 것은 필수적이다
64칸에 좌표가 있습니다.
그러니까 이런 거.

[1-1, 1-2, 1-3, 1-4, 1-5, 1-6, 1-7, 1-8, 
 2-1, 2-2, 2-3, 2-4, 2-5, 2-6, 2-7, 2-8, 
 3-1, 3-2, 3-3, 3-4, 3-5, 3-6, 3-7, 3-8, 
 4-1, 4-2, 4-3, 4-4, 4-5, 4-6, 4-7, 4-8, 
 5-1, 5-2, 5-3, 5-4, 5-5, 5-6, 5-7, 5-8, 
 6-1, 6-2, 6-3, 6-4, 6-5, 6-6, 6-7, 6-8,
 7-1, 7-2, 7-3, 7-4, 7-5, 7-6, 7-7, 7-8,
 8-1, 8-2, 8-3, 8-4, 8-5, 8-6, 8-7, 8-8]

X축과 Y축의 수치가 합쳐진 느낌.
이 배열만 하면 간단해.

    let board = [];
    for(let x = 1; x < 9; x++) {
      for(let y = 1; y < 9; y++) {
        board.push(x + "-" + y)
      }
    }

팔×8개의 순환을 진행하면 순식간에 완성된다
Vue.즉 js 렌더링을 사용하면 v-for='n in 8'을 두 번 하면 됩니다.
장기라면 여기서 끝내.
하지만 체스판에 도착하자마자 좀 귀찮아졌어요.
흑백 흑백 흑백 흑백
오다
이번에는
흑백 흑백 흑백 흑백
!
처음에도 말했잖아요.
즉, 첫 번째 줄과 두 번째 줄은 첫 번째 열의 색이 반전됩니다.
많이 생각했어요.
잠시 후 우리 쪽 문과 엔지니어도 알아차렸다.
홀수 행과 짝수 행으로 나누면 됩니다.
그러니까 그렇다는 거야.

  <div class="board">
    <div v-for="x in 8">
      <div v-for="y in 8">
        <div 
         v-bind:class="(x + y) % 2 == 0 ? 'square-black' : 'square-white'" 
         :id='`${x}-${y}`'
        >
        </div>
      </div>
    </div>
  </div>

와~ 다 됐어!
각자의 id도 1-1에서 8-8로 따돌렸다.
그리고 가장 중요한 것은 코드가 상당히 짧다!!

대강 설명하다

8번 순환하기 전에 동일
그리고 첫 번째 순환 x와 두 번째 순환 y 각각의 값에서 v-if를 사용하여 구분합니다.
x의 첫 번째와 y의 첫 번째라면 1과 1
합계가 2, 짝수이기 때문에 흑이 시작된다.
x의 두 번째와 y의 첫 번째라면 2와 1이다
합계가 3, 홀수이기 때문에 괜히 시작한다.

마지막

좌표도 좋아요.
체스 제작의 길도 열린 것 같습니다.
필자는 압도적으로 이런 반짝임이 부족하다
문과 엔지니어라서 시간이 많이 걸렸어요.
나는 규칙을 찾아 무엇을 유창하게 쓰는 것을 좋아한다.
언제가 될지 모르겠어요.
이어서 나는 체스의 동작 부분을 투고하고 싶다.
스타일을 포함하는 코드를 놓습니다.
Board.vue

<template>
  <div class="board">
    <div v-for="x in 8">
      <div v-for="y in 8">
        <div 
         v-bind:class="(x + y) % 2 == 0 ? 'square-black' : 'square-white'" 
         :id='`${x}-${y}`'
        >
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.board {
  width: 640px;
  height: 640px;
  border: 4px solid black;
}

.square-black {
  width: 80px;
  height: 80px;
  background-color: black;
  float: left;
}

.square-white {
  width: 80px;
  height: 80px;
  background-color: white;
  float: left;
}
</style>

추적:
원래는 v-if와 v-else로dom를 분리한다고 쓰여 있었지만, v-bind:class를 사용하면 DOM이 집중될 것 같아서 수정했습니다.
그래서
8줄에서 7줄로 바뀌었습니다/
원래, 비록 분리 개발이라고 하지만, 완전히 같은 id를 둘 다 차버리는 것도 위험하다
나는 class의 전환 처리가 정확하다고 생각한다.
원본 코드:

<template>
  <div class="board">
    <div v-for="x in 8">
      <div v-for="y in 8">
        <div class="square-black" :id='`${x}-${y}`' v-if="(x + y) % 2 == 0"></div>
        <div class="square-white" :id='`${x}-${y}`' v-else></div>
      </div>
    </div>
  </div>
</div>
</template>