HTML+CSS+JS练习设计12

编程小菜鸡.

于 2024-05-30 20:54:29 发布

阅读量190

点赞数 2

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_63384414/article/details/139333214

版权

个人联系，在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>

编程小菜鸡.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS练习设计12

每个浏览器或者设备的视口窗口的尺寸都不太一样，有时候会出现样式布局跑偏，通过rem布局就可以解决这类问题，养成rem布局是一种好的习惯，vw和vh也可以，不太擅长使用这两个单位进行布局。棋子是通过获取当前点击的x(事件对象.clientX)和y(事件对象.clientY)轴的值通过计算后进行显示，初始点是视口窗口左上角。背景和棋盘图片都是网上找的，是根据棋盘图片每一格计算的，棋盘图片每一格可能出现微小偏差，不过不影响棋子正确出现。练习rem布局，没有去找五子棋玩法对应的算法结构，只编写了基本的样式。
复制链接

扫一扫