Как доработать логику игры на HTML?

Question

Всех приветсвую.Пишу игру мини-игру на HTML с использованием элемента сanvas и скриптов JS. Суть ее такова , что при столкновения шарика с препятствием , игра останавливается , и шарик тоже перестает двигаться. Моя проблема заключается в том , что шарик , касаясь нижнего края препятствия и левого края препятствия, движение не прекращает, а должен . Вообщем помогите ,пожалуйста, сделать так , чтобы любое касание шарика до препятствия останавливало бы игру. Управление осуществляется клавишами W,S,A,D.

let myGamePiece;//шарик
let myObstacle;//Препятствие
let myObstacle1;
function startGame() {
    myGamePiece = new Component(30, 30, 20, 0, 2 * Math.PI, 'red');
    myObstacle = new ObstacleComponent(300, 120, "black", 10, 200);
    myObstacle1 = new ObstacleComponent(200,100,'green',10,20);
    myGameArea.start();
}
let myGameArea = {
    canvas: document.createElement('canvas'),
    start: function () {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext('2d');
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', (ev) => {
            myGameArea.key = ev.keyCode;
        })
        window.addEventListener('keyup', (ev) => {
            myGameArea.key = false;
            stopMove();
        })
    },
    clear: function () {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop: function () {
        clearInterval(this.interval);
    }
};

//Круг
function Component(x, y, radius, startAng, endAng, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.startAng = startAng;
    this.endAng = endAng;
    this.speedX = 0;
    this.speedY = 0;
    this.update = function () {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, this.startAng, this.endAng);
        ctx.fill();
    };
    this.newPos = function () {
        this.x += this.speedX;
        this.y += this.speedY;
    };
    this.crashWith = function (otherObj) {
        let myleft = this.x ;
        let myright = this.x + this.radius; 
        let mytop = this.y;
        let mybottom = this.y + this.radius;
        let otherleft = otherObj.x;
        let otherright = otherObj.x + (otherObj.width);
        let othertop = otherObj.y;
        let otherbottom = otherObj.y + (otherObj.height);
        let crash = true;
        if ((mybottom > othertop) ||
            (mytop > otherbottom) ||
            (myright < otherleft) ||
            (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }

};
function updateGameArea() {
    if (myGamePiece.crashWith(myObstacle1)) {
        myGameArea.stop()
    } else {
        myGameArea.clear();
        myObstacle.update();
        myObstacle1.update()
        myGameArea.speedX = 0;
        myGameArea.speedY = 0;
        if (myGameArea.key && myGameArea.key == 87) { myGamePiece.speedY = -1 }; //W
        if (myGameArea.key && myGameArea.key == 83) { myGamePiece.speedY = 1 }; // S
        if (myGameArea.key && myGameArea.key == 65) { myGamePiece.speedX = -1 }; //A
        if (myGameArea.key && myGameArea.key == 68) { myGamePiece.speedX = 1 }; //D

        myGamePiece.newPos();
        myGamePiece.update()
    }

};


function stopMove() {
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
};

function ObstacleComponent(x, y, color, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.speedY = 0;
    this.speedX = 0;
    this.update = function () {

        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.fillRect(this.x, this.y, this.width, this.height);
    };
    this.newPos = function () {
        this.x += this.speedX;
        this.y += this.speedY;
    }
}

canvas {
    border: 1px solid black;
    background-color: #f1f1f1 ;
    width:480;
    height: 270;
   
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body onload="startGame()">
    
    <script src="app.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как доработать логику игры на HTML?

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