var can; var c; var AudioContext = window.AudioContext || window.webkitAudioContext; var audioC = null; var game; var frame; window.onload = function(){ can = document.getElementById("can"); can.height = Math.min(window.innerHeight, window.innerWidth * 2) * 0.9; can.width = can.height / 2; c = can.getContext("2d"); loopStarted = false; can.addEventListener("mousedown", function(e){ if(game.reseting){ return; } if(audioC === null){ audioC = new AudioContext(); var notes = new Notes(audioC); game.setNotes(notes); } var rect = can.getBoundingClientRect(); var x = (e.clientX - rect.left) / can.width; var y = (e.clientY - rect.top) / can.height; game.input(x, y); }); /* this.can.addEventListener("touchstart", function(e){ if(game.reseting){ return; } if(audioC === null){ audioC = new AudioContext(); var notes = new Notes(audioC); game.setNotes(notes); } var rect = can.getBoundingClientRect(); var x = (e.clientX - rect.left) / can.width; var y = (e.clientY - rect.top) / can.height; game.input(x, y); }) */ game = new Game(); frame = 0; loop(); } window.onresize = function(){ can.height = Math.min(window.innerHeight, window.innerWidth * 2) * 0.9; can.width = can.height / 2; c = can.getContext("2d"); } window.ondeviceorientation = function(){ can.height = Math.min(window.innerHeight, window.innerWidth * 2) * 0.9; can.width = can.height / 2; c = can.getContext("2d"); } function loop(){ c.clearRect(0, 0, can.width, can.height); game.update(); game.render(c, can.width, can.height, frame); frame++; requestAnimationFrame(loop); } function Notes(audioC){ this.oscillators = []; this.gains = []; for(var i=1;i<=88;i++){ this.oscillators.push(audioC.createOscillator()); this.gains.push(audioC.createGain()) this.oscillators[i-1].connect(this.gains[i-1]); this.gains[i-1].connect(audioC.destination); this.oscillators[i-1].frequency.value = Math.pow(Math.pow(2, 1/12), i-49) * 440; this.gains[i-1].gain.value = 0; this.oscillators[i-1].start(); } this.update = function(){ for(var i=0;i this.tilesAmount + 3){ for(var i=0;i x*this.rows){ this.notes.playNote(this.tiles[this.atTile % this.tilesAmount].n); this.tiles[this.atTile % this.tilesAmount].played = true; this.atTile++; if(this.speed == 0){ this.speed = 0.005; }else{ this.speed += 0.002; } }else{ this.reseting = true; this.speed = 0; this.tiles[this.atTile % this.tilesAmount].failed = true; window.setTimeout(function(){ game.reset(); }, 2000); } } } function Tile(left, n){ this.left = left; this.n = n; this.played = false; this.failed = false; this.render = function(c, top, width, height, frame){ if(this.failed){ c.fillStyle = "#ff4262"; if(frame % 30 < 15){ c.fillRect(Math.round(this.left * width), Math.round(top * height), Math.ceil(width), Math.ceil(height)); } }else{ if(this.played){ c.fillStyle = "rgba(0, 0, 0, 0.2)"; }else{ c.fillStyle = "#000000"; } c.fillRect(Math.round(this.left * width), Math.round(top * height), Math.ceil(width), Math.ceil(height)); } } this.renderTap = function(c, top, width, height, frame){ c.fillStyle = "#FFFFFF"; c.textAlign = "center"; c.font = "30px Arial"; c.fillText("tap", Math.round(this.left * width + width/2), Math.round(top * height + height/2)); } }

piano tile