Cách tạo trò chơi bằng HTML CSS và JavaScript

Bạn muốn khám phá cách tôi tạo trò chơi người chạy vô tận trên web 3D “Siêu tốc độ“? . js hoặc TweenJS 🙂

Nội dung chính Show

Chúng tôi có thể tạo trò chơi bằng HTML CSS và JavaScript không?
Bạn có thể xây dựng trò chơi bằng JavaScript không?
Làm cách nào để tạo trò chơi 2D bằng HTML?
Bạn có thể tạo trò chơi 3D bằng JavaScript không?

giới thiệu dự án. “Thế giới của rồng” là trò chơi trong đó một con rồng cố gắng tự cứu mình khỏi con rồng kia bằng cách nhảy qua con rồng cản đường nó. Điểm số được cập nhật khi một con rồng tự cứu mình khỏi con rồng khác.

Dự án sẽ chứa các tệp HTML, CSS và JavaScript. Tệp HTML thêm cấu trúc vào trò chơi, sau đó tạo kiểu bằng CSS. JavaScript thêm chức năng vào trò chơi

cấu trúc tệp

mục lục. html
Phong cách. css
kịch bản. js

Mã HTML

phần tiêu đề. Nó sẽ hiển thị tên của trò chơi
Trò chơi vượt qua phần. Nó sẽ được hiển thị khi bạn thua trò chơi
Phần vượt chướng ngại vật. Nó sẽ chứa chướng ngại vật mà con rồng phải tự cứu mình
phần rồng. Nó sẽ chứa con rồng phải được cứu khỏi chướng ngại vật tôi. e. con rồng khác
phần điểm. Nó sẽ hiển thị số điểm hiện tại của trò chơi

mục lục. html

HTML

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

_______233____237____235

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

0______233

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

0______233

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

0______233

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

320

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

321

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

323

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

324

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

327____235

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

320

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

332

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

333

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

334

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

337

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

339____2340

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

342

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

343

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

321____04

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

323

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

349

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

37____235

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

353

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

0______233

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

357

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

358

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

330____2331

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

357

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

0______233

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

337

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

339

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

33____2336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

337

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

376

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

377

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

33____2336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

358

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

355

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

356

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

33____2336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

337

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

337

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

0____2349

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

336

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

349

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

353

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

349

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

mã CSS

Định vị tên trò chơi. Tên của trò chơi được định vị bởi thuộc tính tuyệt đối của CSS
Kiểu dáng hình nền. Trong lớp container, chúng tôi đã đặt hình nền của trò chơi với kích thước nền được đặt thành cover
Kiểu dáng thẻ điểm. Chúng tôi đã đặt thẻ điểm ở trên cùng bên phải của trang và cũng cung cấp cho nó một màu nền phù hợp để làm cho nó hấp dẫn. Văn bản trong đó sẽ được hiển thị bằng màu trắng
Định dạng hình ảnh chướng ngại vật. Chúng tôi đã định vị chướng ngại vật ở phía dưới bên trái của trang và cung cấp hoạt ảnh cho nó để nó có thể di chuyển về phía bên trái
kiểu dáng rồng. Chúng tôi đã đặt con rồng ở dưới cùng bên trái của trang và cung cấp hoạt ảnh cho nó để nó có thể nhảy lên và tự cứu mình
Trò chơi kết thúc phong cách. Chúng tôi đã định vị phần trò chơi ở giữa trang và nó sẽ xuất hiện khi con rồng bị chướng ngại vật đâm vào

Phong cách. css

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

Mã JavaScript

1. Chuyển động của rồng. Điều này được cung cấp bởi sự kiện onkeydown

Phím mũi tên chỉ lên. Nhấn vào đó, con rồng sẽ nhảy lên trên (hình ảnh động do CSS cung cấp)
phím mũi tên trái. Khi nhấn nó, con rồng sẽ di chuyển sang trái (hình ảnh động do CSS cung cấp)
phím mũi tên phải. Khi nhấn nó, con rồng sẽ di chuyển sang trái (hình ảnh động do CSS cung cấp)

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

2. Đang cập nhật điểm số. Điểm chỉ được thỏa mãn khi một điều kiện nhất định được thỏa mãn. Chúng tôi sẽ tính toán các giá trị bên trái và bên dưới của cả chướng ngại vật và con rồng, sau đó tăng điểm dựa trên một giá trị phù hợp cho thấy rằng con rồng đã tự cứu mình khỏi chướng ngại vật. Đối với điều này, chúng tôi đã lấy biến "chéo" và gán "true" cho nó. Khi rồng vượt qua chướng ngại vật một cách an toàn, chúng tôi đặt giá trị thành “false”. Sau khoảng 1s ta đổi giá trị của cross thành “true”. Chúng tôi cũng đã làm cho chướng ngại vật chạy nhanh hơn sau mỗi lần vượt qua và do đó tăng mức độ khó

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

kịch bản. js

jav

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

_______00____032____033

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

_______00____038____039

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46______047

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46______051____052

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46____056

_______057____058____052

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46____062

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46______047

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46____073

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46____081

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46______047

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46____073

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

_______046____701

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

47____048

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

13____714

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

17____718

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46______739______076

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46______739____076

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

________ 046 ________ 044 ________ 763

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46______767____768

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46______771____772

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

_______046____780

_______046____782

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46______032____785

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46____056

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

32____033

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

_______046____794

_______046____707

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

3200______076

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

3202

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

3204

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

3205

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

57____23208

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

3209

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

3210____23211

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

46____23214

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

0____23218

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

3221

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

setInterval(() => {
    dragon = document.querySelector('.dragon');
    gameover = document.querySelector('.gameover');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('left'));

    dy = parseInt(window.getComputedStyle(
        dragon, null).getPropertyValue('bottom'));

    ox = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('left'));

    oy = parseInt(window.getComputedStyle(
        obstacle, null).getPropertyValue('bottom'));

    offsetx = Math.abs(dx - ox);
    offsety = Math.abs(dy - oy);

    console.log(offsetx, offsety);

    if (offsetx < 120 && offsety <= 144) {
        gameover.style.visibility = 'visible';
        obstacle.classList.remove('animateobstacle');
    } else if (offsetx < 125 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setInterval(() => {
            obsanidur = parseFloat(window
                .getComputedStyle(obstacle, null)
                .getPropertyValue('animation-duration'));

            obstacle.style.animationDuration
                = obsanidur - 0.01 + 's';
        }, 500);
    }
}, 10);

function updateScore(score) {
    scorecount.innerHTML = "Your score : " + score;
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

document.onkeydown = function(e) {
    console.log(e.keyCode);
    if (e.keyCode == 38) {
        dragon = document.querySelector('.dragon');
        dragon.classList.add('animatedragon');
        setTimeout(() => {
            dragon.classList.remove('animatedragon');
        }, 700);
    }
    if (e.keyCode == 37) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(dragon, null)
            .getPropertyValue('left'));
        dragon.style.left = dragonx - 112 + "px";
    }
    if (e.keyCode == 39) {
        dragon = document.querySelector('.dragon');
        dragonx = parseInt(window.getComputedStyle(
            dragon, null).getPropertyValue('left'));
        dragon.style.left = dragonx + 112 + "px";
    }
}

3226

Thẩm quyền giải quyết. trò chơi rồng

đầu ra

https. //phương tiện truyền thông. chuyên viên máy tính. org/wp-content/uploads/20201206163914/WhatsApp-Video-2020-12-06-at-4. 36. 51-CH. mp4

Chúng tôi có thể tạo trò chơi bằng HTML CSS và JavaScript không?

Canvas HTML . Phần tử

The

. The

Bạn có thể xây dựng trò chơi bằng JavaScript không?

Có. JavaScript là ngôn ngữ tuyệt vời để phát triển trò chơi, tùy thuộc vào loại trò chơi bạn muốn tạo . JavaScript là tốt nhất cho các trò chơi dựa trên web và di động. Đây cũng là một ngôn ngữ tuyệt vời cho trẻ em học vì nó thường dễ hiểu và có nhiều tài nguyên trực tuyến dành cho các lập trình viên.

Làm cách nào để tạo trò chơi 2D bằng HTML?

Cách viết mã trò chơi 2D bằng JavaScript, HTML và CSS .

Thiết lập HTML & CSS

Thiết lập JavaScript cơ bản

Lập trình hướng đối tượng với JavaScript

Tạo các đối tượng Player và Game

vòng lặp hoạt ảnh

đầu vào bàn phím

Tạo đường đạn

Sự kiện định kỳ

Bạn có thể tạo trò chơi 3D bằng JavaScript không?

WebGL về cơ bản là OpenGL ES 2. 0 cho Web — đó là API JavaScript cung cấp các công cụ để xây dựng hoạt ảnh tương tác phong phú và tất nhiên, cả trò chơi. Bạn có thể tạo và hiển thị đồ họa 3D động bằng JavaScript được tăng tốc phần cứng .

programming javascript

Cách tạo trò chơi bằng HTML CSS và JavaScript

HTML

jav

Chúng tôi có thể tạo trò chơi bằng HTML CSS và JavaScript không?

Bạn có thể xây dựng trò chơi bằng JavaScript không?

Làm cách nào để tạo trò chơi 2D bằng HTML?

Bạn có thể tạo trò chơi 3D bằng JavaScript không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội