Как сделать чтобы был максимум один кусок круга?

Question

[roma333l]

const keys = {};
let Cdswith = 250

window.addEventListener('keydown', event => {
  keys[event.key] = true;
});

window.addEventListener('keyup', (event) => {
    keys[event.key] = false;
});

const RightUP = document.querySelector("#RightUP");
const Down = document.querySelector("#Down");
const Up = document.querySelector("#Up");
const Right = document.querySelector("#Right");
const Left = document.querySelector("#Left");
const LeftUp = document.querySelector("#LeftUp");
const RightDown = document.querySelector("#RightDown");
const LeftDown = document.querySelector("#LeftDown");
   let masivkeys = [RightUP, Down, Up, Right, Left, LeftUp, RightDown, LeftDown]
let kUp = masivkeys[2]
let KDown = masivkeys[1]
let kUpRight = masivkeys[0]
let kUpLeft = masivkeys[5]
let kLeftDown = masivkeys[7]
let kRightDown = masivkeys[6]
let kLeft = masivkeys[4]
let kRight = masivkeys[3]
   setInterval(() =>{
    if (keys['i'] ) {
    console.log('potato'); //верх
    kUp.classList.toggle('hide')
    console.log(masivkeys)

//Up
  }
   if (keys['k'] ) {
    console.log('corow');//низ
    KDown.classList.toggle('hide')
//Down
  }
    if (keys['l'] ) {
    console.log('onion');//право 
    kRight.classList.toggle('hide')
  //Right
  }
    if (keys['j'] ) {
    console.log('wine');//ліво
    kLeft.classList.toggle('hide')
  //Left
  }
   if(keys['i'] && keys['j']) {
    console.log('potato_wine');//верх ліво
    kUpLeft.classList.toggle('hide')
    kUp.classList.toggle('hide')
    kLeft.classList.toggle('hide')
  //LeftUp
  }
  if(keys['i'] && keys['l']) {
    console.log('potato_onion');//верх право
    kUpRight.classList.toggle('hide')
    kUp.classList.toggle('hide')
    kRight.classList.toggle('hide')
  //RightUP
  } 
  if (keys['k'] && keys['l']) {
    console.log('corrow_onion');//низ право
    kRightDown.classList.toggle('hide')
    KDown.classList.toggle('hide')
    kRight.classList.toggle('hide')
    //RightDown
  }
  if (keys['k'] && keys['j']) {
    kLeftDown.classList.toggle('hide')
    console.log('corrow_wine');//низ ліво
    KDown.classList.toggle('hide')
    kLeft.classList.toggle('hide')
  //LeftDown
  }}, Cdswith);

#base {
   top: 469px;
    margin-left: 600px;
 } 
 #base,#protective {
    position: relative;
 }
 #protective{
   margin-left: 649px;
    top: 386px;
 }
 #Down, #Left ,#LeftDown, #LeftUp , #Right , #RightDown , #RightUP ,#Up{
 position: relative;
}
#Down {
margin-left: 599px;
top: 151px;
}
#Left {
margin-left: 599px;
top: 15px;
}
#LeftDown {
margin-left: 599px;
top: -522px;
}
#LeftUp {
margin-left: 599px;
top: -656px;
}
#Right {
margin-left: 599px;
top: -118px;
}
#RightDown {
margin-left: 599px;
top: -254px;
}
#RightUP {
margin-left: 599px;
top: -388px;
 }
#Up {
top: 286px;
margin-left: 599px;

 }
.hide {
   opacity: 0;
}

Comments

[Алексей Дубровин]

Что это значит?

Answer 1

[roma333l]

у меня получился такой код немного кривой

.OneReal {
   opacity: 0;
}

let swithTrue = true
const keys = {};
let Cdswith = 200

window.addEventListener('keydown', event => {
  keys[event.key] = true;
});

window.addEventListener('keyup', (event) => {
    keys[event.key] = false;
});

const RightUP = document.querySelector("#RightUP");
const Down = document.querySelector("#Down");
const Up = document.querySelector("#Up");
const Right = document.querySelector("#Right");
const Left = document.querySelector("#Left");
const LeftUp = document.querySelector("#LeftUp");
const RightDown = document.querySelector("#RightDown");
const LeftDown = document.querySelector("#LeftDown");

// let funcHide = () =>{
//   kRight.classList.toggle('OneReal')
//   kUpLeft.classList.toggle('OneReal')
//   kUpRight.classList.toggle('OneReal')
//   kLeft.classList.toggle('OneReal')
//   kLeftDown.classList.toggle('OneReal')
//   kDown.classList.toggle('OneReal')
//   kRightDown.classList.toggle('OneReal')
//   kUp.classList.toggle('OneReal')
// }
let lastMemory, memory;
let NumberReset = 1;
let funkOnetriger = (NumberReset, memory, lastMemory) => {
while (NumberReset  >= 1){
  NumberReset = NumberReset - 1
  masivkeys.push(memory)
  if  (memory == lastMemory){
    // console.log('Done')
  masivkeys[0].classList.toggle('OneReal')
  lastMemory = memory
  return lastMemory
}
// console.log('a')  
}}
   let masivkeys = [Up, Down, RightUP, Right, Left, LeftUp, RightDown, LeftDown]
let kUp = masivkeys[0]
let kDown = masivkeys[1]
let kUpRight = masivkeys[2]
let kUpLeft = masivkeys[5]
let kLeftDown = masivkeys[7]
let kRightDown = masivkeys[6]
let kLeft = masivkeys[4]
let kRight = masivkeys[3]
let masiv_masiv = [kUp, kDown, kUpRight, kUpLeft, kLeftDown, kRightDown, kLeft, kRight,]
let numMas = masivkeys.length
// funcHide()
   setInterval(() =>{
    if (keys['i'] ) {
      funkOnetriger(2, Up, lastMemory)
    }
      //Up
   if (keys['k'] ) {
    funkOnetriger(2, Down, lastMemory)
    //Down
  }
    if (keys['l'] ) {
    funkOnetriger(2, Right, lastMemory)
      //Right
  }
    if (keys['j'] ) {
      funkOnetriger(2, Left, lastMemory)
  //Left
  }
   if(keys['i'] && keys['j']) {
    funkOnetriger(2, LeftUp, lastMemory)
  //LeftUp
  }
  if(keys['i'] && keys['l']) {
    funkOnetriger(2, RightUP, lastMemory)
    //RightUP
  } 
  if (keys['k'] && keys['l']) {
        funkOnetriger(2, RightDown, lastMemory)
    //RightDown
  }
  if (keys['k'] && keys['j']) {
    funkOnetriger(2, LeftDown, lastMemory)   
  //LeftDown
  }if (masivkeys.length >= 2){
  // console.log(masivkeys)
  masivkeys[0].classList.toggle('OneReal')
masivkeys.shift()
}
}, Cdswith);

Answer 2

[szQocks]

<div class="wrapper">
  <div class="piechart"></div>
</div>

.wrapper{
  border: 2px solid green;
  display: inline-flex;
}
.piechart{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: conic-gradient(#fff 0 25deg, red 0 65deg, #fff 0 270deg);
}
.piechart:after{
    content: '';
    width: 85%;
    height: 85%;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}