-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (125 loc) · 4.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-lt-installed="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Labirintum</title>
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
</head>
<body>
<a href="https://war.ukraine.ua/donate/" class="em-ribbon" style="position: fixed; left:0; top:0; width: 90px; height: 90px; background: url('http://stfalcon.github.io/stopwar/img/stop-war-in-ukraine.png'); z-index: 10000; border: 0;" title="Do something to stop this war! Russians are killing our children and civilians!" target="_blank"></a>
<center><canvas id="myCanvas" width="400" height="300" style="border:1px solid blue">Будь ласка, встановіть оглядач з підтримкою Canvas, щоб грати в цю гру.</canvas><br>
Ширина:<input id="w" value="400" type="number"><br>
Висота:<input id="h" value="300" type="number"><br>
Кількість мін:<input id="dmc" value="300" type="number"><br>
<input id="button" type="button" value="Змінити параметри гри та почати знову" onclick="restart()"><br>
<input type="checkbox" id="showMines" onclick="draw(-1)">Показувати всі міни<br>
<!--<input id="files-upload"type="file"><ul id="file-list"></ul>-->
<a id="saveCvs" download="canvasGame.png">Зберегти зображення поля</a></center>
<script>
"use strict";
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
document.getElementById("dmc").value = myCanvas.width * myCanvas.height / 400;
var x, y, fx, fy, mc, dmc, mx, my, allowMoves = true, dm = true, passed, moves;
function initCanvas() {
moves = 0
allowMoves = true;
passed = []
myCanvas.width = document.getElementById("w").value;
myCanvas.height = document.getElementById("h").value;
do {
y = getRandomInt(0, myCanvas.height / 10) * 10;
x = getRandomInt(0, myCanvas.width / 10) * 10;
fx = getRandomInt(0, myCanvas.width / 10) * 10;
fy = getRandomInt(0, myCanvas.height / 10) * 10;
} while (x == fx || y == fy);
mx = [];
my = [];
dmc = document.getElementById("dmc").value;
for (mc = 0; mc < dmc; mc++) {
do {
mx[mc] = getRandomInt(0, myCanvas.width / 10) * 10;
my[mc] = getRandomInt(0, myCanvas.height / 10) * 10;
} while (mx[mc] == x && my[mc] == y || mx[mc] == fx && my[mc] == fy);
}
}
initCanvas();
var ctx = myCanvas.getContext("2d");
myCanvas.addEventListener("mousemove", draw);
function draw(event) {
if (allowMoves) {
moves++;
if (event.keyCode === 37 || event.keyCode === 65 || event.keyCode === 100)
x -= 10;
if (event.keyCode === 38 || event.keyCode === 87 || event.keyCode === 104)
y = y - 10;
if (event.keyCode === 39 || event.keyCode === 68 || event.keyCode === 102)
x = x + 10;
if (event.keyCode === 40 || event.keyCode === 83 || event.keyCode === 98)
y = y + 10;
if (x > myCanvas.width - 10)
x = x - myCanvas.width;
if (y > myCanvas.height - 10)
y = y - myCanvas.height;
if (x < 0)
x = x + myCanvas.width;
if (y < 0)
y = y + myCanvas.height;
}
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.fillStyle = "yellow";
passed[moves] = [];
passed[moves]['x'] = x;
passed[moves]['y'] = y;
for (let moves1 = 1; moves1 < moves; moves1++) {
ctx.fillRect(passed[moves1]['x'], passed[moves1]['y'], 10, 10);
}
ctx.fillStyle = "green";
ctx.fillRect(x, y, 10, 10);
ctx.fillStyle = "blue";
ctx.fillRect(fx, fy, 10, 10);
for (mc = 0; mc < dmc; mc++) {
if (showMines.checked) {
ctx.fillStyle = "red";
ctx.fillRect(mx[mc], my[mc], 10, 10);
}
else
{
if (mx[mc] < x + 30 && mx[mc] > x - 30 && my[mc] < y + 30 && my[mc] > y - 30){
ctx.fillStyle = "red";
ctx.fillRect(mx[mc], my[mc], 10, 10);
}
}
if (mx[mc] < x + 10 && mx[mc] > x - 10 && my[mc] < y + 10 && my[mc] > y - 10 && dm) {
ctx.font = myCanvas.height / 10 + "px serif";
ctx.fillStyle = "black";
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillText("Ви нарвалися на міну :(", myCanvas.width / 2, myCanvas.height / 2);
allowMoves = false
}
}
var dataURL = myCanvas.toDataURL("image/png");
var link = document.getElementById("saveCvs");
link.href = dataURL;
link.download = "canvasGame.png";
if (fx < x + 10 && fx > x - 10 && fy < y + 10 && fy > y - 10) {
ctx.font = myCanvas.height / 10 + "px serif";
ctx.fillStyle = "black";
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillText("Ви виграли!!!", myCanvas.width / 2, myCanvas.height / 2);
allowMoves = false
}
}
draw(-1);
function restart() {
initCanvas();
draw(-1);
}
document.body.addEventListener("keyup", draw);
</script>
</body>
<link href="https://github.com/p182" rel="me">
</html>