<!DOCTYPE html>
<html>
<body onload="press(event)">
<input type="button" onclick="location.reload()" value="обновить">
<br>
<br>
<div id="myword">МУЗЫКА</div>
<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;">
</canvas>
<div id="mytext"> </div>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.font = "30px Arial";
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function board(){
ctx.beginPath();
for (let y = 0; y < 500; y += 100) {
ctx.moveTo(0, y);
ctx.lineTo(1000, y);
}
for (let x = 0; x < 1000; x += 100) {
ctx.moveTo(x, 0);
ctx.lineTo(x, 1000);
}
ctx.stroke();
}
function press(event){
board();
let randNum = getRandomInt(1,5)*100;
let word = "МУЗЫКА";
let position = getRandomInt(0,10-word.length);
for (let index = position; index < 10; index++){
if (index-position < word.length){
ctx.fillText(word[index-position],index*100+50,randNum-50);
}
}
for (let index = 0; index < 10; index++){
if ((index-position > word.length-1) || index < position){
ctx.fillText(String.fromCharCode(getRandomInt(1072, 1103)).toUpperCase(),index*100+50,randNum-50);
}
}
for (let index1 = 0;index1 < 10;index1++){
for (let index2 = 0;index2 < 10;index2++){
if ((randNum-50) != (index2*100+50)){
ctx.fillText(String.fromCharCode(getRandomInt(1072, 1103)).toUpperCase(),index1*100+50,index2*100+50);
}
}
}
}
</script>
</body>
</html>
| 