首页 > 编程语言> > Javascript 控制元素八个方向移动及碰撞检测
Javascript 控制元素八个方向移动及碰撞检测

2022-07-15 17:04:25 作者：互联网
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box"></div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .box {
        width: 500px;
        height: 300px;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin: 400px auto;
    }
    .box p {
        width: 20px;
        height: 20px;
        box-sizing: border-box;
        border: 1px solid rgb(243, 243, 243);
        font-size: 12px;
        background-color: #ffffff;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .tree{
        background-color: rgb(232, 247, 217) !important;
    }
</style>
<script type="text/javascript">
    var box = document.querySelector('.box');
    var arr = new Array();
    var keys = [];
    var row = 10;
    var col = 10;
    // 生成表格并填充数组
    box.style.width = row * 20 + 'px';
    box.style.height = col * 20 + 'px';
    for (let i = 0; i < row; i++) {
        for (let j = 0; j < col; j++) {
            box.innerHTML += `<p></p>`;
        }
    }
    var pList = document.querySelectorAll('p');
    for (let i = 0; i < pList.length; i++) {
        if (i % col == 0) {
            arr.push(new Array());
        }
        pList[i].count = 0;
        arr[parseInt(i / col)].push(pList[i]);
    }
    console.log(arr)


    var pelL = 1;
    var pelT = 1;
    arr[pelT][pelL].classList = 'pel';
    var pel = document.querySelector('.pel');
    pel.innerHTML = '标签：arr,碰撞检测,pelT,Javascript,innerHTML,pel,pelL,八个,classList	

来源： https://www.cnblogs.com/zgjg/p/16482017.html