<!DOCTYPE html>
<html>
<body onload="press(event)" onkeyup="press(event)">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid
#d3d3d3;">
</canvas>
<div id="mytext"> </div>
<div id="mytext2"> </div>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let globalX = 0;
let GlobalY = 0;
let fieldstate = 1;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let state = new Array(11);
for (let i = 0; i <= 10; i++) {
state[i] = new Array(11);
}
for (let i = 0; i <= 10;i++){
for (let k = 0; k <= 10;k++){
state[i][k] = 1;
}
}
for (let i= 0;i <=8;i+=2){
let r1 = getRandomInt(1,8);
let r2 = getRandomInt(1,8);
if (r1 == r2) {i--; continue;};
state[r1][i] = 2;
state[r2][i] = 2;
state[r1+1][i] = 2;
state[r2+1][i] = 2;
}
function press(e){
if (e.keyCode == '38') {
GlobalY-=50;
}
else if (e.keyCode == '40') {
GlobalY+=50;
}
else if (e.keyCode == '37') {
globalX-=50;
}
else if (e.keyCode == '39') {
globalX+=50;
}
//очистка холста
ctx.clearRect(0,0,500,500);
ctx.beginPath();
for (let y = 0; y <= 500; y += 50) {
for (let x = 0; x <= 500; x += 50) {
ctx.moveTo(0, y);
ctx.lineTo(500, y);
ctx.moveTo(x, 0);
ctx.lineTo(x, 500);
}
ctx.stroke();
}
ctx.fillStyle = 'green';
ctx.fillRect(globalX,GlobalY, 49, 49);
//Рисовка квадратов
for (let y = 0; y <= 500; y += 50) {
for (let x = 0;x <= 500;x+=50){
if (state[y/50][x/50] == 2)
{
//ctx.fillStyle = 'blue';
//ctx.fillRect(x-50,y-50, 49, 49);
}
if (state[y/50][x/50] == 2 && (y-50) == GlobalY && (x-50) == globalX)
{
fieldstate++;
ctx.fillStyle = 'red';
ctx.fillRect(x-50,y-50, 49, 49);
state[y/50][x/50] = 3;
}
if (state[y/50][x/50] == 3){
ctx.fillStyle = 'red';
ctx.fillRect(x-50,y-50, 49, 49);
}
}
}
if (globalX == 450 && fieldstate == 1) alert("Вы везучий сапер");
if (globalX == 450 && fieldstate == 2) alert("Вы прошли минное поле с одним взрывом");
if (globalX == 450 && fieldstate >= 3) alert("Вы плохой сапер");
let elem = document.getElementById("mytext");
elem.innerHTML = "количество попыток " +globalX+"<br>";
}
</script>
</body>
</html>
| 