使用svelte实现一个五子棋，全代码

<div class="container">
   <div class="sumarry">
      <div class="left">
         当前:{#if view === 1}黑子{:else}白子{/if}
      </div>
      <div class="right">
         <button on:click={reback}>悔棋</button>
         <button on:click={start}>重开</button>
      </div>
   </div>
   <div class="box">
      {#each map as item, index}
         <div class="list">
            {#each item as item2, index2}
               <div class="item">
                  <div on:click={() => setPoint(index, index2)} class="item-content {color(item2)}"></div>
               </div>
            {/each}
         </div>
      {/each}
   </div>
</div>
<script>

   let map, view, record, gameOver;
   const start = () => {
      map = JSON.parse(JSON.stringify(Array(15).fill(Array(15).fill(0))));
      view = -1;
      record = [];
      gameOver = false;
   };
   start();
   const color = (item2) =>{
      return item2 === 1?'black':item2===-1?'white':''
   }
   const isWin = (index, index2, view) => {
      let start = index - 4;
      let end = index + 4;
      let startY = index2 - 4;
      let endY = index2 + 4;
      let count = 0;

      /*判断水平*/
      for (let i = 0; i < end - start + 1; i++) {
         if (map[index]?.[start + i] === view) {
            count++;
            calc(count);
         } else {
            count = 0;
         }
      }
      /*判断垂直*/
      count = 0;
      for (let i = 0; i < end - start + 1; i++) {
         if (map[start + i]?.[index2] === view) {
            count++;
            calc(count);
         } else {
            count = 0;
         }
      }
      /*判断45度*/
      count = 0;
      for (let i = 0; i < end - start + 1; i++) {
         if (map[start + i]?.[endY - i] === view) {
            count++;
            calc(count);
         } else {
            count = 0;
         }
      }
      /*判断135度*/
      count = 0;
      for (let i = 0; i < end - start + 1; i++) {
         if (map[start + i]?.[startY + i] === view) {
            count++;
            calc(count);
         } else {
            count = 0;
         }
      }
   };
   const calc = (count) => {
      if (count >= 5) {
         const type = view === 1 ? '黑色' : '白色';
         gameOver = true;
         alert(type + '赢了');
      }
   };
   const setPoint = (index, index2) => {
      if (gameOver) {
         return;
      }
      if (map[index][index2] !== 0) {
         return;
      } else {
         map[index][index2] = view;
         record.push([index, index2]);
         isWin(index, index2, view);
         view *= -1;
      }
   };
   const reback = () => {
      let point = record.pop();
      view=map[point[0]][point[1]]
      map[point[0]][point[1]] = 0;
   };
</script>
<style lang="scss">
   .container {
      .sumarry {
         height: 22px;
         line-height: 22px;
         font-size: 14px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 440px;
      }
      .box {
         display: flex;
         flex-direction: column;
         width: 420px;
         height: 420px;
         background: #e8cb9c;
         border: #776262 10px solid;
         .list {
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            &:nth-last-child(1) {
               .item {
                  border-left: none !important;
               }
            }
            &:nth-child(8) {
               .item:nth-child(8) {
                  .item-content {
                     &:after {
                        position: absolute;
                        content: '';
                        display: block;
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background: black;
                     }
                  }
               }
            }
            .item {
               width: 30px;
               height: 30px;
               line-height: 30px;
               box-sizing: border-box;
               text-align: center;
               font-size: 12px;
               cursor: pointer;
               user-select: none;
               border-left: 1px solid gray;
               border-top: 1px solid gray;
               transition: all linear 0.1s;
               -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
               &:nth-last-child(1) {
                  border-top: none;
               }

               .item-content {
                  width: 30px;
                  height: 30px;
                  position: relative;
                  left: -15px;
                  top: -15px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                  &:before {
                     content: '';
                     display: block;
                     width: 18px;
                     height: 18px;
                     border-radius: 50%;
                     position: absolute;
                     z-index: 999;
                  }
                  &.black:before {
                     background: #b9b9b9;
                     box-shadow: inset 0px 0px 14px 1px #000000;
                  }
                  &.white:before {
                     background: white;
                     box-shadow: inset 0px 0px 5px 1px #d3d3d3;
                  }
               }
            }
         }
      }
   }
</style>