Provo a marcarle in rosso...
<!DOCTYPE html> <html> <head> <script> var canvas; var ctx; //memorizziamo le immagini var back = new Image(); var oldBack=new Image(); var ship=new Image(); //memorizziamo le coordinate var shipX=0; var shipY=0; var oldShipX=0; var oldShipY=0; function canvasSpaceGame(){ canvas=document.getElementById("myCanvas"); ctx=canvas.getContext("2d"); ctx.fillStyle="black"; ctx.rect(0,0,300,300); ctx.fill(); back=ctx.getImageData(0,0,30,30); stars(); makeShip(); gameLoop = setInterval(doGameLoop, 16); window.addEventListener('keydown', whatKey, true); } function stars(){ for(var i=0;i<50;i++){ x=Math.floor(Math.random()*299); y=Math.floor(Math.random()*299); ctx.fillStyle="yellow" if (x<30 || y<30) ctx.fillStyle="black"; ctx.beginPath(); ctx.arc(x,y,3,Math.PI*2,false); ctx.closePath(); ctx.fill(); oldBack=ctx.getImageData(0,0,30,30); } } function makeShip() { ctx.beginPath(); ctx.moveTo(28.4, 16.9); ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0); ctx.bezierCurveTo(9.1, 22.0, 3.6, 19.7, 3.6, 16.9); ctx.bezierCurveTo(3.6, 14.1, 9.1, 11.8, 16.0, 11.8); ctx.bezierCurveTo(22.9, 11.8, 28.4, 14.1, 28.4, 16.9); ctx.closePath(); ctx.fillStyle = "rgb(222, 103, 0)"; ctx.fill(); ctx.beginPath(); ctx.moveTo(22.3, 12.0); ctx.bezierCurveTo(22.3, 13.3, 19.4, 14.3, 15.9, 14.3); ctx.bezierCurveTo(12.4, 14.3, 9.6, 13.3, 9.6, 12.0); ctx.bezierCurveTo(9.6, 10.8, 12.4, 9.7, 15.9, 9.7); ctx.bezierCurveTo(19.4, 9.7, 22.3, 10.8, 22.3, 12.0); ctx.closePath(); ctx.fillStyle = "rgb(51, 190, 0)"; ctx.fill(); ship=ctx.getImageData(0,0,30,30); ctx.putImageData(oldBack, 0, 0); } window.addEventListener("load",function(){canvasSpaceGame()}); </script> </head> <body> <canvas id="myCanvas" width="300" height="300"> </canvas> </body> </html>Ho marcato in verde le variabili globali, in rosso le istruzioni che memorizzano in una variabile delle immagini o le rimettono sul canvas (a quanto ho capito adesso) e in blu due righe che poco ancora capisco, di cui una aggiunge un evento da tastiera.
Ho notato che putImageData, da quanto riesco a capire, rimette sullo schermo il contenuto di immagine immagazzinato in una variabile precedentemente, e infatti rimettendo alle coordinate 0 e 0 oldBack nasconde l'astronave...
Nessun commento:
Posta un commento