征途黯然.
征途黯然.

【五子棋实战】第5章 开发五子棋前端页面

【五子棋实战】第5章 开发五子棋前端页面

  • 页面设计原则
  • 开发页面
    • ## 基础HTML骨架
    • ## 添加页面响应式功能
  • 编写JS
    • ## 获取画布对象与DOM对象
    • ## 定义棋子、棋盘对象
    • ## 定义绘画对象（重要！！）
    • ## 初始化绘制棋盘
    • ## 添加点击事件 能够下棋落子
  • 继续学习下一篇实战！

页面设计原则

  1、可配置性。比如棋盘的大小可配置，棋盘边长可配置，黑白空期的值可配置；
  2、响应式。各种屏幕大小下棋盘的布局要合理；
  3、面向对象。棋子、棋盘的定义都用类来封装，代码要写的好看。

开发页面

## 基础HTML骨架

  代码如下：

DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>三黄工作室 - 五子棋title>
	<style>
		*
		{
			margin: 0;
		}
		body{
			background-image: url("img/bg.png");
		}
		#canvas_line {
			box-shadow: 0 0 5px 0px rgba(0, 0, 0, .8);
			border-radius: 5px;
			box-sizing: border-box;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 1px solid black;
			background-color: #ffbd5b;
			z-index: 5;
		}
		#canvas_chess {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 10;
		}
		.loading-message {
			/* background-color: #f5f5f5; */
			padding: 5px;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			color:white;
		}
		.logo{
			background-color: #FCFCFD;
			padding: 5px;
			text-align: center;
			bottom: 0px;
			position: fixed;
			width: 100%;
		}
		.button-30 {
              align-items: center;
              appearance: none;
              background-color: #FCFCFD;
              border-radius: 4px;
              border-width: 0;
              box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
              box-sizing: border-box;
              color: #36395A;
              cursor: pointer;
              display: inline-flex;
              font-family: "JetBrains Mono",monospace;
              height: 40px;
              justify-content: center;
              line-height: 1;
              list-style: none;
              overflow: hidden;
              padding-left: 16px;
              padding-right: 16px;
              position: relative;
              text-align: left;
              text-decoration: none;
              transition: box-shadow .15s,transform .15s;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
              white-space: nowrap;
              will-change: box-shadow,transform;
              font-size: 18px;
            }
  
            .button-30:focus {
              box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
            }
  
            .button-30:hover {
              box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
              transform: translateY(-2px);
            }
  
            .button-30:active {
              box-shadow: #D6D6E7 0 3px 7px inset;
              transform: translateY(2px);
            }
	style>
head>
<body> 
	<canvas id="canvas_line" width="600px" height="600px">canvas>
  	<canvas id="canvas_chess">canvas>
	
	<div class="loading-message"><span style="display: none;">正在计算中...span>div>
	<div class="loading-message"><button onclick="regreat()" class="button-30">悔棋button>div>

	<div class="logo"><img src="img/logo.png" style="height: 30px;"/>div>
body>
html>

  目前的页面样式如下：

## 添加页面响应式功能

  现在的手机版页面如下，可以发现手机版的棋盘太小、按钮太小、下方的logo太小。

【五子棋实战】第5章 开发五子棋前端页面_第1张图片
  于是我们添加响应式功能，在里面添加头，在