GeorgieDev,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
display: block;
}
.center-box{
position: relative;
height: 8vmax;
width: 8vmax;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
let StoneWidth = 7, StoneHeight = 7;
// func
function createNewStone(){
let center_block = document.createElement('img');
center_block.className = "center-box";
center_block.id = "centerBox"
center_block.setAttribute("src","https://javascript.ru/forum/images/smilies/smile.gif");
document.body.append(center_block);
center_block.onclick = function () {
center_block.setAttribute("style","width:" + StoneWidth-- + "vmax");
center_block.style.height = StoneHeight-- + "vmax"
if(StoneWidth <= 3){
StoneHeight = 7;
StoneWidth = 7;
center_block.remove()
createNewStone()
}
}
}
createNewStone();
});
</script>
</head>
<body>
</body>
</html>