//Canvas var C, ctx; //Colors const Col = ["#010", "#fff", "#080", "#008", "#855", "#800"]; //Movements var count = 0; //The player is alerted? var aler = false; //Selected color var zero; //Map of colors var Map = new Array(14); //Canvas size const W = window.innerWidth, H = window.innerHeight; var cW, cH, T; if(H>=W){ cW = W/100*75; cH = cW; T = "vw"; } else { cW = H/100*75; cH = cW; T = "vw"; } //When the page load... $(document).ready(function (){ //Configure canvas let can = document.querySelector("#canvas"); can.style.width = "75"+T; can.style.height = "75"+T; C = document.querySelector("#c"); C.height=cH; C.width=cW; ctx = C.getContext("2d"); //Give the colors to the buttons $("#r").css("background-color", Col[0]); $("#g").css("background-color", Col[1]); $("#b").css("background-color", Col[2]); $("#y").css("background-color", Col[3]); $("#p").css("background-color", Col[4]); $("#o").css("background-color", Col[5]); //Button "click" events $("#r").on("click", () => {r(); update();}); $("#g").on("click", () => {g(); update();}); $("#b").on("click", () => {b(); update();}); $("#y").on("click", () => {y(); update();}); $("#p").on("click", () => {p(); update();}); $("#o").on("click", () => {o(); update();}); $("#reset").on("click", () => {reset(); update();}); //Generate the map generate(); //Mainloop of the game //setInterval(update, 1000/30); update(); }); //Mainloop declare function update(){ //Remaining squares var rest = 0; //Search for new squares to convert, detect how many are missing, etc. for(let x=0;x0){ if(Map[x][y+l]==zero){ Map[x][y+l]=zero; } } else if(y==0&&l<0||y==Map.length-1&&l>0){ if(Map[x+i][y]==zero){ Map[x+i][y]=0; } } else if(Map[x+i][y+l]==zero){ Map[x+i][y+l]=0; } } } } } else { rest++; } } } //If none is missing and you have not yet been alerted of your victory, alert you. if(rest<=0&&!aler){ alert("You win with "+count+" movements! Discuss and compete with other users for the best score!"); aler=true; } //Actualize DOM $("#rest").text(rest); $("#chan").text(count); //Start to draw draw(); } //Declare draw function function draw(){ fillStyle = "#000"; ctx.clearRect(0,0,C.width,C.height); ctx.fillRect(0,0,C.width,C.height); for(let i=0;i

Pixygame 2.0 [Puzzle]