手柄控制网页 (web开发电视端)

选择框

这使用的html标签，方便dom查询

<div select="true"></div>

当selec为true选中,使用css中的伪类来实现选择时的样式。

[select="true"]{
    position: relative;
}
[select="true"]::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    border: 2px solid #fff;
}

移动

使用 getBoundingClientRect() 获取node所在位置,通过x,y来获取方向，与当前选择节点对比位置

function move(direction){
    let nodes=document.querySelectorAll("[select=false],[select=true]")
    let list=[];
    for (let i = 0; i < nodes.length; i++) {
      const select = nodes[i].getAttribute("select") == "true" ? true : false;
      const position = nodes[i].getBoundingClientRect();
      list.push({"select":select,"position":position,"index":i});
    }

    const current=list.find(x=> x.select==true);
    let list2=[];

    if (direction == "UP") list2 = list.filter(x => current.position.y > x.position.y)
    if (direction == "DOWN") list2 = list.filter(x => current.position.y < x.position.y)
    if (direction == "LEFT") list2 = list.filter(x => current.position.x > x.position.x && current.position.y == x.position.y)
    if (direction == "RIGHT") list2 = list.filter(x => current.position.x < x.position.x && current.position.y == x.position.y)

    let distances = list2.map((x) => ({ v: getDistance([[current.position.x, current.position.y], [x.position.x, x.position.y]]), k: x.index })).sort((a, b) => a.v - b.v)
    let index = distances[0] ? distances[0].k : index;

    nodes[current.index].setAttribute("select", "false")
    nodes[index].setAttribute("select", "true");
 }

点击

 function click(){
     let nodes=document.querySelectorAll("[select=false],[select=true]")
     let list=[];
     for (let i = 0; i < nodes.length; i++) {
       const select = nodes[i].getAttribute("select") == "true" ? true : false;
       list.push({"select":select,"index":i});
     }
     const current=list.find(x=> x.select==true);
     nodes[current.index].click()
}

演示

使用键盘wsad来控制方向，j点击