Javascript 控制元素八个方向移动及碰撞检测
2022/7/16 1:22:50
本文主要是介绍Javascript 控制元素八个方向移动及碰撞检测,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!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 = '
这篇关于Javascript 控制元素八个方向移动及碰撞检测的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南