ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

Javascript 控制元素八个方向移动及碰撞检测

2022-07-15 17:04:25  阅读:156  来源: 互联网

标签:arr 碰撞检测 pelT Javascript innerHTML pel pelL 八个 classList


 

<!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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有