Talking about Pushori game, Game development and Javascript.
Maybe some of you never played Pushori and never heard of Tony Pa, a Flash game developer who has since disappeared from sight.
He was one of the developers who inspired me to create this blog, and since I’ve started the 101 games challenge (I’ll talk about that in a few days), I want the first game to be a re-release of one of his old games.
I really liked Pushori, so just to test it in workings, I wrote a few lines in vanilla JavaScript to build the game engine.
Align two or more numbers vertically and they diappear, clearing the board for new numbers. Numbers can only be pushed from the left or from the right.
It does not feature levels and does not display “next” number, but the main engine works so I am ready to port it into a game framework and start with my first game in the 101 games challenge.
Look at the source code, all in one file:
<html>
<head>
<style>
body {
font-family: monospace;
font-size: 24px;
}
.push {
cursor : pointer;
}
</style>
</head>
<body>
<center>
<div id = "gameText"></div>
<div id = "gameField"></div>
</center>
<script>
var gameSize = 3;
var minStreak = 2;
var values = 5;
var gameArray = [];
var number = 0;
var canPlay = true;
createField();
drawField();
number = drawNumber();
function createField() {
for (var i = 0; i < gameSize; i ++) {
gameArray[i] = [];
for (var j = 0; j < gameSize; j ++) {
gameArray[i][j] = 0;
}
}
}
function pushFrom(row, fromLeft) {
if (canPlay) {
canPlay = false;
var moved = false;
if (fromLeft) {
for (var i = gameSize - 2; i >= 0; i --) {
if (gameArray[row][i] != 0) {
for (var j = i + 1; j < gameSize; j ++) {
if (gameArray[row][j] == 0) {
gameArray[row][j] = gameArray[row][j - 1];
gameArray[row][j - 1] = 0;
}
}
}
}
for (var i = gameSize - 1; i >= 0; i--) {
if (gameArray[row][i] == 0) {
moved = true;
gameArray[row][i] = number;
break;
}
}
}
else {
for (var i = 1; i < gameSize; i ++) {
if (gameArray[row][i] != 0) {
for (var j = i - 1; j >= 0; j --) {
if (gameArray[row][j] == 0) {
gameArray[row][j] = gameArray[row][j + 1];
gameArray[row][j + 1] = 0;
}
}
}
}
for (var i = 0; i < gameSize; i ++) {
if (gameArray[row][i] == 0) {
moved = true;
gameArray[row][i] = number;
break;
}
}
}
if (moved) {
drawField();
if (arrangeMatches()) {
setTimeout(function() {
drawField();
canPlay = true;
}, 1000);
}
else {
number = drawNumber();
canPlay = true;
}
}
else {
canPlay = true;
}
}
}
function arrangeMatches() {
matches = false;
for (var column = 0; column < gameSize; column ++) {
var value = 0;
var streak = 0;
for (var row = 0; row < gameSize; row ++) {
if (gameArray[row][column] == value) {
streak ++;
if (row == gameSize - 1 && streak >= minStreak && value != 0) {
matches = true;
for (var z = 0; z < streak; z ++) {
gameArray[row - z][column] = 0;
}
}
}
else {
if (streak >= minStreak && value != 0) {
matches = true;
for (var z = 1; z <= streak; z ++) {
gameArray[row - z][column] = 0;
}
}
streak = 1;
value = gameArray[row][column];
}
}
}
return matches;
}
function drawNumber() {
var random = Math.floor(Math.random() * values) + 1;
document.getElementById('gameText').innerHTML = 'Push number ' + random;
return random;
}
function drawField() {
var dividerString = '<div>+'
for (var i = 0; i < gameSize; i ++) {
dividerString += '---+';
}
dividerString += '</div>';
var output = dividerString;
for (var i = 0; i < gameSize; i ++) {
output += '<div><span class = "push" onclick = "pushFrom(' + i + ', true)">»</span> | ';
for (var j = 0; j < gameSize; j ++) {
output += gameArray[i][j] + ' | ';
}
output += '<span class = "push" onclick = "pushFrom(' + i + ', false)">«</span></div>' + dividerString;
}
document.getElementById('gameField').innerHTML = output;
}
</script>
</body>
</html>No need to download anything, just copy and paste this code wherever you want. I am building the final game, meanwhile.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.