-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtwiceasclever.html
128 lines (108 loc) · 3.02 KB
/
twiceasclever.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
126
127
128
<html>
<head>
<script src="seedrandom.js"></script>
</head>
<body>
<img id="backgroundImg" src="TwiceAsCleverChallenge1.png" style="position: relative;"/>
<canvas id="myCanvas" style="position: absolute; top: 0; left: 0;"></canvas>
<script>
var seed = 'Patrik';
var randomGen = new Math.seedrandom(seed);
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(randomGen() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
}
const shuffleArray = array => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(randomGen() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
function printGrey(context, arr, row, color)
{
ctx.fillStyle = color;
shuffleArray(arr)
for (let i = 0; i < arr.length; i++) {
ctx.fillText(arr[i], 40 + i * 41, 388 + (row-1) * 40);
}
}
function printYellow(context, arr)
{
ctx.fillStyle = 'black';
shuffleArray(arr)
for (let i = 0; i < arr.length; i++) {
ctx.fillText(arr[i], 405 + i % 3 * 49, 350 + Math.floor(i / 3) * 49);
}
}
function printYellowCircles(context)
{
var circles = [];
for (let i = 0; i < 4; i++) {
var number = getRandomInt(0, 11);
while(circles.includes(number))
{
number = getRandomInt(0, 11);
}
circles.push(number);
}
for (let i = 0; i < circles.length; i++) {
ctx.beginPath();
ctx.arc(410 + circles[i] % 3 * 49, 342 + Math.floor(circles[i] / 3) * 49, 18, 0 , 2 * Math.PI);
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
}
}
function printGreen(context, arr)
{
ctx.font = "20px Arial";
ctx.fillStyle = 'LightGray';
shuffleArray(arr);
for (let i = 0; i < arr.length; i++) {
ctx.fillText('x' + arr[i], 53 + i * 45, 718);
}
}
function printPink(context, arr)
{
ctx.font = "20px Arial";
ctx.fillStyle = 'LightGray';
shuffleArray(arr);
for (let i = 0; i < arr.length; i++) {
if(arr[i] !== 0)
{
ctx.fillText('\u2265' + arr[i], 53 + i * 45, 790);
}
}
}
function printSeed(ctx)
{
ctx.font = "14px Arial";
ctx.fillStyle = 'DimGray';
ctx.fillText('Seed: ' + seed, 470, 30);
}
var canvas = document.getElementById("myCanvas");
canvas.width = 589;
canvas.height = 915;
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
var pinkNumbers = [2, 3, 4, 0, 5, 4, 3, 2, 0, 3, 4, 5]
printPink(ctx, pinkNumbers);
var greenNumbers = [2,2,2,1,3,3,3,2,3,1,4,1]
printGreen(ctx, greenNumbers);
var yellowNumbers = [1,2,3,4,5,6,1,2,3,4,5,6]
printYellow(ctx, yellowNumbers);
printYellowCircles(ctx);
var greyNumbers = ['?',1,2,3,4,5,6]
printGrey(ctx, greyNumbers, 1, 'DarkOrange');
printGrey(ctx, greyNumbers, 2, 'blue');
printGrey(ctx, greyNumbers, 3, 'green');
printGrey(ctx, greyNumbers, 4, 'HotPink');
printSeed(ctx);
</script>
</body>
</html>
<script>
</script>