master

分支 (1)

管理

管理

master

javascript_chess
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.board {
				width: 400px;
				height: 450px;
				/* border: 1px solid red; */
				position: relative;
				top: 200px;
				left: 700px;
				box-sizing: border-box;
			}

			.camp {
				width: 100%;
				height: 200px;
				/* border: 1px solid black; */
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
			}

			.river {
				width: 100%;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 25px;
			}

			.grid {
				width: 50px;
				height: 50px;
				border: 1px solid black;
				box-sizing: border-box;

			}

			.chess {
				width: 30px;
				height: 30px;
				/* transform: scale(3); */
				border-radius: 50%;
				position: absolute;
				z-index: 100;
				cursor: pointer;
				text-align: center;
				line-height: 30px;
				color: white;
				font-size: 12px;
				transition: all 0.5s ease-in-out;

			}

			.selectChess {
				width: 200px;
				height: 40px;
			}

			.gameInfo {
				width: 500px;
				margin: 0 auto;
			}

			.line {
				position: absolute;
				z-index: 5;
				width: 150px;
				height: 1px;
				background-color: black;
			}

			.redline1 {
				transform: rotate(45deg);
				top: 0;
				left: 125px;
				top: 50px;
			}

			.redline2 {
				transform: rotate(135deg);
				top: 0;
				left: 125px;
				top: 50px;
			}

			.blueline1 {
				transform: rotate(45deg);
				top: 0;
				left: 125px;
				top: 400px;
			}

			.blueline2 {
				transform: rotate(135deg);
				top: 0;
				left: 125px;
				top: 400px;
			}
		</style>
	</head>
	<body>
		<div class="gameInfo">
			当前选择的棋子是:
			<p class="selectChess" id="selectChess">

			</p>
			<button id="cancelSelect">撤销当前阵营所选棋</button>
			<button id="backChess">悔棋</button>
		</div>


		<div class="board" id="board">
			<div class="line  redline1"></div>
			<div class="line  redline2"></div>

			<div class="line  blueline1"></div>
			<div class="line  blueline2"></div>


			<div class="camp red">

			</div>
			<div class="river">
				牛马河
			</div>
			<div class="camp blue">

			</div>
		</div>


		<script src="js/initGrid.js"></script>
		<script src="js/moveDot.js"></script>
		<script src="./js/chess.js"></script>
		<script src="js/rulesTypes.js"></script>
		<script src="js/pieces.js"></script>
		<script>
			var selectChessDom = document.getElementById('selectChess') //当前选择的展示棋子信息
			var cancelSelectBtn = document.getElementById("cancelSelect")
			var backChessBtn = document.getElementById('backChess')


			//保存上一步的操作用来进行悔棋
			window.lastChessInfo = {
				lastChess: {
					chess: null,
					lastLocation: {
						x: '',
						y: ''
					}
				},
				lastEndDot: null
			}

			backChessBtn.addEventListener('click', () => { //监听悔棋按钮
				lastChessInfo.lastChess.chess.info.el.style.top = lastChessInfo.lastChess.lastLocation.y + 'px'
				lastChessInfo.lastChess.chess.info.el.style.left = lastChessInfo.lastChess.lastLocation.x + 'px'
				lastChessInfo.lastChess.chess.info.location.x= lastChessInfo.lastChess.lastLocation.x
				lastChessInfo.lastChess.chess.info.location.y=lastChessInfo.lastChess.lastLocation.y

				if (lastChessInfo.lastEndDot.info.type == 'chess') {
					var {
						id,
						camp,
						name,
						chessType,
						location
					} = lastChessInfo.lastEndDot.info
					var newChess = initChess(lastChessInfo.lastEndDot.info)


					var chessInfo = {
						id,
						camp,
						name,
						chessType,
						location,
						instance:null
					}
					chessInfo.instance=newChess
					// console.log(newChess)
					chessInfo.instance.info.el.addEventListener('click', () => {

						if (gameInfo.currentChess) {
							if (chessInfo.instance.info.camp == gameInfo.currentChess.info.camp) {
							 gameInfo.setCurrentChess(chessInfo.instance)
							} else {

								gameInfo.setEndDot(chessInfo.instance)
							}
						} else {
							gameInfo.setCurrentChess(chessInfo.instance)
						}
					})

					chessList.push(chessInfo)
					board.appendChild(newChess.info.el)
				}
			})


			cancelSelectBtn.addEventListener('click', () => {
				gameInfo.clearCurrentInfo()
			})

			//初始化比赛信息
			var gameInfo = {
				currentChess: null, //当前选择的象棋,
				endDot: null,
				setCurrentChess(chess) {
					if (this.currentChess) {
						this.currentChess.info.el.style.boxShadow = ``
					}
					this.currentChess = chess
					selectChessDom.innerHTML = this.currentChess.info.camp + '阵营的' + this.currentChess.info.name
					this.currentChess.info.el.style.boxShadow = `${this.currentChess.info.camp} 0px 0px 10px 5px`
				},
				setEndDot(endDot) {
					this.endDot = endDot
					this.moveChess()
				},
				moveChess() {
					if (this.currentChess.move(this.endDot)) {
						this.clearCurrentInfo()
					}

				},
				clearCurrentInfo() {

					this.currentChess.info.el.style.boxShadow = ``
					this.currentChess = null,
						this.endDot = null
					selectChessDom.innerHTML = ''

				}
			}

			//拿到棋盘
			var board = document.getElementById('board')

			var camps = document.getElementsByClassName('camp')

			//初始化生成棋盘（格子）
			Array.from(camps).forEach((el) => {
				for (let i = 0; i < 32; i++) {
					initGrid(el)
				}
			})


			//初始化生成移动点
			var dots = initMoveDots(board)
			dots.forEach(dot => {
				dot.info.el.addEventListener('click', () => {
					if (gameInfo.currentChess) {
						gameInfo.setEndDot(dot)
					}
				})
			})

			//初始化生成棋子
			chessList.forEach((item) => {
				item.instance = initChess(item)
				board.appendChild(item.instance.info.el)
				item.instance.info.el.addEventListener('click', () => {

					if (gameInfo.currentChess) {
						if (item.instance.info.camp == gameInfo.currentChess.info.camp) {
						 gameInfo.setCurrentChess(item.instance)
						} else {
							gameInfo.setEndDot(item.instance)
						}
					} else {
						gameInfo.setCurrentChess(item.instance)
					}
				})
			})
		</script>
	</body>
</html>