Skip to content

Instantly share code, notes, and snippets.

@zorzysty

zorzysty/pixel_z_README.md

Created September 15, 2013 21:42
Show Gist options
  • Save zorzysty/6574555 to your computer and use it in GitHub Desktop.
Save zorzysty/6574555 to your computer and use it in GitHub Desktop.
Download ZIP
pixel_z beta
Raw
pixel_z_css_styles.css
body {
color: #fff;
font-family: "Segoe UI";
font-size: 24px;
font-weight: 300;
}
h1 {
font-weight: 300;
color: #BEDB39;
text-align: center;
margin: 25px 0;
}
#board {
display: block;
margin: 0 auto;
width: 600px;
height: 650px;
}
#result {
background-color: #2980b9;
width: 570px;
height: 60px;
margin: 0 auto 20px auto;
padding: 0 15px;
line-height: 60px;
}
#result span#goal {
float: right;
}
.overTheLimit {
color: #c0392b;
}
#copy {
background-color: #2980b9;
width: 600px;
height: 60px;
margin: 20px auto 0 auto;
line-height: 60px;
text-align: center;
}
Raw
pixel_z_css_styles.less
body{
color: #fff;
font-family: "Segoe UI";
font-size: 24px;
font-weight: 300;
}
h1{
font-weight: 300;
color: #BEDB39;
text-align: center;
margin: 25px 0;
}
#board{
display: block;
margin: 0 auto;
width: 600px;
height: 650px;
}
#result{
background-color: #2980b9;
width: 570px;
height: 60px;
margin: 0 auto 20px auto;
padding: 0 15px;
line-height: 60px;
span#goal{
float: right;
}
}
.overTheLimit{
color: #c0392b;
}
#copy{
background-color: #2980b9;
width: 600px;
height: 60px;
margin: 20px auto 0 auto;
line-height: 60px;
text-align: center;
}
Raw
pixel_z_index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="js/script.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all"/>
<title>pixel_z the JS game</title>
</head>
<body>
<h1>pixel_z - the JS game</h1>
<div id="result"><span id="steps"></span><strong id="counter">0</strong><span id="goal"></span></div>
<canvas id="board"></canvas>
<div id="copy">created by zorza</div>
</body>
</html>
Raw
pixel_z_js_script.js
window.onload = function(){
var constants = { //constants:
rowSize: 12,
columnSize: 13,
tileSize: 50,
winCondition: 19
};
var texts = {
won: "CONGRATULATIONS! You won with te score of ",
lost: "You lost",
lostOne: "move too much",
lostMore: "moves too much",
goal: "goal",
steps: "steps counter"
}
var pix = document.getElementById('board');
pix.width = constants.rowSize*constants.tileSize;
pix.height = constants.columnSize*constants.tileSize;
var context = pix.getContext("2d");
context.strokeStyle = "#eee";
var tiles = [];
var checked=[]; //empty matrix for marking up checked files
var counter = 0;
function _Tile (color){ //klasa _Tile
this.color = color; //1-columnSize
}
function randomColor(){
var i = Math.floor(Math.random()*5);
switch (i){
case 0: x="#004358"; break;
case 1: x="#1F8A70"; break;
case 2: x="#BEDB39"; break;
case 3: x="#FFE11A"; break;
case 4: x="#FD7400"; break;
}
return x;
}
function fillCheckedWithZeros(){
for (var i=0; i<constants.rowSize; i++){
checked[i]=[];
for(var j=0; j<constants.columnSize; j++){
checked[i][j]=0;
}
}
}
function fillAllTiles(){
for (var i=0; i<constants.rowSize; i++){
tiles[i] = [];
for (var j=0; j<constants.columnSize;j++){
tiles[i][j] = new _Tile(randomColor());
context.fillStyle = tiles[i][j].color;
context.fillRect(i*constants.tileSize,j*constants.tileSize,constants.tileSize,constants.tileSize);
}
}
return tiles;
}
function onClick(e){
fillCheckedWithZeros();
var point = getCursorPosition(e);
var color = readColor(point);
if ((color)!=(tiles[0][0].color)){
document.getElementById("counter").innerHTML=(++counter);
if(counter > constants.winCondition){
document.getElementById("counter").className="overTheLimit";
}
}
var brothersTable = check(0,0,tiles);
var brothers = createBrothers(brothersTable);
fillWithPaint(brothers,color);
checkIfFinished() ? summary() : {};
}
function checkIfFinished(){
for (var i=0; i<constants.rowSize; i++){
for (var j=0; j<constants.columnSize;j++){
if (tiles[i][j].color!=tiles[0][0].color){
return false;
}
}
}
return true;
}
function summary(){
var summaryText;
summaryText = (counter <= constants.winCondition) ? (texts.won + counter) : (texts.lost + " - " + (counter - constants.winCondition) + ((counter - constants.winCondition == 1) ? " " + texts.lostOne : " " + texts.lostMore) );
if (window.confirm(summaryText))
{
document.getElementById("counter").innerHTML=(counter=0);
document.getElementById("counter").className = document.getElementById("counter").className.replace(/\boverTheLimit\b/,'');
tiles = fillAllTiles();
fillCheckedWithZeros();
}
else{}
}
function createBrothers(brothersTable){
function _Brothers(x,y){
this.x = x;
this.y = y;
}
var brothers = [];
for (var i=0; i<constants.rowSize; i++){
for (var j=0; j<constants.columnSize; j++){
if(brothersTable[i][j]==1){
brothers.push(new _Brothers(i,j))
}
}
}
return brothers;
}
function fillWithPaint(brothers,color){
for (i=0;i<brothers.length;i++){
x=brothers[i].x;
y=brothers[i].y;
paintTile(x,y, color)
}
}
function paintTile(x,y, color){
tiles[x][y].color=color;
context.fillStyle = tiles[x][y].color;
context.fillRect(x*constants.tileSize,y*constants.tileSize,constants.tileSize,constants.tileSize);
}
function readColor(point){
var x = Math.floor(point[0]/50);
var y = Math.floor(point[1]/50);
color = tiles[x][y].color;
return color;
}
function check(x,y,matrix){//where the recursive magic happens
var chosenColor=tiles[0][0].color;
if(matrix[x][y].color==chosenColor){
checked[x][y]=1;
if(x-1>=0 && matrix[x-1][y].color==chosenColor && checked[x-1][y]!=1){ // when TOP neighbour exists AND is the same color AND is not yet listed
check(x-1,y,matrix);
}
if( y-1>=0 && matrix[x][y-1].color==chosenColor && checked[x][y-1]!=1){ // when LEFT neighbour exists AND is the same color AND is not yet listed
check(x,y-1,matrix);
}
if(x+1<constants.rowSize && matrix[x+1][y].color==chosenColor && checked[x+1][y]!=1){ // when BOTTOM neighbour exists AND is the same color AND is not yet listed
check(x+1,y,matrix);
}
if(y+1<constants.columnSize && matrix[x][y+1].color==chosenColor && checked[x][y+1]!=1){ // when RIGHT neighbour exists AND is the same color AND is not yet listed
check(x,y+1,matrix);
}
}
return checked;
}
function getCursorPosition(e){
var x;
var y;
if(e.pageX != undefined && e.pageY != undefined){
x= e.pageX;
y= e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x-=pix.offsetLeft;
y-=pix.offsetTop;
return [x,y];
}
tiles = fillAllTiles();
document.getElementById("steps").innerHTML=(texts.steps +": ");
document.getElementById("goal").innerHTML=(texts.goal +": <strong>")+constants.winCondition + "</strong>";
fillCheckedWithZeros();
pix.addEventListener("click", onClick, true);
};
Raw
pixel_z_README.md

pixel_z - the JS game

created by zorza 2013

beta version

Raw
pixel_z_todos.html
<!DOCTYPE html>
<html>
<head>
<title>pixel_z - to do list</title>
</head>
<body>
<ul>
<li>buttons for mobile</li>
<li>color themes</li>
<li>winning/losing screen</li>
<li>customizable board size and winning conditions calculations</li>
<li>languages</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment