-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpixelation.html
118 lines (104 loc) · 5.01 KB
/
pixelation.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
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pixelation</title>
</head>
<body>
<div style="display: flex;
justify-content: space-between;"><span>Pixelation</span> <span style="text-align:right;">Movements: <span id="score">0</span></span></div>
<canvas id="canvas" width="480" height="600"></canvas>
<br/> <br/>
<canvas id="blue" width="77" height="80" style="background-color:rgb(52, 152, 219)" ></canvas>
<canvas id="red" width="77" height="80" style="background-color:rgb(231, 76, 60)"></canvas>
<canvas id="grey" width="77" height="80" style="background-color:rgb(149, 165, 166)"></canvas>
<canvas id="green" width="77" height="80" style="background-color:rgb(46, 204, 113)"></canvas>
<canvas id="orange" width="77" height="80" style="background-color:rgb(230, 126, 34)"></canvas>
<canvas id="yellow" width="77" height="80" style="background-color:rgb(241, 196, 15)"></canvas>
<script>
const colors = ['rgb(52, 152, 219)', // blue
'rgb(231, 76, 60)', // red
'rgb(149, 165, 166)', // grey
'rgb(46, 204, 113)', // green
'rgb(230, 126, 34)', // orange
'rgb(241, 196, 15)' ]; // yellow
const blocks_width = 12;
const blocks_height = 15;
const blocks_side = 40;
function new_board(blocks_width,blocks_height,number_colors){
var board_temp = new Array();
for (i=0;i<blocks_height;i++){
var row_temp = new Array();
for (j=0;j<blocks_width;j++){
row_temp.push(Math.floor((Math.random() * number_colors)));
}
board_temp.push(row_temp);
}
return board_temp;
}
function apply_color(board, x, y, color_to_apply, target_color){
const height = board.length;
const width = board.length>0?board[0].length:0;
if(x>=0 && x<width && y>=0 && y<height){
if (board[y][x]!=target_color){
return;
}
board[y][x] = color_to_apply;
apply_color(board, x-1, y, color_to_apply,target_color);
apply_color(board, x+1, y, color_to_apply,target_color);
apply_color(board, x, y-1, color_to_apply,target_color);
apply_color(board, x, y+1, color_to_apply,target_color);
}
}
function draw(board,colors) {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
const height = board.length;
const width = board.length>0?board[0].length:0;
for (i=0;i<height;i++){
for (j=0;j<width;j++){
ctx.fillStyle = colors[board[i][j]];
ctx.fillRect(j*blocks_side, i*blocks_side, j*blocks_side+blocks_side, i*blocks_side+blocks_side);
}
}
}else{
console.log("Not Supported");
}
}
var board = new_board(blocks_width,blocks_height,colors.length);
var score = 0;
draw(board,colors);
function color_click(color){
if (board[0][0] != color){
apply_color(board,0,0,color,board[0][0]);
draw(board,colors);
}
score = score + 1;
var moves = document.getElementById('score');
moves.innerText = score;
if (score>=26){
alert("You loose!");
}
}
document.getElementById('blue').onclick= function() {
color_click(0)
}
document.getElementById('red').onclick= function() {
color_click(1)
}
document.getElementById('grey').onclick= function() {
color_click(2)
}
document.getElementById('green').onclick= function() {
color_click(3)
}
document.getElementById('orange').onclick= function() {
color_click(4)
}
document.getElementById('yellow').onclick= function() {
color_click(5)
}
</script>
</body>
</html>