1

Создал что-то вроде игры, теперь задача которую не пойму как реализовать: если шарик коснётся хоть одного прямоугольника, то нужно остановить игру

по нажатию на пробел можно контролировать высоту шарика

вот мой код:

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="600" height="600" style="background: black;"></canvas>
    
    <script>
    class Canvas{
    constructor(){
        this.canvas=document.querySelector('canvas')
        this.ctx=this.canvas.getContext('2d')
    }
}
//===============================================
 class Ball extends Canvas{
    constructor(){
        super();
        this.x=50
        this.y=250
        this.r=15
        this.road=true;
    }
    
    paint(){
        this.ctx.beginPath()
        this.ctx.arc(this.x,this.y,this.r,0,6.28)
        this.ctx.fillStyle='red'
        this.ctx.fill()
        this.ctx.closePath()
    }
    move(){
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)
         if(this.road){
             this.y+=20
         }else{
             this.y-=40
             this.road=true
         }
         if(this.y>=this.canvas.height){
             this.y=this.canvas.height-20
         } 
         this.paint()
    }
 }
 //============================================
 class Game{
    constructor(){
        this.shar=new Ball()
        this.pugl= new Grid()
        document.body.addEventListener('keydown',(e)=>{
            if(e.key==' '){
                this.shar.road=false
            }
        })
    }
    play(){
        setInterval(()=>{
            this.shar.paint()
            this.shar.move()
            this.pugl.paint()
            this.pugl.move()
           },200)
    }
}
 //=========================================
 class Grid extends Canvas{
    constructor(){
        super();

        this.setka=[];

        for(let i=0;i<12;i++){
            let obj= new Pugl()
            obj.x=300+80*i
            obj.h=parseInt(Math.random()*250)
            if(i%2==0){
                obj.y=this.canvas.height-obj.h
            }
             
            this.setka.push(obj)
         }
    }

    paint(){
        this.setka.map(item=>item.paint() )
    }

    move(){
        this.setka.map(item=>{
            item.x-=80;
             if(item.x<=0){
                item.x+=750; 
              }
          })

        this.paint()
    }
}
 
class Pugl extends Canvas{
    constructor(){
        super();
        this.x=300
        this.y=0
        this.w=20
        this.h=100
    }
    paint(){
        this.ctx.fillRect(this.x,this.y,this.w,this.h)
        this.ctx.fillStyle='white'
     }
 }
  
      let app=new Game()
      app.play()
     </script>
</body>
</html>

3
  • Я бы сделал следующим образом. Шарик и прямоугольники сделать полупрозрачными, возможно вынести на второй слой с visible=hidden, если это мешает дизайну. Цвета шарика и прямоугольников сделать абсолютно разными, то есть шарик rgb(255, 0, 0), а прямоугольников, например, rgb(0, 255, 0). Затем, в каждом кадре анализировать все пиксели imageData и искать, где rgb(>0, >0, 0); То есть, где есть смешение цветов.
    – Leonid
    Commented 7 апр. 2020 в 11:48
  • Так мы установим не только факт соприкосновения, но и карту пересечения, объем этого пересечения и т.д. Возможно, это будет тяжело для бОльшего экрана, не знаю, - надо тестировать.
    – Leonid
    Commented 7 апр. 2020 в 11:51
  • Также можно в шаре взять несколько (шесть, восемь) контрольных точек по "периметру" и на каждом кадре сравнивать этот массив точек с вхождением в path массива прямоугольников. developer.mozilla.org/en-US/docs/Web/API/… - метод isPointInPath
    – Leonid
    Commented 7 апр. 2020 в 11:55

1 ответ 1

-2

как-то так:

    play(){
        let interval = setInterval(()=>{
            this.shar.paint()
            this.shar.move()
            this.pugl.paint()
            this.pugl.move()
            this.check(interval)
        },200)
    }
    check(interval){
        let sharX = this.shar.x;
        let sharY = this.shar.y;
        for(let puglID in this.pugl.setka){
            let puglX = this.pugl.setka[puglID].x;
            let puglY = this.pugl.setka[puglID].y;
            let puglH = this.pugl.setka[puglID].h;
            if( (sharX >= puglX && sharX <= puglX+20) ){
                if(puglY > 300 && (sharY >= puglY && sharY <= (puglY+puglH ) )){
                    clearInterval(interval)
                }
            }
        }
    }

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.