БЛОГ НА HUSL


делаю игру Арканойд , как сделать чтоб мяч был на платформе пока не запустится игра?

Автор вопроса: user463876 
<!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">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
</head>
<body>
    <h1 class="title">Арканоид</h1>
    <div class="game">
      <div class="field"></div>
    
    <div class="account">
      <p class="text_level">Уровень:</p><div class="level">1</div>
      <p class="text_counter">Cчет:</p><div class="counter">0</div>
      <p class="text_life">Жизнь:</p><div class="life">3</div>
      <button class="btn">Начать игру</button>
    </div>
  </div>
    
    
    <script src="game.js"></script>
</body>
</html>



  body{
    background: black;
}
.field{
    position: absolute;
    left: 200px;
    width: 780px;
    height: 600px;
    border-radius: 5px;
    border: black ridge 2px;
    background-image: url(img/grounds.jpg);
    border: white ridge 2px;
    
}
.game{
  display: flex;
  justify-content: center;
    
}

.block{
    position: absolute;
    width: 105px;
    height: 25px;
    background: linear-gradient(rgb(255, 0, 0),  rgb(255, 255, 255));;
}
.block1{
    position: absolute;
    width: 105px;
    height: 25px;
    background: linear-gradient(rgb(94, 255, 0),  rgb(255, 255, 255)); 
}
.block2{
    position: absolute;
    width: 100px;
    height: 20px;
    background: linear-gradient(rgb(238, 255, 0),  rgb(255, 255, 255));
}


.user{
    position: absolute;
    width: 100px;
    height: 20px;
    background: linear-gradient(rgb(255, 255, 255),  rgb(3, 3, 3));
    border-radius: 3px;
}
.boll{
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(rgb(124, 123, 122),  rgb(251, 250, 250));
}
.title{
    color: rgb(251, 250, 250);
    text-align: center;
    font-size: 50px;
}
.counter{    
    font-size: 26px;
}
.life{   
    font-size: 26px;
}
.text_counter{    
    font-size: 26px;
}
.text_life{  
    font-size: 26px;
}
.text_level{
    font-size: 26px;
}
.level{
    font-size: 26px; 
}
.btn{
    position: absolute;
    bottom: 10px;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    background-color: rgb(97, 2, 206);
    color: cornsilk;
    font-size: 20px;
}
.account{
    position: absolute;
    right: 160px;
    background: linear-gradient(rgb(109, 107, 107),rgb(255, 255, 255),rgb(77, 76, 76));
    width: 200px;
    height: 580px;
    padding: 10px;
    border: white ridge 2px;
}

введите сюда код

const field = document.querySelector('.field')
let counterDisplay = document.querySelector('.counter')
let counter = 0
let lifeDisplay = document.querySelector('.life')
let life = 3
let levelDisplay = document.querySelector('.level')
let level = 1
let button = document.querySelector('.btn')
let blockWidth = 105
let blockHeight = 25
let bollDiameter = 20
let startPosition = [350, 30]
let bollStartPosition = [startPosition[0], 50]
let x = 2
let y = 2
let timer;
let block;
let block1;
let block2;
let allBlocks;
let allBlocks1 = document.querySelectorAll(".block1");
let allBlocks2;

class Block {
  constructor(xAxis , yAxis){
    this.bottomLeft = [xAxis, yAxis]
    this.bottomRight = [xAxis + blockWidth, yAxis]
    this.topLeft = [xAxis, yAxis + blockHeight]
    this.topRight = [xAxis + blockWidth, yAxis + blockHeight]
  }
}


let blocks = [
  new Block(10,570), 
  new Block(120,570), 
  new Block(230,570), 
  new Block(340,570), 
  new Block(450,570), 
  new Block(560,570), 
  new Block(670,570),
  new Block(10,540), 
  new Block(120,540), 
  new Block(230,540), 
  new Block(340,540), 
  new Block(450,540), 
  new Block(560,540), 
  new Block(670,540), 
]
let blocks1 = [
  new Block(10,510), 
  new Block(120,510), 
  new Block(230,510), 
  new Block(340,510), 
  new Block(450,510), 
  new Block(560,510), 
  new Block(670,510),
  new Block(10,480), 
  new Block(120,480), 
  new Block(230,480), 
  new Block(340,480), 
  new Block(450,480), 
  new Block(560,480), 
  new Block(670,480), 
]
let blocks2 = [
  new Block(12,572), 
  new Block(122,572), 
  new Block(232,572), 
  new Block(342,572), 
  new Block(452,572), 
  new Block(562,572), 
  new Block(672,572),
  new Block(12,542), 
  new Block(122,542), 
  new Block(232,542), 
  new Block(342,542), 
  new Block(452,542), 
  new Block(562,542), 
  new Block(672,542), 
]

function addBlock () {
  for(let i = 0; i < 14; i++){
  block = document.createElement("div")
  block.classList.add('block')
  block.style.left =  blocks[i].bottomLeft[0] + 'px'
  block.style.bottom = blocks[i].bottomLeft[1] + 'px'
  field.appendChild(block)

 }
 for(let i = 0; i < 14; i++){
  block1 = document.createElement("div")
  block1.classList.add('block1')
  block1.style.left =  blocks1[i].bottomLeft[0] + 'px'
  block1.style.bottom = blocks1[i].bottomLeft[1] + 'px'
  field.appendChild(block1) 
}
for(let i = 0; i < 14; i++){
  block2 = document.createElement("div")
  block2.classList.add('block2')
  block2.style.left =  blocks2[i].bottomLeft[0] + 'px'
  block2.style.bottom = blocks2[i].bottomLeft[1] + 'px'
  field.appendChild(block2) 
}
}

addBlock ()

let user = document.createElement('div');
user.classList.add('user');
user.style.left = startPosition[0] + 'px';
user.style.bottom = startPosition[1] + 'px';
field.appendChild(user);


function moveUser(e) {
    switch (e.key){
      case 'ArrowLeft':
        if(startPosition[0] > 0){
        startPosition[0] -= 20
        user.style.left = startPosition[0] + 'px'
        user.style.bottom = startPosition[1] + 'px'
        }
        break;
      case 'ArrowRight':
        if(startPosition[0] < 680 ){
          startPosition[0] += 20
          user.style.left = startPosition[0] + 'px'
          user.style.bottom = startPosition[1] + 'px'
        }  
        break;
    }
}

document.addEventListener('keydown', moveUser)

function startboll() {
  boll.style.left = bollStartPosition[0] + 'px'
boll.style.bottom = bollStartPosition[1] + 'px'
return bollStartPosition[0]
}

bollStartPosition[0] === startPosition[0]
let boll = document.createElement("div")
boll.classList.add('boll')
boll.style.left = bollStartPosition[0] + 'px'
boll.style.bottom = bollStartPosition[1] + 'px'
field.appendChild(boll)


function moveBoll() {
  bollStartPosition[0] += x;
  bollStartPosition[1] += y;
  startboll();
  collisions();
  
}

button.addEventListener('click', () => timer = setInterval(moveBoll, 10))



function collisions(){
  for( let i = 0; i < blocks.length; i++){
    if( (bollStartPosition[0] > blocks[i].bottomLeft[0] && bollStartPosition[0] < blocks[i].bottomRight[0] ) &&
     ((bollStartPosition[1] + bollDiameter) > blocks[i].bottomLeft[1] && bollStartPosition[1] < blocks[i].topLeft[1])
     ){
      allBlocks = document.querySelectorAll(".block")
      allBlocks[i].classList.remove('block')
      blocks.splice(i, 1)
       trajectoryBoll()
       counter++ + counter++
       counterDisplay.innerHTML = counter
     }
         
  } 
  for( let i = 0; i < blocks1.length; i++){
    if( (bollStartPosition[0] > blocks1[i].bottomLeft[0] && bollStartPosition[0] < blocks1[i].bottomRight[0] ) &&
     ((bollStartPosition[1] + bollDiameter) > blocks1[i].bottomLeft[1] && bollStartPosition[1] < blocks1[i].topLeft[1])
     ){
      allBlocks1 = document.querySelectorAll(".block1")
      allBlocks1[i].classList.remove('block1')
        blocks1.splice(i, 1)
       trajectoryBoll()
       counter++
       counterDisplay.innerHTML = counter    
    }      
  } 
  for( let i = 0; i < blocks2.length; i++){
    if( (bollStartPosition[0] > blocks2[i].bottomLeft[0] && bollStartPosition[0] < blocks2[i].bottomRight[0] ) &&
     ((bollStartPosition[1] + bollDiameter) > blocks2[i].bottomLeft[1] && bollStartPosition[1] < blocks2[i].topLeft[1])
     ){
      allBlocks2 = document.querySelectorAll(".block2")
      allBlocks2[i].classList.remove('block2')
        blocks2.splice(i, 1)
       trajectoryBoll()
       counter++
       counterDisplay.innerHTML = counter    
    }      
  } 
  
  if( bollStartPosition[0] >= 765 ||
     bollStartPosition[1] >= 580 || 
     bollStartPosition[0] <= 0){
    trajectoryBoll()
  }
  

   if(
    (bollStartPosition[0] > startPosition[0] && bollStartPosition[0] < startPosition[0] + 100) &&
    (bollStartPosition[1] > startPosition[1] && bollStartPosition[1] < startPosition[1] + 20)
   ){
    trajectoryBoll()
   }
   if(blocks.length === 0 && blocks1.length === 0){
    level++
    levelDisplay.innerHTML = level
    startPosition[0] = 350;
    startPosition[1] = 30;
    user.style.left = startPosition[0] + 'px';
    user.style.bottom = startPosition[1] + 'px';
    bollStartPosition[0] = 390;
    bollStartPosition[1] = 50;
    boll.style.left = bollStartPosition[0] + 'px';
    boll.style.bottom = bollStartPosition[1] + 'px';
    blocks = [
      new Block(10,570), 
      new Block(120,570), 
      new Block(230,570), 
      new Block(340,570), 
      new Block(450,570), 
      new Block(560,570), 
      new Block(670,570),
      new Block(10,540), 
      new Block(120,540), 
      new Block(230,540), 
      new Block(340,540), 
      new Block(450,540), 
      new Block(560,540), 
      new Block(670,540), 
    ]
    blocks1 = [
      new Block(10,510), 
      new Block(120,510), 
      new Block(230,510), 
      new Block(340,510), 
      new Block(450,510), 
      new Block(560,510), 
      new Block(670,510),
      new Block(10,480), 
      new Block(120,480), 
      new Block(230,480), 
      new Block(340,480), 
      new Block(450,480), 
      new Block(560,480), 
      new Block(670,480), 
    ]
    blocks2 = [
      new Block(12,572), 
      new Block(122,572), 
      new Block(232,572), 
      new Block(342,572), 
      new Block(452,572), 
      new Block(562,572), 
      new Block(672,572),
      new Block(12,542), 
      new Block(122,542), 
      new Block(232,542), 
      new Block(342,542), 
      new Block(452,542), 
      new Block(562,542), 
      new Block(672,542), 
    ]
    addBlock ()
    clearInterval(timer)
    
  }
  if(level >= 10){
    levelDisplay.innerHTML = "Победа"
  }
 
  
  if(bollStartPosition[1] <= 0){
    life--
    lifeDisplay.innerHTML = life
    startPosition[0] = 350;
    startPosition[1] = 30;
    user.style.left = startPosition[0] + 'px';
    user.style.bottom = startPosition[1] + 'px';
    bollStartPosition[0] = 390;
    bollStartPosition[1] = 50;
    boll.style.left = bollStartPosition[0] + 'px';
    boll.style.bottom = bollStartPosition[1] + 'px';
    trajectoryBoll()  
    clearInterval(timer)
 }

 if (life <= 0){
  lifeDisplay.innerHTML = 'Лошара'
  
 }
 
}


function trajectoryBoll() {
  if(x === 2 && y === 2){
    
    return y = -2
  }
  if (x === 2 && y === -2){
   
    return x = -2
  }
  if(x === -2 && y === -2){
    
    return y = 2
  }
  if( x === -2 && y === 2){
    
    return x = 2
  }

}

Источник

Ответы (1 шт):

Автор решения: Darth 

const field = document.querySelector('.field');
const account = document.querySelector('.account');
let counterDisplay = document.querySelector('.counter')
let counter = 0
let lifeDisplay = document.querySelector('.life')
let life = 3
let levelDisplay = document.querySelector('.level')
let level = 1
let button = document.querySelector('.btn')
let blockWidth = 105
let blockHeight = 25
let startPosition = [350, 30];
let x = 2
let y = 2
let timer;
let paused = true;

const Blocks = [];
class Block {
    constructor(xAxis , yAxis, type){
        this.bottomLeft = [xAxis, yAxis]
        this.bottomRight = [xAxis + blockWidth, yAxis]
        this.topLeft = [xAxis, yAxis + blockHeight]
        this.topRight = [xAxis + blockWidth, yAxis + blockHeight]
        this.el = document.createElement("div")
        this.el.classList.add(type)
        this.el.style.left = this.bottomLeft[0] + 'px'
        this.el.style.bottom = this.bottomLeft[1] + 'px'
        field.appendChild(this.el);
        Blocks.push(this);
    }
    destroy(){
        Blocks.splice(Blocks.indexOf(this), 1);
        this.el.classList.remove('block');
        field.removeChild(this.el);
    }
}

class MoveableEl {
    constructor({x, y}){
        this.startPos = {x,y};
    }
    set x(value) {
        this._x = value;
        this.el.style.left = this.x + 'px';
    }
    set y(value) {
        this._y = value;
        this.el.style.bottom = this.y + 'px'
    }
    get x(){return this._x;}
    get y(){return this._y;}
    reset(){
        this.x = this.startPos.x;
        this.y = this.startPos.y;
    }
}

class Boll extends MoveableEl {
    constructor({x, y}){
        super({x,y});
        this.diameter = 20;
        this.el = document.createElement("div");
        this.el.classList.add('boll');
        field.appendChild(this.el);
        this.reset();
    }
    move(){
        this.x += x;
        this.y += y;
        if(this.x >= 765 || this.y >= 580 || this.x <= 0) {
            this.collision();
        }
        if(this.x > user.x && this.x < user.x + 100 && this.y > user.y && this.y < user.y + 20) {
            this.collision();
        }
    }
    collision(){
        if(x === 2 && y === 2){
            y = -2
        } else if (x === 2 && y === -2){
            x = -2
        } else if (x === -2 && y === -2){
            y = 2
        } else if ( x === -2 && y === 2){ 
            x = 2
        }
    }
    isAbove(block){
        return (this.x > block.bottomLeft[0] && this.x < block.bottomRight[0] ) &&
        ((this.y + this.diameter) > block.bottomLeft[1] && this.y < block.topLeft[1])
    }
}

class User extends MoveableEl {
    constructor({x, y}){
        super({x,y});
        this.el = document.createElement('div');
        this.el.classList.add('user');
        field.appendChild(this.el);
        this.reset();
    }
}

function createBlocks() {
    [
        [10, 570, 'block'],
        [10, 540, 'block'],
        [12, 572, 'block2'],
        [12, 542, 'block2'],
        [10, 510, 'block1'],
        [10, 480, 'block1'],
    ].forEach(([x,y,type]) => {
        for(let i = 0; i < 7; i++){
            new Block(x + i*110, y, type);
        }
    });
}
createBlocks();


let user = new User({x: startPosition[0], y: startPosition[1]});

function moveUser(e) {
    switch (e.key){
      case 'ArrowLeft':case 'a':
        if(user.x > 0){
          user.x -= 20;
          if(paused) boll.x -= 20;
        }
        break;
      case 'ArrowRight':case 'd':
        if(user.x < 680 ){
          user.x += 20;
          if(paused) boll.x += 20;
        }  
        break;
        // default:console.log(e.key);
    }
}

document.addEventListener('keydown', moveUser)

let boll = new Boll({x: startPosition[0] + 40, y: startPosition[1] + 20});

function tick() {
    boll.move();
    const collided = Blocks.find(block => boll.isAbove(block));
    if(collided) {
        collided.destroy();
        boll.collision();
        counterDisplay.innerHTML = ++counter;
    }

    if(Blocks.length === 0){
        levelDisplay.innerHTML = ++level;
        user.reset();
        boll.reset();
        createBlocks();
        clearInterval(timer);
        paused = true;
        account.classList.remove('hidden');
    }
    if(level >= 10){
        levelDisplay.innerHTML = "Победа";
    }

    if(boll.y <= 0){
        lifeDisplay.innerHTML = --life;
        user.reset();
        boll.collision();
        boll.reset();
        clearInterval(timer);
        paused = true;
        account.classList.remove('hidden');
    }

    if (life <= 0){
        lifeDisplay.innerHTML = 'Лошара'
    }
}

button.addEventListener('click', () => {
  timer = setInterval(tick, 10);
  paused = false;
  account.classList.add('hidden');
});
body{
    background: black;
}
.field{
    position: absolute;
    width: 780px;
    height: 600px;
    border-radius: 5px;
    border: black ridge 2px;
    background-image: url(img/grounds.jpg);
    border: white ridge 2px;
    
}
.game{
  display: flex;
  justify-content: center;
}

.block{
    position: absolute;
    width: 105px;
    height: 25px;
    background: linear-gradient(rgb(255, 0, 0),  rgb(255, 255, 255));;
}
.block1{
    position: absolute;
    width: 105px;
    height: 25px;
    background: linear-gradient(rgb(94, 255, 0),  rgb(255, 255, 255)); 
}
.block2{
    position: absolute;
    width: 100px;
    height: 20px;
    background: linear-gradient(rgb(238, 255, 0),  rgb(255, 255, 255));
}


.user{
    position: absolute;
    width: 100px;
    height: 20px;
    background: linear-gradient(rgb(255, 255, 255),  rgb(3, 3, 3));
    border-radius: 3px;
}
.boll{
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(rgb(124, 123, 122),  rgb(251, 250, 250));
}
.title{
    color: rgb(251, 250, 250);
    text-align: center;
    font-size: 50px;
}
.counter{    
    font-size: 26px;
}
.life{   
    font-size: 26px;
}
.text_counter{    
    font-size: 26px;
}
.text_life{  
    font-size: 26px;
}
.text_level{
    font-size: 26px;
}
.level{
    font-size: 26px; 
}
.btn{
    position: absolute;
    bottom: 10px;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    background-color: rgb(97, 2, 206);
    color: cornsilk;
    font-size: 20px;
}
.account{
    position: absolute;
    left: 60px;
    background: linear-gradient(rgb(109, 107, 107),rgb(255, 255, 255),rgb(77, 76, 76));
    width: 200px;
    height: 580px;
    padding: 10px;
    border: white ridge 2px;
}
.hidden{
  display: none;
}
<!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>
    <h1 class="title">Арканоид</h1>
    <div class="game">
      <div class="field"></div>
      <div class="account">
        <p class="text_level">Уровень:</p><div class="level">1</div>
        <p class="text_counter">Cчет:</p><div class="counter">0</div>
        <p class="text_life">Жизнь:</p><div class="life">3</div>
        <button class="btn">Начать игру</button>
      </div>
    </div>
    <script src="game.js"></script>
</body>
</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.