var canvas, c, clientHeight, clientWidth, sX, sY, width, height; var level=0, score=0, curClearedRows=0; var scoreText, soundButton, pauseButton, ghostButton, gameOverScreen; var initialSpeed=800,//The lower, the faster. Don't put it under 0. normalSpeed=0, speed=0; //Set this to false if you don't // want the hollow box at the bottom. var ghosting = true; var grid= new Array(10); var list=[]; var scale, h; var cur; var ghost; var rowsToClear=[]; var gameTimer; var audio; var isPlaying=false; var isMoving=false; var paused =false ; var animating; var loaded = true; var timeElapsed=0; var backgroundImage = new Image(); var hasTouch = true; var mouse = {x:0,y:0,isDown:false}; var dropped = false; var fastend = false; var animTime = 0; var animState = false; //var soundEffect = new Audio("http://s1.vocaroo.com/media/download_temp/Vocaroo_s1RoC61k9DP0.mp3"); var Tetro = {//how much deg, current I:[[0,0],[0,-1],[0,1],[0,2],90,0, [ 33, 183, 181 ]], J:[[0,0],[-1,-1],[0,-1],[0,1],360,0, [ 40, 88, 191 ]], L:[[0,0],[1,-1],[0,-1],[0,1],360,0, [ 224, 136, 74 ]], O:[[0,0],[0,1],[1,0],[1,1],0,0, [ 229, 226, 59 ]], S:[[0,0],[0,-1],[-1,-1],[1,0],90,0, [ 42, 168, 0 ]], T:[[0,0],[0,-1],[-1,0],[1,0],360,0, [108, 58, 165]], Z:[[0,0],[0,-1],[1,-1],[-1,0],90,0, [ 216, 62, 62 ]] }; var Points = [40,100,300,1200]; window.onload = function() { //backgroundImage.src = "http://iyask.me/content/images/2017/01/universe-stars-background-wallpaper-3.jpg"; audio = document.getElementById("song"); scoreText= document.getElementById("scoretext"); gameOverScreen = document.getElementById("gameoverscreen"); soundButton = document.getElementById("mute"); pauseButton = document.getElementById("pause"); //ghostButton = document.getElementById("button-ghosting"); // audio = document.getElementById("song"); // audio.volume = 0.2; hasTouch = isTouchDevice(); canvas = document.getElementById("canvas"); c = canvas.getContext("2d"); var original_fillRect = CanvasRenderingContext2D.prototype.fillRect; var original_strokeRect = CanvasRenderingContext2D.prototype.strokeRect; speed = normalSpeed = initialSpeed; window.addEventListener('resize', resizeCanvas, false); resizeCanvas(); CanvasRenderingContext2D.prototype.fillRect = function() { original_fillRect.apply(this, [arguments[0]+sX, arguments[1]+sY, arguments[2], arguments[3]]); }; CanvasRenderingContext2D.prototype.strokeRect = function() { original_strokeRect.apply(this, [arguments[0]+sX, arguments[1]+sY, arguments[2], arguments[3]]); }; alert("\nThank you all so much for 1ooo likes!!! ^_^\n\nThe music is not available right now!"); alert("Controls:\n\nMove left = click left\nMove right = click right\nRotate = click middle\nGo down fast = drag down and hold\nDrop: swipe down fast\n\nNEW--\nRe-adjusted the whole game and gave full support for non Touch devices.(PC)!"); canvas.style.display = "inline"; soundButton.style.display = "inline"; pauseButton.style.display = "inline"; var startY=0, targetDist=20; if( hasTouch ){ //Drag movement window.addEventListener( "touchstart", onMouseDown ); window.addEventListener( "touchend", onMouseUp ); window.addEventListener( "touchmove", onMouseMove ); //Button interaction document.getElementById("button-left").addEventListener( "touchend", btnLeftClick ); document.getElementById("button-right").addEventListener( "touchend", btnRightClick ); document.getElementById("button-rotate").addEventListener( "touchend", btnRotateClick ); } else{ //Drag movement window.addEventListener( "mousedown", onMouseDown ); window.addEventListener( "mouseup", onMouseUp ); window.addEventListener( "mousemove", onMouseMove ); //Button interaction document.getElementById("button-left").addEventListener( "mouseup", btnLeftClick ); document.getElementById("button-right").addEventListener( "mouseup", btnRightClick ); document.getElementById("button-rotate").addEventListener( "mouseup", btnRotateClick ); } function btnLeftClick(){ //console.log("isMoving="+isMoving+" fastend="+fastend+" dropped="+dropped); if(paused)return; if((isMoving || fastend ) && !dropped){ fastend = false; return; } moveBtn(-1,0); dropped = false; fastend = false; } function btnRotateClick(){ //console.log("isMoving="+isMoving+" fastend="+fastend+" dropped="+dropped); if(paused)return; if((isMoving || fastend ) && !dropped){ fastend = false; return; } turnBtn(90); dropped = false; fastend = false; } function btnRightClick(){ //console.log("isMoving="+isMoving+" fastend="+fastend+" dropped="+dropped); if(paused)return; if((isMoving || fastend ) && !dropped){ fastend = false; return; } moveBtn(1,0); dropped = false; fastend = false; } document.getElementById("button-restart").addEventListener ("click", function(){ restartGame(); },false); function onMouseMove( e ){ if(paused)return; //Update the Mouse Position for the getMousePosition function mouse.x = x; mouse.y = y; if(!mouse.isDown)return; // e.preventDefault(); var x=hasTouch?e.touches[ 0 ].clientX:e.clientX; var y=hasTouch?e.touches[ 0 ].clientY:e.clientY; var dist = y-startY; var tspeed=normalSpeed; if( dist>targetDist ){ tspeed = 80; isMoving = true; fastend=true; } speed = tspeed; } function onMouseDown( e ){ if(paused)return; var x=hasTouch?e.touches[ 0 ].clientX:e.clientX; var y=hasTouch?e.touches[ 0 ].clientY:e.clientY; startTime = new Date(); startY = y; mouse.isDown = true; } function onMouseUp(){ if(paused)return; mouse.isDown = false; if(isMoving){ isMoving = false; fastend = false; speed=normalSpeed; var endTime = new Date(); var timeDiff = (endTime - startTime)/1000; if(timeDiff < 0.3){ raiseScore(10); dropped = false; cur.y = ghost.y; timeElapsed=normalSpeed; } } } soundButton.addEventListener ("click", function(){/* return; var cross = document.getElementById("cross"); if(!isPlaying){ //audio.volume = 0.2; //audio.play(); cross.style.display = "none"; } else{ //audio.pause(); cross.style.display = "inline"; } isPlaying = !isPlaying;*/ },false); pauseButton.addEventListener ("click", function(){ paused = !paused; if(paused){ animTime=0; animState=false; } },false); for(var i=0;i0;i--){ ghost.y--; if(!isValidPosition(ghost)){ ghost.y++; break; } } } function gameLoop(){ if(!loaded)return; timeElapsed += 100; drawBackground(); drawGame(); if(!animating&&!paused&&timeElapsed>=speed){ move(0,-1); if(!isValidPosition(cur)){ //console.log("isMoving="+isMoving+" fastend="+fastend+" dropped="+dropped); move(0,1); mouse.isDown = false; if(isGameOver()){ gameOver(); return; } raiseScore(10); addTetroToGrid(); deleteFullRows(); if(isMoving){ isMoving=false; raiseScore(5); } speed=normalSpeed; new Tetromino( randomProperty(Tetro)); updateGhost(); //console.log("isMoving="+isMoving+" fastend="+fastend+" dropped="+dropped); } timeElapsed=0; } } function isGameOver(){ var t = cur.tet; for(var i=0;i<4;i++){ var x = cur.x + t[i][0]; var y = cur.y + t[i][1]; if(y==h)return true; } return false; } function clearGrid(){ for(var x=0;x<10;x++){ for(var y=0;y=6){ curClearedRows=0; level++; normalSpeed-=80; } scoreText.innerHTML="Level:"+level+" Score:"+score; } function deleteFullRows(){ var count=0, rows=[]; for (var y = 0; y < h-1; y++) { if (isRowFull(y)) { count++; rows.push(y); //--y; } } if(count==0)return; raiseScoreByRows(count) var i = 4; animating = true; var timer = setInterval(function(){ if(i==0){ var bai = 0; clearInterval(timer); for(var n=0;n=h)continue; if(grid[x][y]){ //console.log("true"); return false; } } return true; } function isInsideBorders(instance){ var t = instance.tet; for(var i=0;i<4;i++){ if(instance.x+t[i][0]<0 || instance.x+t[i][0]>9 ) return false; if(instance.y+t[i][1]<0) return false; } return true; } function moveBtn(dirX, dirY){ move(dirX,dirY); if(!isValidPosition(cur)){ move(-dirX,dirY); } updateGhost(); } function move(dirX, dirY){ cur.x += dirX; cur.y += dirY; } var randomProperty = function (obj) { var keys = Object.keys(obj) //return Tetro.I; return obj[keys[ keys.length * Math.random() << 0]]; }; function turnBtn(angle){ if(cur.rot==0)return; if(cur.rot==90){ if(cur.curRot==90){ angle=-90; if (turn(angle)) cur.curRot =0; } else{ if (turn(angle)) cur.curRot =90; } } else { turn(angle); } //ghost.tet = cur.tet; updateGhost(); } function turn(angle){ var t = cur.tet; for(var i=0;i<4;i++){ var x = t[i][0]; var y = t[i][1]; var sin = angle < 0 ? -1 : 1; var newY = -x * sin; var newX = y * sin; t[i][0] = newX; t[i][1] = newY; } if(!isValidPosition(cur)) { turn(-angle); return false; } return true; } function drawGame(){ var t = cur.tet; if(ghosting && ghost){ var gt = ghost.tet; //Draw Ghost for(var i=0;i<4;i++){ var x = ghost.x + gt[i][0]; var y = ghost.y + gt[i][1]; drawTile(x,y,[47,47,47], 0.3); } } //Draw Player for(var i=0;i<4;i++){ var x = cur.x + t[i][0]; var y = cur.y + t[i][1]; drawTile(x,y,cur.color); } //Draw Grid for(var x=0;x<10;x++){ for(var y=0;y= 0.71){ clientWidth = canvas.width = window.innerWidth; clientHeight = canvas.height = window.innerHeight; width = Math.ceil(window.innerHeight*10/16); height = clientHeight; sX = (clientWidth-width) *0.5; sY = 0; } else{ width = clientWidth = canvas.width = window.innerWidth; height = clientHeight = canvas.height = window.innerHeight; sX = 0; sY = 0; } scale = width/12; h = Math.floor(height/scale); } /** * By Ken Fyrstenberg Nilsen * * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]]) * * If image and context are only arguments rectangle will equal canvas */ function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) { return; if (arguments.length === 2) { x = y = 0; w = ctx.canvas.width; h = ctx.canvas.height; } /// default offset is center offsetX = typeof offsetX === 'number' ? offsetX : 0.5; offsetY = typeof offsetY === 'number' ? offsetY : 0.5; /// keep bounds [0.0, 1.0] if (offsetX < 0) offsetX = 0; if (offsetY < 0) offsetY = 0; if (offsetX > 1) offsetX = 1; if (offsetY > 1) offsetY = 1; var iw = img.width, ih = img.height, r = Math.min(w / iw, h / ih), nw = iw * r, /// new prop. width nh = ih * r, /// new prop. height cx, cy, cw, ch, ar = 1; /// decide which gap to fill if (nw < w) ar = w / nw; if (nh < h) ar = h / nh; nw *= ar; nh *= ar; /// calc source rectangle cw = iw / (nw / w); ch = ih / (nh / h); cx = (iw - cw) * offsetX; cy = (ih - ch) * offsetY; /// make sure source rectangle is valid if (cx < 0) cx = 0; if (cy < 0) cy = 0; if (cw > iw) cw = iw; if (ch > ih) ch = ih; /// fill image in dest. rectangle ctx.drawImage(img, cx, cy, cw, ch, x, y, w*2, h*2); } //From Stackoverflow !! function isTouchDevice() { return 'ontouchstart' in window || navigator.maxTouchPoints; } function getMousePos(){ return mouse; }

Tetris (Blockz)