CYD-hero.html (2460B)
1 <!DOCTYPE html> 2 <html id="background"> 3 <center> 4 <div id="test"> 5 <img id="logo" src="CYD-hero-logo.png"> 6 </div> 7 <hr id="line"> 8 <h1 class="title">About the Project</h1> 9 <hr id="line"> 10 <p class="text"> 11 CYD-hero is a piano tiles inspired game running on a CYD (Cheap-Yellow-Display). The game was created in a single day by Lucas (with graphics and emotional support by Judy). 12 <p class="text"> 13 To play the game, all you have to do is wait for the black tiles to descend from the top of the screen 14 and then hit the corresponding key on the keyboard. 15 </p> 16 </p> 17 <hr id="line"> 18 <h1 class="title">How it was made</h1> 19 <h3 class="title">Day 1 - Bad apple</h3> 20 <p class="text"> 21 The first step to creating CYD-hero was testing out how sounds and notes could be implemented, for that we tinkered with implementing a version of the song "Bad apple" to play on the CYD. The sound is generated by a python program, that parses the sheet music, which generates C code, that generates a final C array, which is played by a for loop (only slightly cursed). 22 </p> 23 <video class="video" height="300px" controls> 24 <source src="Song.mp4" type="video/mp4"> 25 </video> 26 <hr class="line2"> 27 <h3 class="title">Day 2 - CYD-hero</h3> 28 <p class="text">The game is piano tiles! It uses the touch screen to create a touch piano. The entire thing is written in Arduino C. We used TFT_eSPI for the display. The entire game is made of rectangles and rounded rectangles. The devices is the same as with bad apple, just a speaker attached to the CYD.</p> 29 <img class="image" src="Game.jpeg"> 30 <hr id="line"> 31 32 </html> 33 34 35 <style> 36 #background{ 37 background-image: url("wallpaper.gif"); 38 display: grid; 39 } 40 #logo{ 41 display: grid; 42 width: 400px; 43 justify-self: center; 44 image-rendering: pixelated; 45 image-rendering: crisp-edges; 46 } 47 48 #line{ 49 width: 60%; 50 } 51 .title{ 52 display: grid; 53 justify-self: center; 54 font-family: monospace; 55 color: aliceblue; 56 } 57 .text{ 58 display: grid; 59 justify-self: center; 60 color: aliceblue; 61 font-family: monospace; 62 text-align: center; 63 width: 70%; 64 65 66 67 } 68 .video{ 69 display: grid; 70 justify-self: center; 71 } 72 .image{ 73 display: grid; 74 justify-self: center; 75 width: 30%; 76 } 77 .line2{ 78 width: 30%; 79 } 80 81 </style> 82 </center>