Skip to content

Commit

Permalink
PianoTiles
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibgarrido
ibgarrido committed Apr 26, 2024
1 parent 501e786 commit 7c7f134
Show file tree
Hide file tree
Showing 5 changed files with 333 additions and 0 deletions.
28 changes: 28 additions & 0 deletions projects/pianoTiles/about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>About This game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="right-container">
<h1>About This Game</h1>
<p>
This is a modified version of the game Piano Tiles. The Game end when your score is -1 (Always you miss a block you lose a point).
The porpuse of this game is to train the detection of images. The game is simple, you have to click on the black blocks and avoid clicking on the white blocks.
</p>
<p>
The code was develop based on github user eecheng87. This code was incomplete but it has a pretty good base to start with. I have added some features to the game
that were missing in the original code.
</p>
<a href="https://github.com/eecheng87/piano-tiles">Here is the original Code</a>
<br>
<br>

<a href="index.html" class="btn">Back to Game</a>
</div>



</body>
</html>
28 changes: 28 additions & 0 deletions projects/pianoTiles/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<head>
<link rel="stylesheet" href="style.css">
<title>Piano Tiles</title>
</head>
<body>
<canvas id="score" width="300" height="70" style="position: absolute; left:43%;top: 0;"></canvas>
<canvas id="background" width="300" height="600" style="position: absolute; top:70; left: 36%;" ></canvas>
<canvas id="piano" width="300" height="600" style="position: absolute; top:70; left: 36%;"></canvas>
<div id="container">
<div id="btn">
<button id="start_btn">Start</button>
</div>
<input type="range" id="speed" min="1" max="100" value="1">
<div id="dif_text">difficulty</div>
<br>

</div>
<div class="right-container">
<a href="about.html"><button id="about-this-game">About this Game</button></a>
</div>

<script src="script.js"></script>
<script>


</script>
</body>
</html>
208 changes: 208 additions & 0 deletions projects/pianoTiles/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
// we define the variables we will use in the game (Format: Canvas/Context/Element)
var piano = document.getElementById("piano");
var pianoContext = piano.getContext("2d");
var background = document.getElementById("background");
var backgroundContext = background.getContext("2d");
var score = document.getElementById("score");
var scoreContext = score.getContext("2d");

// Tiles
// We can add more tiles by increasing the number of tiles and the tileState array
var tiles = []; //store tiles
var numberOfTiles = 4;
var tileState = [false, false, false, false];
var currentScore = 0;
// time
var intervalTmp;
var geneTmp;

// start game
var startButton = document.getElementById("start_btn");
startButton.addEventListener("click", function() {
startGame();
startButton.innerHTML = "";
startButton.disabled = true;
});

function startGame(){
difficult = document.getElementById("speed").value; //recieve speed in percentage
intervalTmp = window.setInterval(update,4); // Update the game every 4ms
geneTmp = window.setInterval(blockGenerator, getDif(difficult)); // Generate a block every 600ms
}

// Function to calculate speed based on a percentage from 1% to 100% (TY chatGPT)
function getDif(percentage) {
if (percentage < 1 || percentage > 100) {
throw new Error("Percentage must be between 1 and 100.");
}

// The linear formula to map percentage to speed
const speed = 600 - 5 * (percentage - 1);
console.log(speed)
return speed; // Returns the calculated speed
}


/* STATIC PART */

// Function to create where tiles fall from.
function ShowWindow(){
my_gradient = backgroundContext.createLinearGradient(0,0,0,600);
my_gradient.addColorStop(0,"rgba(65,234,246,0.6)");
my_gradient.addColorStop(1,"rgba(254,74,251,0.5)");

backgroundContext.fillStyle = my_gradient;
backgroundContext.fillRect(0,0,300,600);

//This part creates a line between MoveTo(X,Y) (Initial Point) to LineTo(X,Y) (Final Point)
backgroundContext.beginPath();
backgroundContext.moveTo(72,0);
backgroundContext.lineTo(72,600);
backgroundContext.strokeStyle = "white";
backgroundContext.stroke();

backgroundContext.beginPath();
backgroundContext.moveTo(148,0);
backgroundContext.lineTo(148,600);
backgroundContext.strokeStyle = "white";
backgroundContext.stroke();

backgroundContext.beginPath();
backgroundContext.moveTo(226,0);
backgroundContext.lineTo(226,600);
backgroundContext.strokeStyle = "white";
backgroundContext.stroke();

backgroundContext.beginPath();
backgroundContext.moveTo(0,470);
backgroundContext.lineTo(300,470);
backgroundContext.strokeStyle = "white";
backgroundContext.stroke();
}


/* DYNAMIC PART */

function showScore(){
scoreContext.fillStyle = "black";
scoreContext.font = "20px Arial";
scoreContext.fillText("Score: "+currentScore, 10, 50);
if (currentScore < 0) {
clearInterval(intervalTmp);
clearInterval(geneTmp);
alert("Game Over");
for (var i = 0; i < numberOfTiles; i++) {
if (tileState[i]) {
tileState[i] = false;
tiles[i].live = false;
pianoContext.clearRect(tiles[i].x, tiles[i].y, tiles[i].width, tiles[i].height);
}
}
}
}

// This function first 'choose' randomly in what tile the block will fall, then it will draw the block in the tile.
function blockGenerator(){
var i;
var randomBlock = Math.floor(Math.random()*numberOfTiles);
var flag = true; // This flag will be used to check if there is any tile available to fall the block.
for(i = 0; i < numberOfTiles; i++){ // This loop will check if there is any tile available to fall the block.
if(tileState[i] == false){
flag = false;
}
}
if (flag){
return;
}
while(tileState[randomBlock] == true){ // This loop will choose randomly a tile to fall the block.
randomBlock = Math.floor(Math.random()*numberOfTiles);
}
tiles[randomBlock] = new Block(randomBlock);
}

function Block(index){
if(!tileState[index])
tileState[index] = true;

this.index = index;
this.appearPos = Math.floor(Math.random()*4);

this.width = 70;
this.height = 120;
this.color = "black";
switch(this.appearPos){
case 0:
this.x = 0;
this.y = -120;
break;
case 1:
this.x = 75;
this.y = -120;
break;
case 2:
this.x = 152;
this.y = -120;
break;
case 3:
this.x = 228;
this.y = -120;
break;
}
pianoContext.fillStyle = this.color;
pianoContext.fillRect(this.x,this.y,this.width,this.height);
this.live = true;

}

function update() {
pianoContext.clearRect(0, 0, 300, 600);
for (var i = 0; i < numberOfTiles; i++) {
if (tileState[i]) {
tiles[i].y += 1;
pianoContext.fillStyle = tiles[i].color;
pianoContext.fillRect(tiles[i].x, tiles[i].y, tiles[i].width, tiles[i].height);
if (tiles[i].y > 470) {
tileState[i] = false;
tiles[i].live = false;
currentScore -= 1; // subtract one point
scoreContext.clearRect(0, 0, 300, 600);
showScore();
}
}
}
checkCollision();
}
function checkCollision() {
for (var i = 0; i < numberOfTiles; i++) {
if (tileState[i]) {
if (tiles[i].y > 470) {
tileState[i] = false;
tiles[i].live = false;
currentScore -= 1; // subtract one point
scoreContext.clearRect(0, 0, 300, 600);
showScore();
}
}
}
}

piano.addEventListener("click", function (event) {
var rect = piano.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
for (var i = 0; i < numberOfTiles; i++) {
if (tileState[i] && x >= tiles[i].x && x <= tiles[i].x + tiles[i].width && y >= tiles[i].y && y <= tiles[i].y + tiles[i].height) {
tileState[i] = false;
tiles[i].live = false;
currentScore += 1;
scoreContext.clearRect(0, 0, 300, 600);
showScore();
}
}
});




ShowWindow();
showScore();
62 changes: 62 additions & 0 deletions projects/pianoTiles/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
#btn{
position: absolute;
top: 700;
left: 36%;
width: 300px;
height: 50px;
}
#start_btn {
position: relative;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
display: block;
font-size: 1.3em;
width: 100px;
height: 100px;
font-weight: light;
font-family: 'Trebuchet MS', sans-serif;
text-align: center;
line-height: 100px;
letter-spacing: -1px;
color: white;
border: none;
border-radius: 50%;
background: #5a99d4;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(#5a99d4, .5);
transition: width 0.9s, height 0.9s ;
}
#start_btn:hover{
width: 105px;
height: 105px;
}

#about-this-game {
position: absolute;
font-size: 1.3em;
color: white;
text-decoration: none;
font-family: 'Trebuchet MS', sans-serif;
font-weight: bold;
text-shadow: 0 0 5px rgba(8, 8, 8, 0.5);
}

body {
background: #36D1DC; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #5B86E5, #36D1DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.container {
position: relative;
width: 200%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

7 changes: 7 additions & 0 deletions projects/projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ <h1>Proyectos personales 📊:</h1>

<list>
<li><a href="mapaUC/download.html">Mapa UCé - Android Studio App</a></li>
<br>
</list>
<list>
<li><a href="pianoTiles/index.html">Piano Tiles Para entrenamiento de detección de imagenes</a></li>
<br>
</list>
</div>

Expand All @@ -27,6 +32,8 @@ <h1>Visualizaciones 🌌</h1>
</list>
</div>



<div class="center-container">
<button class="button" onclick="window.location.href='../index.html'">Volver al inicio</button>
</div>
Expand Down

0 comments on commit 7c7f134

Please sign in to comment.