个人联系,在csdn记录
练习rem布局,没有去找五子棋玩法对应的算法结构,只编写了基本的样式
每个浏览器或者设备的视口窗口的尺寸都不太一样,有时候会出现样式布局跑偏,通过rem布局就可以解决这类问题,养成rem布局是一种好的习惯,vw和vh也可以,不太擅长使用这两个单位进行布局
获取当前视口窗口:
window.innerWidth
window.innerHeight
棋子是通过获取当前点击的x(事件对象.clientX)和y(事件对象.clientY)轴的值通过计算后进行显示,初始点是视口窗口左上角
背景和棋盘图片都是网上找的,是根据棋盘图片每一格计算的,棋盘图片每一格可能出现微小偏差,不过不影响棋子正确出现
效果视频:
五子棋
代码内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
html{
font-size: 100px;
}
.box{
width: 15.36rem;
height: 7.08rem;
background-image: url('./背景.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.item{
position: relative;
width: 6rem;
height: 6rem;
margin: auto;
background-image: url('./棋盘.jpg');
background-repeat: no-repeat;
background-size: cover;
top: 0.5rem;
}
</style>
<body>
<!-- 背景 -->
<div class="box">
<!-- 棋盘 -->
<div class="item">
<!-- <div class="pieces"></div> -->
</div>
</div>
<script>
// 我的电脑窗口尺寸为,width:1536,height:708,采用浏览器是qq浏览器
// console.log(window.innerWidth)
// console.log(window.innerHeight)
// console.log(document.documentElement.clientWidth/1536 * 100)
document.documentElement.style.font = document.documentElement.clientWidth/1536 * 100
// 倍数
var num_x = document.documentElement.clientWidth/1536
var num_y = document.documentElement.clientWidth/708
//黑子为1,白子为2,默认黑子
var pieces_color = 1
item = document.querySelector('.item')
item.addEventListener('click', (event)=> {
//得到棋盘的大小,左上角起点x=488,y=72,棋盘的边长为560,一个空位的边长为31,棋盘边框横向=20,竖向=24
let x = event.clientX
let y = event.clientY
console.log(x)
console.log(y)
console.log('------------')
// 添加棋子
let pieces = document.createElement('div')
// pieces.classList.add('pieces')
pieces.style.width = '0.2rem'
pieces.style.height = '0.2rem'
pieces.style.borderRadius = '50%'
pieces.style.position = 'absolute'
//计算出点击的位置并设置值
let number_x = Math.floor((x - 488) / 31)
let number_y = Math.floor((y - 72) / 31)
let pieces_top = ((number_y * 31) + 24 + 5) / 100
let pieces_left = ((number_x * 31) + 20 + 5) / 100
pieces.style.top = pieces_top + 'rem'
pieces.style.left = pieces_left + 'rem'
//给棋子添加颜色
if(pieces_color === 1) {
pieces.style.backgroundColor = 'black'
pieces_color = 2
} else{
pieces.style.backgroundColor = 'white'
pieces_color = 1
}
//追加子元素
item.appendChild(pieces)
})
</script>
</body>
</html>