javascript_1_clicker

🏆Игра кликер на JavaScript🏆

Источник: видео “Уроки по JavaScript. Как сделать простую игру кликер на JavaScript” https://vk.com/im?sel=19460369&z=video-101965347456257142%2F64d31934e1f361f7e2%2Fpl_post-11899736_41573

2024-12-02_11-06-34

  1. Создать файлы и папки в указанном порядке

2024-12-01_23-11-47

  1. В файле Click_HTML.html
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Кликер</title>  
    <canvas id="Canvas" width="480" height="320"></canvas>  
</head>  
<body>  
<script src="/scripts/Click_JS.js"></script>  
</body>  
</html>

2024-12-02_23-19-56

  1. В файле Click_CSS.css пусто

2024-12-01_23-14-30

  1. В файле Click_JS.js
var click = 0;  
  
function increment(e) {  
    var x = e.clientX - 240;  
    var y = e.clientY - 160;  
    var dist = Math.sqrt(y * y + x * x);  
    if (dist < 50) {  
        click++;  
        redraw();  
    }  
}  
var c = document.getElementById("Canvas");  
c.addEventListener("click", increment); //обработчик кликов  
var ctx = c.getContext("2d");  
  
function redraw() {  
    ctx.clearRect(0,0,c.width,c.height);  
    ctx.font="20px Verdana";  
    ctx.fillText ("Клики: " + click,190,20);  
    ctx.beginPath();  
    ctx.fillStyle = "red";  
    ctx.arc(c.width/2, c.height /2, 50, 0, 2*3.14);  
    ctx.fill();  
}  
redraw()

2024-12-02_23-18-51

This site is open source. Improve this page.