Skip to content

Commit a473595

Browse files
lluiscaminolluiscamino
committedFeb 4, 2019
Initial code 💪
1 parent 27362e2 commit a473595

File tree

5 files changed

+313
-0
lines changed

5 files changed

+313
-0
lines changed
 

‎index.html

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Stacker</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" type="text/css" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="game">
11+
<div class="block-group" id="group11">
12+
<div class="block" id="block83"></div>
13+
<div class="block" id="block82"></div>
14+
<div class="block" id="block81"></div>
15+
<div class="block" id="block80"></div>
16+
<div class="block" id="block79"></div>
17+
<div class="block" id="block78"></div>
18+
<div class="block" id="block77"></div>
19+
</div>
20+
<div class="block-group" id="group10">
21+
<div class="block" id="block76"></div>
22+
<div class="block" id="block75"></div>
23+
<div class="block" id="block74"></div>
24+
<div class="block" id="block73"></div>
25+
<div class="block" id="block72"></div>
26+
<div class="block" id="block71"></div>
27+
<div class="block" id="block70"></div>
28+
</div>
29+
<div class="block-group" id="group9">
30+
<div class="block" id="block69"></div>
31+
<div class="block" id="block68"></div>
32+
<div class="block" id="block67"></div>
33+
<div class="block" id="block66"></div>
34+
<div class="block" id="block65"></div>
35+
<div class="block" id="block64"></div>
36+
<div class="block" id="block63"></div>
37+
</div>
38+
<div class="block-group" id="group8">
39+
<div class="block" id="block62"></div>
40+
<div class="block" id="block61"></div>
41+
<div class="block" id="block60"></div>
42+
<div class="block" id="block59"></div>
43+
<div class="block" id="block58"></div>
44+
<div class="block" id="block57"></div>
45+
<div class="block" id="block56"></div>
46+
</div>
47+
<div class="block-group" id="group7">
48+
<div class="block" id="block55"></div>
49+
<div class="block" id="block54"></div>
50+
<div class="block" id="block53"></div>
51+
<div class="block" id="block52"></div>
52+
<div class="block" id="block51"></div>
53+
<div class="block" id="block50"></div>
54+
<div class="block" id="block49"></div>
55+
</div>
56+
<div class="block-group" id="group6">
57+
<div class="block" id="block48"></div>
58+
<div class="block" id="block47"></div>
59+
<div class="block" id="block46"></div>
60+
<div class="block" id="block45"></div>
61+
<div class="block" id="block44"></div>
62+
<div class="block" id="block43"></div>
63+
<div class="block" id="block42"></div>
64+
</div>
65+
<div class="block-group" id="group5">
66+
<div class="block" id="block41"></div>
67+
<div class="block" id="block40"></div>
68+
<div class="block" id="block39"></div>
69+
<div class="block" id="block38"></div>
70+
<div class="block" id="block37"></div>
71+
<div class="block" id="block36"></div>
72+
<div class="block" id="block35"></div>
73+
</div>
74+
<div class="block-group" id="group4">
75+
<div class="block" id="block34"></div>
76+
<div class="block" id="block33"></div>
77+
<div class="block" id="block32"></div>
78+
<div class="block" id="block31"></div>
79+
<div class="block" id="block30"></div>
80+
<div class="block" id="block29"></div>
81+
<div class="block" id="block28"></div>
82+
</div>
83+
<div class="block-group" id="group3">
84+
<div class="block" id="block27"></div>
85+
<div class="block" id="block26"></div>
86+
<div class="block" id="block25"></div>
87+
<div class="block" id="block24"></div>
88+
<div class="block" id="block23"></div>
89+
<div class="block" id="block22"></div>
90+
<div class="block" id="block21"></div>
91+
</div>
92+
<div class="block-group" id="group2">
93+
<div class="block" id="block20"></div>
94+
<div class="block" id="block19"></div>
95+
<div class="block" id="block18"></div>
96+
<div class="block" id="block17"></div>
97+
<div class="block" id="block16"></div>
98+
<div class="block" id="block15"></div>
99+
<div class="block" id="block14"></div>
100+
</div>
101+
<div class="block-group" id="group1">
102+
<div class="block" id="block13"></div>
103+
<div class="block" id="block12"></div>
104+
<div class="block" id="block11"></div>
105+
<div class="block" id="block10"></div>
106+
<div class="block" id="block9"></div>
107+
<div class="block" id="block8"></div>
108+
<div class="block" id="block7"></div>
109+
</div>
110+
<div class="block-group" id="group0">
111+
<div class="block" id="block6"></div>
112+
<div class="block" id="block5"></div>
113+
<div class="block" id="block4"></div>
114+
<div class="block" id="block3"></div>
115+
<div class="block" id="block2"></div>
116+
<div class="block" id="block1"></div>
117+
<div class="block" id="block0"></div>
118+
</div>
119+
<div class="info">
120+
Press ENTER or the button below to play.
121+
<br>
122+
<button id="go">Start!</button>
123+
</div>
124+
</div>
125+
<script src="ts-built/main.js" type="module"></script>
126+
<script src="ts-built/Game.js" type="module"></script>
127+
</body>
128+
</html>

‎src/Game.ts

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
export class Game {
2+
static readonly ROWS: number = 12;
3+
static readonly COLUMNS: number = 7;
4+
private static gameStarted: boolean = false;
5+
private finished: boolean;
6+
private level: number = 0;
7+
private availableBlocks: number = 3;
8+
private speed: number = 0.012;
9+
private intervals: number[] = [];
10+
11+
constructor() {
12+
Game.gameStarted = true;
13+
this.finished = false;
14+
this.resetBlocks();
15+
}
16+
17+
static newGame(event: any): void {
18+
if ((event.which === 1 || event.which === 32) && !Game.gameStarted) {
19+
document.getElementById('go').innerText = 'Hit!';
20+
let game: Game = new Game();
21+
game.moveBlocks();
22+
}
23+
}
24+
25+
private resetBlocks(): void {
26+
let blocks: any = document.getElementsByClassName('block');
27+
for (let block of blocks) {
28+
block.classList.remove('marked');
29+
block.classList.remove('wrong');
30+
}
31+
}
32+
33+
private calculateDiv(): number {
34+
let div: number = Game.COLUMNS;
35+
switch(this.availableBlocks) {
36+
case 3:
37+
div += 4;
38+
break;
39+
case 2:
40+
div += 2;
41+
break;
42+
case 1:
43+
div += 0;
44+
break;
45+
}
46+
return div;
47+
}
48+
49+
private checkMove(): void {
50+
let wrongBlocks: HTMLElement[] = [];
51+
if (this.level !== 0) {
52+
let auxAvailableBlocks: number = this.availableBlocks;
53+
let foundBlocks: number = 0;
54+
for (let i: number = Game.COLUMNS * this.level; i < Game.COLUMNS * this.level + Game.COLUMNS; i++) {
55+
if (document.getElementById('block' + i).classList.contains('marked')) {
56+
if (!document.getElementById('block' + (i - Game.COLUMNS)).classList.contains('marked')) {
57+
this.availableBlocks--;
58+
wrongBlocks.push(document.getElementById('block' + i));
59+
}
60+
foundBlocks++;
61+
}
62+
}
63+
if (auxAvailableBlocks !== foundBlocks) {
64+
this.availableBlocks -= auxAvailableBlocks - foundBlocks;
65+
}
66+
}
67+
if (this.level === 2 && this.availableBlocks === 3 || this.level === 7 && this.availableBlocks === 2) {
68+
this.availableBlocks--;
69+
}
70+
this.level++;
71+
this.speed *= 1.1;
72+
if (this.availableBlocks === 0) {
73+
this.end(false);
74+
} else {
75+
for (let block of wrongBlocks) {
76+
block.classList.remove('marked');
77+
block.classList.add('wrong');
78+
}
79+
if (this.level === Game.ROWS) {
80+
this.end(true);
81+
}
82+
}
83+
}
84+
85+
private moveBlocks(): void {
86+
let level: number = this.level;
87+
let availableBlocks: number = this.availableBlocks;
88+
let div: number = this.calculateDiv();
89+
let block: number = 0;
90+
let direction: string = 'left';
91+
clearInterval(this.intervals[this.level-1]);
92+
this.intervals[level] = setInterval(function() {
93+
if (block%div >= 0 && block%div < Game.COLUMNS) {
94+
document.getElementById('block' + (block % div + level*Game.COLUMNS)).classList.add('marked');
95+
}
96+
if ((block - availableBlocks) % div >= 0 || (block + availableBlocks) % div >= 0) {
97+
let blockToUncolour = direction === 'left' && block - availableBlocks >= 0 ? block - availableBlocks : block + availableBlocks;
98+
document.getElementById('block' + ((blockToUncolour) % div + level*Game.COLUMNS)).classList.remove('marked');
99+
}
100+
if (block%div === Game.COLUMNS - 2 + availableBlocks && direction === 'left') {
101+
direction = 'right';
102+
} else if (block%div == 1 - availableBlocks && direction === 'right') {
103+
direction = 'left';
104+
}
105+
block = direction === 'left' ? block+1 : block-1;
106+
}, 1/this.speed);
107+
let obj: Game = this;
108+
document.addEventListener('keydown', function(event: any): void {
109+
obj.stopBlocks(event);
110+
});
111+
document.getElementById('go').addEventListener('click', function(event: any): void {
112+
obj.stopBlocks(event);
113+
});
114+
}
115+
116+
private stopBlocks(event: any): void {
117+
if ((event.which === 1 || event.which === 32) && !this.finished) {
118+
this.checkMove();
119+
this.moveBlocks();
120+
event.stopImmediatePropagation();
121+
}
122+
}
123+
124+
private end(won: boolean): void {
125+
this.finished = true;
126+
Game.gameStarted = false;
127+
alert(won ? 'You won!' : 'You lost!');
128+
document.getElementById('go').innerText = 'Play again!';
129+
}
130+
}

‎src/main.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { Game } from "./Game.js";
2+
document.getElementById('go').addEventListener('click', Game.newGame);
3+
document.addEventListener('keydown', Game.newGame);

‎styles.css

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
:root {
2+
--height: 90vh;
3+
--width: calc(var(--height)*(7/12));
4+
--border: 2px solid #1460b6;
5+
}
6+
body {
7+
font-family: Roboto, Arial;
8+
}
9+
.game {
10+
height: var(--height);
11+
width: calc(var(--width) + 1vh);
12+
margin: 0 auto;
13+
}
14+
.block {
15+
background-color : #1555b6;
16+
border-right: var(--border);
17+
border-bottom: var(--border);
18+
height: calc(var(--width)/7 - 2px);
19+
width: calc(var(--width)/7 - 2px);
20+
float: left;
21+
}
22+
.wrong {
23+
transition: 2s;
24+
background-color: #1555b6 !important;
25+
}
26+
.marked {
27+
background-color: white;
28+
}
29+
.block-group div:first-of-type {
30+
border-left: var(--border);
31+
}
32+
#group11 .block {
33+
border-top: var(--border);
34+
}
35+
#group0 .block {
36+
margin-bottom: 10px;
37+
}
38+
.info {
39+
text-align: center;
40+
}

‎tsconfig.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"target": "ES2017",
5+
"outDir": "ts-built",
6+
"rootDir": "src",
7+
"sourceMap": true,
8+
},
9+
"exclude": [
10+
"node_modules"
11+
]
12+
}

0 commit comments

Comments
 (0)
Please sign in to comment.