Rotoshift Source Code

<canvas id = "ctx" width = "350" height = "400" style = "border:3px solid #000000;"></canvas>

<script type = "text/javascript">
var ctx = document.getElementById("ctx").getContext("2d");

function clearScreen()
{
ctx.fillStyle= "white";
ctx.fillRect(0, 0, 350, 400);
}

function square(col, row, type/* colour*/)
{
this.row = row;
this.col = col;
this.type = type;
}

square.prototype.draw = function()
{
var sqCol;

switch(this.type)
{
default:

sqCol = "white";
break;

case 0:

sqCol = "white";

break;
case 1:

sqCol = "red";

break;
case 2:

sqCol = "blue";

break;
case 3:

sqCol = "green";

break;
case 4:

sqCol = "purple";

break;
case 5:

sqCol = "black";

break;


}
ctx.beginPath();
ctx.lineWidth = "2";
ctx.strokeStyle = "black";
ctx.rect(50*this.col, 50*this.row, 50, 50);
ctx.fillStyle = sqCol;
ctx.fillRect(50*this.col, 50*this.row, 50, 50);
ctx.stroke();
}

square.prototype.changeTo = function(type)
{
this.type = type;
}

square.prototype.flip = function()
{
if(this.type < 5 && this.type > 0)
{
clickCount ++;
updateClick();

if(this.type == 1)
{
this.type = 2;
}
else if(this.type == 2)
{
this.type = 1;
}
else if(this.type == 3)
{
this.type = 4;
}
else if(this.type == 4)
{
this.type = 3;
}
}
}

square.prototype.getType = function()
{
return this.type;
}



function getMousePos(ctx, evt)
{
var rect = document.getElementById("ctx").getBoundingClientRect();

return{ x: evt.clientX-rect.left, y: evt.clientY - rect.top };

}


document.getElementById("ctx").addEventListener('click', function(evt)
{
var mousePos = getMousePos(ctx, evt);

if(victoryOn == true)
{
victoryOn = false;
Menu();
}
else
{
if(gameOn == true)
{
var Col = Math.floor(mousePos.x/50);
var Row = Math.floor(mousePos.y/50);
if(Col > 4 && Row > 6)
{
gameOn = false;
clearInterval(gameLoop);
Menu();
}
else if(Col >= 0 && Row < 7)
{
grid[Col][Row].flip()

drawGrid();
}
}
else
{
var Col = Math.floor(mousePos.x/175);
var Row = Math.floor((mousePos.y-250)/30);

if(Col == 1 && Row == 4)
{
//alert("Highscores!");
}
else
{
levelNum = (Row * 2 + Col) + 1;
level = levelNum;
//alert("Clicked in Col " + Col + ", Row " + Row);
//alert("Level " + levelNum);
if(levelNum > 0 && levelNum < 10)
{
gameOn = true;
clearScreen();
NewGame(levelNum);
}
}
}
}
}, false);

function createGrid()
{

for(var i = 0; i < 7; i ++)
{
for(var j = 0; j < 7; j ++)
{
sq = new square(i, j, 0);

//sq.draw();

grid[i][j] = sq;


/*ctx.fillStyle = "#000000";
ctx.lineWidth= "4";
ctx.strokeStyle = "blue";
ctx.fillRect(50*sq.row, 50*sq.col, 50, 50);
ctx.stroke();*/

}
}
}

function drawGrid()
{
for(var i = 0; i < 7; i ++)
{
for(var j = 0; j < 7; j ++)
{
grid[i][j].draw();
}
}
}

function x_shift()
{
var shift = 0;

for(var i = 0; i < 7; i ++)
{
for(var j = 0; j < 7; j ++)
{
if(grid[i][j].getType() == 1)
{
if(i < pos[0])
{
shift ++;
}
else if(i > pos[0])
{
shift --;
}
}
else if(grid[i][j].getType() == 2)
{
if(i < pos[0])
{
shift --;
}
else if(i > pos[0])
{
shift ++;
}
}
else if(grid[i][j].getType() == 3)
{
if(j < pos[1])
{
shift --;
}
else if(j > pos[1])
{
shift ++;
}
}
else if(grid[i][j].getType() == 4)
{
if(j < pos[1])
{
shift ++;
}
else if(j > pos[1])
{
shift --;
}
}
}
}

return shift;
}

function y_shift()
{
var shift = 0;

for(var i = 0; i < 7; i ++)
{
for(var j = 0; j < 7; j ++)
{
if(grid[i][j].getType() == 1)
{
if(j < pos[1])
{
shift ++;
}
else if(j > pos[1])
{
shift --;
}
}
else if(grid[i][j].getType() == 2)
{
if(j < pos[1])
{
shift --;
}
else if(j > pos[1])
{
shift ++;
}
}
else if(grid[i][j].getType() == 3)
{
if(i < pos[0])
{
shift ++;
}
else if(i > pos[0])
{
shift --;
}
}
else if(grid[i][j].getType() == 4)
{
if(i < pos[0])
{
shift --;
}
else if(i > pos[0])
{
shift ++;
}
}
}
}

return shift;
}

function move()
{
var x = pos[0] + x_shift();
var y = pos[1] + y_shift();

x = ((x%7)+7)%7;
y = ((y%7)+7)%7;

grid[pos[0]][pos[1]].changeTo(0);
grid[x][y].changeTo(5);

pos[0] = x;
pos[1] = y;
}

function checkClear()
{
var gridClear = true;

for(var i = 0; i < 7; i ++)
{
for(var j = 0; j < 7; j ++)
{
if(grid[i][j].getType() > 0 && grid[i][j].getType() < 5)
{
gridClear = false;
}
}
}

return gridClear;
}

function updateClick()
{
ctx.fillStyle = "white";
ctx.fillRect(3, 355, 200, 20);


ctx.font = "24px Calibri";
ctx.fillStyle = "black";
ctx.fillText("Clicks: " + clickCount, 5, 375);
}

function update()
{
if(checkClear() == true)
{
clearInterval(gameLoop);
//alert("Victory!" + "\nIn " + clickCount + " clicks!");


gameOn = false;
scores[level-1] = clickCount;
victoryOn = true;
clearScreen();





ctx.font = "24px Calibri";
ctx.fillStyle = "black";

ctx.fillText("Victory!", 45, 85);

if(clickCount == par[level-1])
{
ctx.fillText("Par!", 45, 105)
}
else if(clickCount < par[level-1])
{
ctx.fillText("You beat par!", 45, 105);
}
else
{
ctx.fillText("But you didn't meet par...", 45, 105);
}

ctx.fillText("Clicks: " + clickCount, 45, 125);


localStorage.setItem("scores", JSON.stringify(scores));


if(victoryOn == false)
{
Menu();
}


}
else
{
move();

drawGrid();
}
}

//sq = new square(0, 0/*, 6, #000000*/);

//ctx.fillRect(sq.row, sq.col, 50, 50);




function NewGame(nlvl)
{
pos[0] = 3;
pos[1] = 3;
clickCount = 0;

victoryOn = false;

createGrid();

grid[3][3].changeTo(5);

switch(nlvl)
{
case 1:

grid[0][3].changeTo(1);
grid[6][3].changeTo(1);

break;
case 2:

grid[0][3].changeTo(1);
grid[1][2].changeTo(2);
grid[2][3].changeTo(1);
grid[6][3].changeTo(3);
grid[4][5].changeTo(4);

break;
case 3:

grid[0][3].changeTo(1);
grid[6][3].changeTo(1);
grid[3][0].changeTo(4);
grid[3][6].changeTo(4);

break;
case 4:

grid[1][1].changeTo(3);
grid[5][5].changeTo(3);
grid[1][5].changeTo(2);
grid[5][1].changeTo(2);
grid[3][2].changeTo(1);
grid[3][4].changeTo(1);

break;
case 5:

grid[1][1].changeTo(1);
grid[1][3].changeTo(2);
grid[1][5].changeTo(1);
grid[5][1].changeTo(1);
grid[5][3].changeTo(2);
grid[5][5].changeTo(1);

break;
case 6:

grid[2][2].changeTo(3);
grid[4][4].changeTo(3);
grid[4][2].changeTo(4);
grid[2][4].changeTo(4);
grid[0][0].changeTo(1);
grid[0][6].changeTo(1);
grid[6][6].changeTo(1);
grid[6][6].changeTo(1);
grid[6][0].changeTo(1);

break;
case 7:

grid[2][2].changeTo(1);
grid[4][4].changeTo(1);
grid[4][2].changeTo(2);
grid[2][4].changeTo(2);
grid[0][0].changeTo(3);
grid[0][6].changeTo(3);
grid[6][6].changeTo(3);
grid[6][0].changeTo(3);

break;
case 8:

grid[2][2].changeTo(2);
grid[2][3].changeTo(2);
grid[2][4].changeTo(2);
grid[3][2].changeTo(2);
grid[3][4].changeTo(2);
grid[4][2].changeTo(2);
grid[4][3].changeTo(2);
grid[4][4].changeTo(2);

grid[0][3].changeTo(3);
grid[6][3].changeTo(3);
grid[3][0].changeTo(3);
grid[3][6].changeTo(3);

break;
case 9:

grid[0][0].changeTo(1);
grid[1][1].changeTo(3);
grid[2][2].changeTo(2);
grid[4][4].changeTo(2);
grid[5][5].changeTo(3);
grid[6][6].changeTo(1);
grid[0][6].changeTo(1);
grid[1][5].changeTo(3);
grid[2][4].changeTo(2);
grid[4][2].changeTo(2);
grid[5][1].changeTo(3);
grid[6][0].changeTo(1);

break;

}
drawGrid();

ctx.font = "24px Calibri";
ctx.fillStyle = "black";
ctx.fillText("Clicks: " + clickCount, 5, 375);
ctx.fillText("Par: " + par[level-1], 5, 395);
ctx.fillText("Menu", 285, 385);
gameLoop = setInterval(update, 500);
/*
if(checkClear() == true)
{
clearInterval(gameLoop);
alert("Victory in " + clickCount + " clicks!");
}
*/

}

function Menu()
{

var loadScores = localStorage.getItem("scores");
loadScores = JSON.parse(loadScores);

for(var i = 0; i < 9; i ++)
{
scores[i] = loadScores[i];
}


level = 0;

clearScreen();

ctx.font = "40px Calibri";
ctx.fillStyle = "black";
ctx.fillText("Rotoshift", 45, 95);

for(var i = 4; i < 6; i ++)
{
for(var j = 2; j < 4; j ++)
{
ctx.beginPath();
ctx.lineWidth = "2";
ctx.strokeStyle = "black";
ctx.rect(50*i, 50*j, 50, 50);
if(i == 4 && j == 2)
{
ctx.fillStyle = "red";
}
else if(i == 4 && j == 3)
{
ctx.fillStyle = "green";
}
else if(i == 5 && j == 2)
{
ctx.fillStyle = "purple";
}
else if(i == 5 && j == 3)
{
ctx.fillStyle = "blue";
}

ctx.fillRect(50*i, 50*j, 50, 50);
ctx.stroke();
}
}

ctx.font = "10px Verdana";
ctx.fillStyle = "black";
ctx.fillText("A game by Josh Haxell", 200, 215);



for(var i = 0; i < 5; i ++)
{
for(var j = 0; j < 2; j ++)
{
level ++;
ctx.beginPath();
ctx.lineWidth = "2";
ctx.rect(175*j, 250+30*i, 175, 30);
ctx.stroke();
if(level < 10)
{

ctx.font = "15px Arial";
ctx.fillStyle = "black";
ctx.fillText("Level " + level, 175*j + 5, 270+30*i);
ctx.fillText("Par: " + par[level-1], 60+175*j, 270+30*i);

if(scores[level-1] != 0)
{
ctx.fillText("Best: " + scores[level-1], 115+ 175*j, 270+30*i);
}
else
{
ctx.fillText("Best: ", 115+ 175*j, 270+30*i);
}
}
/* else
{
ctx.font = "15px Arial";
ctx.fillStyle = "black";
ctx.fillText("Best Scores", 175*j + 5, 270+30*i);
}*/
}



}

}






var pos = [3, 3];

var clickCount = 0;

var scores = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];


if(localStorage.getItem("scores")=== null)
{
localStorage.setItem("scores", JSON.stringify(scores));
}


var par = [ 1, 7, 16, 16, 10, 16, 24, 22, 26 ];

var grid = new Array(7);

for(var i = 0; i < 7; i ++)
{
grid[i] = new Array(7);
}

var level = 0;
var gameOn = false;
var gameLoop = 0;
var victoryOn;
var sqType = 1;




clearScreen();

Menu();



</script>