Why do I like JavaScript?
One hour, just 100 line of code. "bubble breaker" game (like on PPC) is done.
Play here.
Source code:
Play here.
Source code:
<BODY style='background:#ffffff'><CENTER>
Score: <span id=scoreDIV>0</span> | <A href="javascript:location.reload()">Restart</A>
<SCRIPT>
var colors = new Array();
colors[0] = "#FF9999";colors[1] = "#99FF99";colors[2] = "#9999FF";colors[3] = "#CCCC99";
window.gamesize = 10;
document.write("<TABLE border=0 cellpadding=0 cellspacing=0 id='GameTable' style='border:2px solid black'>");
for(var i=0; i<gamesize; i++) {
document.write("<TR>")
for(var j=0; j<gamesize; j++) {
color = Math.floor((Math.random()*colors.length));
document.write("<TD align=middle style='width:35px;height:35px;border:1px solid white;background:"+colors[color]+"' onclick='onTDclick(this)'> </TD>");
}
document.write("</TR>")
}
document.write("</TABLE>")
var selectedScore = 0;
var gametable = document.getElementById("GameTable");
var scoreDIV = document.getElementById("scoreDIV");
function onTDclick(oTd) {
if ((selectedScore==0) || (oTd.flag==0)){
var sRow = -1;
var sCol = -1;
for(var i=0; i<gamesize; i++) for(var j=0; j<gamesize; j++) {
gametable.rows[i].cells[j].flag = 0;
gametable.rows[i].cells[j].style.border="1px solid white";
gametable.rows[i].cells[j].innerHTML=" ";
if (oTd == gametable.rows[i].cells[j]) {
sRow = i;
sCol = j;
}
}
selectedScore = calcConnection(sRow, sCol);
if (selectedScore>0) {
for(var i=0; i<gamesize; i++) for(var j=0; j<gamesize; j++) {
if (gametable.rows[i].cells[j].flag > 0) {
gametable.rows[i].cells[j].style.border="1px solid black";
gametable.rows[i].cells[j].innerHTML="<B>"+selectedScore;
}
}
}
return;
}
for(var i=0; i<gamesize; i++) for(var j=0; j<gamesize; j++) {
gametable.rows[i].cells[j].style.border="1px solid white";
gametable.rows[i].cells[j].innerHTML=" ";
if (gametable.rows[i].cells[j].flag > 0) {
gametable.rows[i].cells[j].style.backgroundColor = "#ffffff";
}
gametable.rows[i].cells[j].flag = 0;
}
fallStep();
scoreDIV.innerHTML = scoreDIV.innerHTML*1+(selectedScore*(selectedScore+1));
}
function fallStep() {
var wasFall = false;
for(var i=gamesize-1; i>0; i--) for(var j=0; j<gamesize; j++) {
if (isEmpty(i, j) && (!isEmpty(i-1, j))) {
gametable.rows[i].cells[j].style.backgroundColor = gametable.rows[i-1].cells[j].style.backgroundColor;
gametable.rows[i-1].cells[j].style.backgroundColor = "#ffffff";
wasFall = true;
}
}
if (wasFall) window.setTimeout("fallStep()", 100);
else shiftStep();
}
function shiftStep() {
var wasShift = false;
for(var j=0; j<gamesize-1;j++) {
if ((isEmpty(gamesize-1, j)) && (!isEmpty(gamesize-1, j+1))) {
wasShift = true;
for(var i=0; i<gamesize;i++) {
gametable.rows[i].cells[j].style.backgroundColor = gametable.rows[i].cells[j+1].style.backgroundColor;
gametable.rows[i].cells[j+1].style.backgroundColor = "#ffffff";
}
}
}
if (wasShift) window.setTimeout("shiftStep()", 100);
}
function isEmpty(row, col) {
return gametable.rows[row].cells[col].style.backgroundColor == document.body.style.backgroundColor;
}
function isEqual(row1, col1, row2, col2) {
return gametable.rows[row1].cells[col1].style.backgroundColor == gametable.rows[row2].cells[col2].style.backgroundColor;
}
function isNonFlagged(row, col) {
return gametable.rows[row].cells[col].flag==0;
}
function calcConnection(sRow, sCol) {
if (isEmpty(sRow,sCol)) return 0;
gametable.rows[sRow].cells[sCol].flag = 1;
var score = 0;
if ((sCol<gamesize-1)&&isEqual(sRow, sCol,sRow, sCol+1) && isNonFlagged(sRow, sCol+1)) score+=1+calcConnection(sRow, sCol+1);
if ((sCol>0)&&isEqual(sRow, sCol,sRow, sCol-1) && isNonFlagged(sRow, sCol-1)) score+=1+calcConnection(sRow, sCol-1);
if ((sRow<gamesize-1)&&isEqual(sRow, sCol,sRow+1, sCol) && isNonFlagged(sRow+1, sCol)) score+=1+calcConnection(sRow+1, sCol );
if ((sRow>0)&&isEqual(sRow, sCol,sRow-1, sCol) && isNonFlagged(sRow-1, sCol)) score+=1+calcConnection(sRow-1, sCol);
return score;
}
</SCRIPT></BODY>
|
Category: JavaScript |
|
Nice game! You should have included a small manual :)
Anyway here it is:
1. Double-click to remove adjacent blocks
2. I think the number of blocks you can eliminate is your score.
Am I missing something?
Posted by Angsuman Chakraborty on August 31, 2008 at 07:17 PM GMT+03:00 #
Scoring as I understand is dependent on how many blocks you eliminate at a time - 1. Is that correct?
Nice addictive game.
Posted by Angsuman Chakraborty on August 31, 2008 at 07:38 PM GMT+03:00 #
You are right and thanks for comments )
Posted by ahot on August 31, 2008 at 09:55 PM GMT+03:00 #
I was expecting to find script.aculo.us or at least prototype. Nothing there, I'm truly impressed.
Posted by BM on September 01, 2008 at 11:05 AM GMT+03:00 #
Do you have the original java source code available without the html like in javascript?
Posted by Matt on October 16, 2008 at 07:32 PM GMT+03:00 #
Matt,
What does "Original java source" mean? I didn't use any "original" source codes for writing this game.
Posted by ahot on October 17, 2008 at 12:03 PM GMT+03:00 #
I mean do you have source code for this game without javascript? I dont understand how javascript works I was looking to see if you had it with plan java code that could be compiled and executed via the command prompt window.
Posted by Matt on November 12, 2008 at 05:15 PM GMT+03:00 #
help me to understand this :D
what does oTd.flag==0 and all .flag stands for
Posted by Mats on March 26, 2009 at 11:34 AM GMT+03:00 #
As I remember they are for marking connected cells :)
Hope answer is useful :)
Posted by ahot on March 30, 2009 at 10:42 PM GMT+03:00 #
can you give me some more words about this :D i'm doing an similar bubble breaker for some school work and i would like to understand how did u used those flags because i can't find any samples on web
thanks
Posted by Mats on April 17, 2009 at 12:16 PM GMT+03:00 #
Ok. You didn't find anything.
So make little experiment:
Rename all "flag" occurrences with "one_more_flag" word.
You will be surprised. But bubble breaker will work.
Posted by Ahot on April 24, 2009 at 12:23 PM GMT+03:00 #
Just wanna say thanks for the awesome code ... and translating it to java right now. Awesome code dude !!... really thanks =)
Posted by mathew on October 07, 2009 at 08:09 PM GMT+03:00 #
This is an excellent game with clever functions.
I've extended the game some. Graphics are now supported for game tiles (50x50px). The game now supports multiple players. I also refactored the code to separate the HTML, CSS and JavaScript.
Ahot, please e-mail me for the code.
Posted by matty_x on December 18, 2009 at 09:59 PM GMT+03:00 #
Hi Ahot,
I'm amazed what you made possible in such a few lines! Do you mind if I take your code as basis for my own game experiments? In the unlikely case my game would ever be released to the public, you'll certainly get properly acknowledged...
Best regards,
Gerald
Posted by Gerald on February 04, 2010 at 12:09 PM GMT+03:00 #