$(function(){ //create elements var body = $("body"); var w = 360;//Setting for PC: window.innerWidth; var h = 505;//Setting for PC: window.innerHeight; var canvas = $("

"); //For Sololearn - Comment out this section for PC box = $("

"); var settings; settings = $("

"); var control = new Array(); for(g=0;g<4;g++){ control[g] = $("

"); } box.css({ "width":w+"px", "height":h+"px", "background-color":"none", "display":"inline-block", "position":"relative", "z-index":"1", "margin":"0px" }); settings.css({ "width":"50px", "height":"50px", "background-color":"blue", //"background-image": //"url('https://www.ggcprojekt.co.za/images/Ekans/options.png')", "position":"absolute", "border-radius":"50%", "bottom":"0", "left":"0", "z-index":"5" }); control[0].css({ "width":w+"px", "height":"155px", "background-color":"none", "background-image": "url('https://gavinchristians.com/sololearn/up.png')", "background-size":"cover", "opacity":"0", "position":"absolute", "top":"0", "left":"0", "z-index":"4" }); control[1].css({ "width":(w/2)+"px", "height":"195px", "background-color":"none", "background-image": "url('https://gavinchristians.com/sololearn/right.png')", "background-size":"cover", "opacity":"0", "position":"absolute", "top":"155px", "right":"0", "z-index":"4" }); control[2].css({ "width":w+"px", "height":"155px", "background-color":"none", "background-image": "url('https://gavinchristians.com/sololearn/down.png')", "background-size":"cover", "opacity":"0", "position":"absolute", "bottom":"0", "left":"0", "z-index":"4" }); control[3].css({ "width":(w/2)+"px", "height":"195px", "background-color":"none", "background-image": "url('https://gavinchristians.com/sololearn/left.png')", "background-size":"cover", "opacity":"0", "position":"absolute", "top":"155px", "left":"0", "z-index":"4" }); box.append(canvas); box.append(settings); for(a=0;a<4;a++){ box.append(control[a]); } //-------------------------------------------------------// //style elements body.css({ "background-color":"black", "margin":"0px", "overflow":"hidden" }); canvas.css({ "width":w, "height":h, "background-color":"black", "position":"absolute", //Setting for PC: remove this line "z-index":"2", //Setting for PC: remove this line "margin":"0px" }); //create environment body.append(box); //Setting for PC: body.append(canvas) var ggc = canvas[0].getContext('2d'); ggc.font = "13px Arial"; ggc.textAlign = "start"; //Delcare global variables ///Frame variables var fWidth=360;//Setting for PC: 400 var fHeight=505;//Setting for PC: 400 var gSize=20; var centerX = ((w/2)-(fWidth/2)); var centerY = ((h/2)-(fHeight/2)); ///Grid array var columns = 10; var rows = 20; ///Tetrominoes var tetromino = { I:[ [//Side 1 [1,1,1,1], [0,0,0,0], [0,0,0,0], [0,0,0,0] ], [//Side 2 [1,0,0,0], [1,0,0,0], [1,0,0,0], [1,0,0,0] ], [//Side 3 [1,1,1,1], [0,0,0,0], [0,0,0,0], [0,0,0,0] ], [//Side 4 [1,0,0,0], [1,0,0,0], [1,0,0,0], [1,0,0,0] ] ], O:[ [//Side 1 [2,2,0,0], [2,2,0,0], [0,0,0,0], [0,0,0,0] ], [//Side 2 [2,2,0,0], [2,2,0,0], [0,0,0,0], [0,0,0,0] ], [//Side 3 [2,2,0,0], [2,2,0,0], [0,0,0,0], [0,0,0,0] ], [//Side 4 [2,2,0,0], [2,2,0,0], [0,0,0,0], [0,0,0,0] ] ], T:[ [//Side 1 [3,3,3,0], [0,3,0,0], [0,0,0,0], [0,0,0,0] ], [//Side 2 [0,3,0,0], [3,3,0,0], [0,3,0,0], [0,0,0,0] ], [//Side 3 [0,3,0,0], [3,3,3,0], [0,0,0,0], [0,0,0,0] ], [//Side 4 [3,0,0,0], [3,3,0,0], [3,0,0,0], [0,0,0,0] ] ], S:[ [//Side 1 [0,4,4,0], [4,4,0,0], [0,0,0,0], [0,0,0,0] ], [//Side 2 [4,0,0,0], [4,4,0,0], [0,4,0,0], [0,0,0,0] ], [//Side 3 [0,4,4,0], [4,4,0,0], [0,0,0,0], [0,0,0,0] ], [//Side 4 [4,0,0,0], [4,4,0,0], [0,4,0,0], [0,0,0,0] ] ], Z:[ [//Side 1 [5,5,0,0], [0,5,5,0], [0,0,0,0], [0,0,0,0] ], [//Side 2 [0,5,0,0], [5,5,0,0], [5,0,0,0], [0,0,0,0] ], [//Side 3 [5,5,0,0], [0,5,5,0], [0,0,0,0], [0,0,0,0] ], [//Side 4 [0,5,0,0], [5,5,0,0], [5,0,0,0], [0,0,0,0] ] ], J:[ [//Side 1 [6,6,6,0], [0,0,6,0], [0,0,0,0], [0,0,0,0] ], [//Side 2 [0,6,0,0], [0,6,0,0], [6,6,0,0], [0,0,0,0] ], [//Side 3 [6,0,0,0], [6,6,6,0], [0,0,0,0], [0,0,0,0] ], [//Side 4 [6,6,0,0], [6,0,0,0], [6,0,0,0], [0,0,0,0] ] ], L:[ [//Side 1 [7,7,7,0], [7,0,0,0], [0,0,0,0], [0,0,0,0] ], [//Side 2 [7,7,0,0], [0,7,0,0], [0,7,0,0], [0,0,0,0] ], [//Side 3 [0,0,7,0], [7,7,7,0], [0,0,0,0], [0,0,0,0] ], [//Side 4 [7,0,0,0], [7,0,0,0], [7,7,0,0], [0,0,0,0] ] ] }; var tColors = [ "white", "red",//I "royalblue",//O "yellow",//T "lime",//S "cyan",//Z "magenta",//J "orange"//L ]; var tColors2 = { I:"red",//I O:"royalblue",//O T:"yellow",//T S:"lime",//S Z:"cyan",//Z J:"magenta",//J L:"orange"//L }; var tColors3 = { I:"darkred",//I O:"darkblue",//O T:"rgba(255,255,0,0.5)",//T S:"darkgreen",//S Z:"lightblue",//Z J:"pink",//J L:"orangered"//L }; var tColors4 = [ "white", "darkred",//I "darkblue",//O "rgba(255,255,0,0.5)",//T "darkgreen",//S "lightblue",//Z "pink",//J "orangered"//L ]; var keys=Object.keys(tetromino); ///Other variables var bSize = 20; //Block Size var stepX = 3; var stepY = -2; var $objectCollision = false; var $boundryCollision = false; var $gameOver = false; var $speedUp = false; var $currentPiece = "S"; var $nextPiece = "Z"; var side = 1; var $pause = false; var $start = false; var level = 1; var score = 0; //Create frame & grid function drawFrame(){ ggc.strokeStyle="black"; ggc.beginPath(); //Grid ggc.strokeStyle="rgba(255,255,255,0.1)"; for(x=0;x<10;x++){ for(y=0;y<20;y++){ ggc.strokeRect(centerX+(gSize*x),centerY+(gSize*y),gSize,gSize); } } //Outer frame ggc.strokeStyle="black"; //Setting for PC: white ggc.strokeRect(centerX,centerY,fWidth,fHeight); //Frame divider - Setting for PC: Uncomment //ggc.moveTo(fWidth/2+centerX,((fHeight/2)-(fHeight/2))+centerY); //ggc.lineTo(fWidth/2+centerX,((fHeight/2)+(fHeight/2))+centerY); //Text ggc.fillStyle="white"; ggc.font = "13px Arial"; ggc.fillText("Level: "+level,centerX+220,centerY+150); ggc.fillText("Score: "+score,centerX+220,centerY+180); ggc.stroke(); } //Create grid array var grid = new Array(); for(x=0;x0;a--){ for(x=0;x0;a--){ for(x=0;x19){ //stepY--; $boundryCollision=true; updateGrid(name); return true; } } } } } function gameOver(name){ for(x=0;x<4;x++){ for(y=0;y<4;y++){ if(tetromino[name][side][x][y]){ var condition = grid[stepX+x][0+y]; if(stepY<0&&condition!=0){ $gameOver=true; $start=false; //alert("Game Over!\nLeve reached: "+level+"\nScore: "+score); ggc.fillStyle="black"; ggc.beginPath(); ggc.fillRect(0,200,w,70); ggc.fill(); ggc.lineWidth=2; ggc.strokeStyle="magenta"; ggc.font = "35px Arial"; ggc.strokeText("Game Over",95,235); ggc.lineWidth=1; ggc.fillStyle="magenta"; ggc.font = "14px Arial"; ggc.fillText("Shake phone to play again",100,255); startShake(); //Setting for PC: remove this line return true; } } } } } //////////////////// //Pre-fill grid for test purposes /*for(y=10 ;y9){ return; } } } } stepX++; } catch(ex){ //Ignore } } function downArrow(){ $speedUp = true; } function spacebar(){ try{ for(x=0;x<4;x++){ for(y=0;y<4;y++){ if(tetromino[$currentPiece][(side%3+1)][x][y]){ if(grid[(stepX)+x][stepY+y]){ return; } else if(((stepX)+x)>9){ return; } else if(((stepY+1)+y)>19){ return; } } } } if(side<3){ side++; }else{ side=0; } } catch(ex){ //Ignore } } function pauseBreak(){ $pause=!$pause; } function enter(){ if(!$start){ stopShake(); //Setting for PC - remove this line resetGame(); //window.requestAnimationFrame(mainLoop); startGame(); $start = true; } } //Controls for PC $(document).on("keydown",function(e){ //left arrow (37) if(e.which==37&&!$pause&&$start){ leftArrow(); } //right arrow (39) else if(e.which==39&&!$pause&&$start){ rightArrow(); } //down arrow (40) else if(e.which==40&&!$pause&&$start){ $speedUp = true; } //spacebar (32) else if(e.which==32&&!$pause&&$start){ spacebar(); } //pause/break (19) else if(e.which==19&&$start){ pauseBreak(); //enter (13) } else if(e.which==13){ enter(); } }); var update = new Array(); var time = new Array(); for(t=0;t<10;t++){ time[t]=false; } function checkScore(){ for(t=0;t<10;t++){ if(score>(500*(level))&&!time[t]){ clearInterval(update[level]); level++; startGame(); time[t]=true; } } } function startGame(){ update[level] = setInterval(function(){ if(!$pause&&!$gameOver&&!$speedUp){ updateObjects($currentPiece); } },(1100-(level*100))); } function resetGame(){ stepX = 3; stepY = -2; $objectCollision = false; $boundryCollision = false; $gameOver = false; $speedUp = false; //$currentPiece = "S"; //$nextPiece = "Z"; side = 1; $pause = false; level = 1; score = 0; for(x=0;x

Neon Tetris