Untitled

<!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>Arkanoid</title>
    <style>
         #game {
            box-sizing: border-box;
            position: relative;
        }

        #game>* {
            box-sizing: border-box;
            position: absolute;
        }

        .block {
            transition: opacity .5s, transform .5s;
        }

        .block.hidden {
            opacity: 0;
            transform: scale(.5);
        }

        .player {
            transform: scaleX(.85);
            border-radius: 4px;
            transition: transform .3s;
        }

        .player.touched {
            transform: translateY(-10px);
        }

        .ball {
            transform: scale(2);
            background: #B38750;
            border-radius: 50%;
            border: 1px solid #AB84E8;
        }
    </style>
</head>
<body onkeyup="onKeyUp(event)" onkeydown="onKeyDown(event)">
    <div style='color: #AB84E8;'>Your lifes: <span id='counter'></span> left</div>
    <button style="position: absolute; color: #AB84E8; background-color: white; left: 120px; top: 3px;" onclick="myMove()">Start game</button>
    <div id='game'></div>
    <script>
     const GAME_WIDTH = 800
     const GAME_HEIGHT = 600
     const BLOCK_WIDTH = 35
     const BLOCK_HEIGHT = 20
     const BLOCK_MARGIN = 4
     const LINE_WIDTH = 50
     const LINE_HEIGHT = 5
     const BALL_SIZE = 4
     const map = document.getElementById('game')
     map.style.width = GAME_WIDTH + 'px'
     map.style.height = GAME_HEIGHT + 'px'
     map.style.border = '1px solid #AB84E8'
     map.style.position = 'relative'
     map.style.boxSizing = 'border-box'
function start(){
    createLines(8)
}
start()

function createLines(lines){
     for (let i = 0; i < lines; i++){
         for (let m = 0; m < GAME_WIDTH / (BLOCK_MARGIN+BLOCK_WIDTH)-1; m++){
             const block = document.createElement("div")
             block.classList.add('block')
             block.style.backgroundColor = "lightblue"
             block.style.width = BLOCK_WIDTH + 'px'
             block.style.height = BLOCK_HEIGHT + 'px'
             block.style.margin = BLOCK_MARGIN + 'px'
             block.style.borderRadius = "2px"
             block.style.top = 10 + (i) * (BLOCK_MARGIN + BLOCK_HEIGHT) + 'px'
             block.style.left = 7 + (m) * (BLOCK_MARGIN + BLOCK_WIDTH) + 'px'
             map.appendChild(block)
         }
     }
}


    const player = document.createElement('div')
    player.classList.add('player')
    player.style.width = LINE_WIDTH + 'px'
    player.style.height = LINE_HEIGHT + 'px'
    player.style.backgroundColor = '#B38750'
    player.style.top = (GAME_HEIGHT - LINE_HEIGHT * 2) + 'px'
    player.style.left = (GAME_WIDTH - LINE_WIDTH) / 2 + 'px'
    map.appendChild(player)


    const ball = document.createElement('div')
    ball.style.width = BALL_SIZE + 'px'
    ball.style.height = BALL_SIZE + 'px'
    ball.classList.add('ball')
    ball.style.top = (GAME_HEIGHT - BALL_SIZE*2) - LINE_HEIGHT*2 + 'px'
    ball.style.left = (GAME_WIDTH - BALL_SIZE) / 2 + 'px'
    map.appendChild(ball)


    let leftArrow = false
    let rightArrow = false

function onKeyUp(e){
    if (e.key === "ArrowRight"){
        rightArrow = false
    } else if (e.key === "ArrowLeft"){
        leftArrow = false
    }
}
function onKeyDown(e){
    if (e.key === "ArrowRight"){
        rightArrow = true
    } else if (e.key === "ArrowLeft"){
        leftArrow = true
    }
}
map.onmousemove = (event) => {

    player.style.left = Math.min(GAME_WIDTH - LINE_WIDTH -2,
    Math.max(0,event.clientX - LINE_WIDTH / 2)) + 'px'
 }


const DEFAULT_BALL_SPEED = 1

let ballSpeedX = -DEFAULT_BALL_SPEED;
let ballSpeedY = -DEFAULT_BALL_SPEED;

let lifes = document.getElementById("counter").innerText  = 5
let inGame = true
setInterval(() => {
        if (!inGame) return
        const playerLeft = parseInt(player.style.left)
        if (leftArrow) {
            player.style.left = Math.min(GAME_WIDTH - LINE_WIDTH - 2,
                Math.max(0, playerLeft - 4)) + 'px'
        }
        if (rightArrow) {
            player.style.left = Math.min(GAME_WIDTH - LINE_WIDTH - 2,
                Math.max(0, playerLeft + 4)) + 'px'
        }
    }, 10);
function myMove(){
setInterval(() => {
    if (!inGame) return
    const ballLeft = parseInt(ball.style.left)
    const ballTop = parseInt(ball.style.top)
    const centerBallX = ballLeft + BALL_SIZE / 2
    const centerBallY = ballTop + BALL_SIZE / 2


    if (ballLeft < 0)
        ballSpeedX = -ballSpeedX

    if (ballTop < 0)
        ballSpeedY = -ballSpeedY

    if (ballLeft >= GAME_WIDTH - BALL_SIZE){
        ballSpeedX = -ballSpeedX
    }
    if (ballTop >= GAME_HEIGHT + BALL_SIZE){
        if (lifes == 0){
            inGame = false
            alert("Przegrałeś")
        } else {
            ball.style.top = (GAME_HEIGHT - BALL_SIZE) /2  + 'px'
            ball.style.left = (GAME_WIDTH - BALL_SIZE) / 2  + 'px'
            document.getElementById('counter').innerText = --lifes
            player.style.left  = (GAME_WIDTH - LINE_WIDTH) / 2 + 'px'
            alert("Odradzam cię")
            return;
        }
    }
    const playerLeft = parseInt(player.style.left)
    const playerTop = parseInt(player.style.top)

    if (centerBallX > playerLeft && centerBallX + BALL_SIZE < playerLeft + LINE_WIDTH &&
    centerBallY + BALL_SIZE / 2 > playerTop && centerBallY - ballSpeedY < playerTop){

        ballSpeedY = -ballSpeedY

        player.classList.add('touched')
        setTimeout(() =>{
            play.classList.remove('touched')
        }, 300);
   }
   for (const b of document.querySelectorAll('.block:not(.hidden)')){
        const blockLeft = parseInt(b.style.left)
        const blockTop = parseInt(b.style.top)
        if (centerBallX>= blockLeft && centerBallX + BALL_SIZE <= blockLeft + BLOCK_WIDTH &&
            centerBallY >= blockTop && centerBallY + BALL_SIZE <= blockTop + BLOCK_HEIGHT) {

            if (centerBallY - ballSpeedY >= blockTop && centerBallY - ballSpeedY + BALL_SIZE <= blockTop + BLOCK_HEIGHT)
                ballSpeedX = -ballSpeedX
             else
                ballSpeedY = -ballSpeedY

            b.classList.add('hidden')
            break;
}}

    ball.style.top = ballTop + ballSpeedY + 'px'
    ball.style.left = ballLeft + ballSpeedX + 'px'
}, 5)}


</script>
</body>
</html>