Skip to content

Commit 5153836

Browse files
Sulagna-Dutta-RoySulagna-Dutta-Roy
authored
Merge pull request #2637 from Sourabh782/piano-tiles
Piano tiles
2 parents 7494a2c + 773d2a8 commit 5153836

File tree

4 files changed

+287
-0
lines changed

4 files changed

+287
-0
lines changed

‎Piano Tiles/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Games - Piano Tiles</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
</head>
10+
<body>
11+
<div class="canvasContainer">
12+
<div class="score" id="score">0</div>
13+
<div class="gameEnd none" id="gameEnd">
14+
Opps! Wrong Tile
15+
<br />
16+
<button id="restartBtn">Restart Game</button>
17+
</div>
18+
<div class="gameStart" id="gameStart">
19+
Lets Start Tapping
20+
<br />
21+
<button id="startBtn">Start Playing</button>
22+
</div>
23+
<canvas class="game" id="gameCanvas"></canvas>
24+
</div>
25+
26+
<script src="script.js"></script>
27+
</body>
28+
</html>

‎Piano Tiles/manifest.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "Piano Tiles",
3+
"version": "1.0.0",
4+
"description": "An simple Piano Tiles game",
5+
"manifest_version": 3,
6+
"author": "Sourabh singh rawat",
7+
"action":{
8+
"default_popup": "index.html",
9+
"default_title": "Piano Tiles"
10+
}
11+
}

‎Piano Tiles/script.js

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
var config = {
2+
width: 300,
3+
height: 600,
4+
rows: 6,
5+
cols: 4,
6+
speed: 5,
7+
interval: 20,
8+
};
9+
config.height = 600 - 2;
10+
config.defaultSpeed = config.speed;
11+
var score = 0;
12+
var scoreElement;
13+
var startGameElement, endGameElement;
14+
var scoreElement;
15+
var gameLoop;
16+
var tileRows = [];
17+
var gameCanvas;
18+
var gameContext;
19+
var isGameStarted = false;
20+
document.addEventListener(
21+
"DOMContentLoaded",
22+
function () {
23+
console.log("Script Loaded");
24+
gameCanvas = document.getElementById("gameCanvas");
25+
scoreElement = document.getElementById("score");
26+
startGameElement = document.getElementById("gameStart");
27+
endGameElement = document.getElementById("gameEnd");
28+
gameContext = gameCanvas.getContext("2d");
29+
gameCanvas.style.width = config.width + "px";
30+
gameCanvas.style.height = config.height + "px";
31+
gameCanvas.setAttribute("width", config.width);
32+
gameCanvas.setAttribute("height", config.height);
33+
gameContext.lineWidth = 0.5;
34+
initGame();
35+
},
36+
null
37+
);
38+
39+
function addRow() {
40+
var black_index = Math.floor(Math.random() * config.cols);
41+
var tile_width = config.width / config.cols;
42+
var tile_height = config.height / config.rows;
43+
var y = config.height;
44+
if (tileRows.length > 0) {
45+
var lastRow = tileRows[tileRows.length - 1];
46+
y = lastRow.y + lastRow.height;
47+
}
48+
var row = {
49+
x: 0,
50+
y: y,
51+
width: config.width,
52+
height: config.height / config.rows,
53+
tileWidth: tile_width,
54+
tileHeight: tile_height,
55+
color: "#FFFFFF",
56+
black: {
57+
index: black_index,
58+
color: "#000000",
59+
},
60+
increament: function () {
61+
if (this.y <= 0) {
62+
console.log(this.isValid);
63+
if (!this.isValid) {
64+
console.log("Game Over");
65+
stopGameLoop();
66+
this.y -= config.speed;
67+
displayWrongTile(this, this.black.index);
68+
return;
69+
}
70+
}
71+
this.y = this.y - config.speed;
72+
},
73+
decreament: function () {
74+
this.y = this.y + config.speed;
75+
},
76+
isValid: false,
77+
};
78+
tileRows.push(row);
79+
}
80+
81+
function displayRow(row) {
82+
gameContext.fillStyle = row.color;
83+
gameContext.fillRect(0, row.y, row.width, row.height);
84+
for (var i = 0; i < config.cols; i++) {
85+
gameContext.strokeRect(
86+
i * row.tileWidth,
87+
row.y,
88+
row.tileWidth,
89+
row.tileHeight
90+
);
91+
92+
if (row.black.index == i) {
93+
gameContext.fillStyle = row.black.color;
94+
gameContext.fillRect(
95+
i * row.tileWidth,
96+
row.y,
97+
row.tileWidth,
98+
row.tileHeight
99+
);
100+
}
101+
}
102+
row.increament();
103+
}
104+
function startGameLoop() {
105+
gameLoop = setInterval(function () {
106+
displayAllRow();
107+
}, config.interval);
108+
}
109+
function displayAllRow() {
110+
gameContext.clearRect(0, 0, config.width, config.height);
111+
for (var i = 0; i < tileRows.length; i++) {
112+
displayRow(tileRows[i]);
113+
}
114+
}
115+
116+
function stopGameLoop() {
117+
clearInterval(gameLoop);
118+
gameCanvas.removeEventListener("click", handleGameUserInput);
119+
endGameElement.style.display = "block";
120+
}
121+
122+
function handleGameUserInput(e) {
123+
if (!isGameStarted) {
124+
isGameStarted = true;
125+
startGameLoop();
126+
}
127+
var tile_width = config.width / config.cols;
128+
var tile_height = config.height / config.rows;
129+
var x = e.clientX - gameCanvas.offsetLeft;
130+
var y = e.clientY - gameCanvas.offsetTop;
131+
var clicked_row = Math.ceil(y / tile_height) - 1;
132+
var clicked_col = Math.ceil(x / tile_width) - 1;
133+
for (var i = 0; i < tileRows.length; i++) {
134+
var row = tileRows[i];
135+
if (row.y < y && row.y + row.height > y) {
136+
if (clicked_col === row.black.index) {
137+
if (!row.isValid) {
138+
row.isValid = true;
139+
row.black.color = "#AAAAAA";
140+
score++;
141+
scoreElement.innerHTML = score;
142+
addRow();
143+
} else {
144+
stopGameLoop();
145+
displayWrongTile(row, clicked_col);
146+
}
147+
} else {
148+
stopGameLoop();
149+
displayWrongTile(row, clicked_col);
150+
}
151+
break;
152+
}
153+
}
154+
}
155+
156+
function displayWrongTile(row, col_number) {
157+
gameContext.fillStyle = "#FF0000";
158+
row.decreament();
159+
gameContext.fillRect(
160+
col_number * row.tileWidth,
161+
row.y,
162+
row.tileWidth,
163+
row.tileHeight
164+
);
165+
}
166+
167+
function initGame() {
168+
gameContext.clearRect(0, 0, config.width, config.height);
169+
for (var i = 0; i < config.rows; i++) {
170+
addRow();
171+
}
172+
for (var j = 0; j < 50; j++) {
173+
for (var i = 0; i < tileRows.length; i++) {
174+
tileRows[i].increament();
175+
}
176+
}
177+
for (var i = 0; i < tileRows.length; i++) {
178+
displayRow(tileRows[i]);
179+
}
180+
}
181+
182+
document.getElementById("startBtn").addEventListener("click", startGame)
183+
function startGame() {
184+
endGameElement.style.display = "none";
185+
startGameElement.style.display = "none";
186+
gameCanvas.addEventListener("click", handleGameUserInput);
187+
}
188+
189+
document.getElementById("restartBtn").addEventListener("click", restartGame);
190+
191+
function restartGame() {
192+
tileRows = [];
193+
score = 0;
194+
isGameStarted = false;
195+
config.speed = config.defaultSpeed;
196+
scoreElement.innerHTML = score;
197+
endGameElement.style.display = "none";
198+
initGame();
199+
startGame();
200+
// setTimeout(startGame,1000);
201+
}
202+
203+

‎Piano Tiles/styles.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
body {
2+
margin: 0px;
3+
height: 550px;
4+
width: 450px;
5+
}
6+
.canvasContainer {
7+
margin: 0 auto;
8+
text-align: center;
9+
position: relative;
10+
font-size: 0px;
11+
height: 100%;
12+
width: 100%;
13+
}
14+
.canvasContainer canvas {
15+
border: 0.5px solid #ddd;
16+
}
17+
.canvasContainer .score {
18+
position: absolute;
19+
font-weight: bold;
20+
font-size: 1.5em;
21+
left: 0px;
22+
top: 0px;
23+
width: 100%;
24+
}
25+
.gameEnd,
26+
.gameStart {
27+
position: absolute;
28+
top: 50%;
29+
margin-top: -25px;
30+
left: 0px;
31+
width: 100%;
32+
font-size: 1.5rem;
33+
text-shadow: -1px -1px #fff;
34+
}
35+
.canvasContainer button {
36+
background-color: #fff;
37+
border: 1px solid #aaa;
38+
padding: 10px 15px;
39+
margin-top: 10px;
40+
border-radius: 20px;
41+
cursor: pointer;
42+
}
43+
.none {
44+
display: none;
45+
}

0 commit comments

Comments
 (0)