I was bored so..

Post by **LearningCode** » Tue Jun 29, 2010 11:40 am

I made a Pac-Man game using javascript.
Yes, not flash, not C++, not Delphi, Ruby, Python, Java, etc.

Javascript.
I spent about an hour or so on this project before getting lazy, lol.
I coded it using note-pad.
Plain, ordinary notepad.

My eyes hurt.

Anyone wanna' see?
I didn't add:
01) Levels
02) Scores
03) Lives
04) Ghosts
05) Sounds or Music

But I do have:
01) A map
02) The little dots
03) A strawberry (I know it's supposed to be a cherry)
04) A moving pac-man
05) Walls that you can't walk through
06) Animating pacman <.<

Yea ..
I'll just leave this here till someone is bored and decides to look at this >.>

Wait--
I can't upload any html files, lol.

The extension html is not allowed.
The upload was rejected because the uploaded file was identified as a possible attack vector.

Umm..
I'll upload them as txt files and you just rename them as html files <.<

WTF;

The extension txt is not allowed.
The upload was rejected because the uploaded file was identified as a possible attack vector.

Yea, I wanna' hack this forum -____-

The codes..
For the PacMan game!

Code: Select all

<html>
    <head>
        <title>Pac-Man Game</title>

        <script type = "text/javascript";>
            //globals
                var Xsize = 1024;
                var Ysize = 544;

                var SquareSize = 32;
                var Xarray = [];
                var Yarray = [];

                var Blank = ["http://i147.photobucket.com/albums/r291/luciusxx/Blank_Black.png", 
                                         "http://i147.photobucket.com/albums/r291/luciusxx/Blank_Blue.png", 
                                         "http://i147.photobucket.com/albums/r291/luciusxx/PacMan1.png",
                                         "http://i147.photobucket.com/albums/r291/luciusxx/Dot-1.png",
                                         "http://i147.photobucket.com/albums/r291/luciusxx/Strawberry.png"
                                             
                                        ];

                var PacFrame = [];
                var Object = document.getElementById('Body');

                var MapArray = [];
                var MapDiv = [];

                var PACMAN = [];
                var Up = 'w';
                var Left = 'a';
                var Down = 's';
                var Right = 'd';

                 var UpSwitch = 0;
                 var LeftSwitch = 0;
                 var DownSwitch = 0;
                 var RightSwitch = 0;

                 var pmX;
                 var pmY;
                 var pmF;

                 var PacmanTimer;
                 var Moving = 0;
                 var Frame = 5;

                  var PixelChange = SquareSize / Frame;
                  var MovingLoop = 1;
                  var D = 0;

                  var pxTop;
                  var pxLeft;

                  var DotAmount = 0;
                  var BerryAmount = 0;
            //endglobals   
        </script>

        <script type = "text/javascript">
            function FrameMovement (Direction) {
                var LocalTimer;

                if (Frame > 0) {
                    if (Direction == 1) {
                        PACMAN.style.top = (parseInt(PACMAN.style.top) - PixelChange) + 'px';       
                    } else if (Direction == 2) {           
                        PACMAN.style.left = (parseInt(PACMAN.style.left) - PixelChange) + 'px';       
                    } else if (Direction == 3) {
                        PACMAN.style.top = (parseInt(PACMAN.style.top) + PixelChange) + 'px';       
                    } else {
                        PACMAN.style.left = (parseInt(PACMAN.style.left) + PixelChange) + 'px';       
                    }     
                    LocalTimer = setTimeout('FrameMovement(' + Direction + ')', 31);
                    Frame = Frame - 1;
                } else {
                    PACMAN.style.top = (Ysize - Yarray[pmY]) + 'px';
                    PACMAN.style.left = (Xarray[pmX]) + 'px';
                    Moving = 0;
                    Frame = 5;
                }
            }

            function MovePacman () {
                var loopy = 1;
                if (Moving == 0) {
                    if (UpSwitch == 1 && pmY != ((Ysize / SquareSize) - 1) && MapArray[100*pmX + (pmY + 1)] != 1) {
                        pmY = pmY + 1;
                        D = 1;
                    }
                    if (LeftSwitch == 1 && pmX != 0 && MapArray[100*(pmX-1) + pmY] != 1) {
                        pmX = pmX - 1;
                        D = 2;
                    }
                    if (DownSwitch == 1 && pmY != 0 && MapArray[100*pmX + (pmY - 1)] != 1) {
                        pmY = pmY - 1;
                        D = 3;
                    }
                    if (RightSwitch == 1 && pmX != ((Xsize / SquareSize) - 1) && MapArray[100*(pmX+1) + pmY] != 1) {
                        pmX = pmX + 1;
                        D = 4;
                    }
                    
                    if (D != 0) {
                        pmF = D;
                        Moving = 1;

                        while (loopy < 5) {
                            if (pmF != loopy) {
                                PACMAN[100 * loopy + 5].style.zIndex = -999;
                            }
                            loopy = loopy + 1;
                        }
                    }
                } else {

                    if (Frame > 0) {
                        if (D == 1) {
                            pxTop = pxTop - PixelChange;
                        } else if (D == 2) {
                            pxLeft = pxLeft - PixelChange;
                        } else if (D == 3) {
                             pxTop = pxTop + PixelChange;
                        } else {
                             pxLeft = pxLeft + PixelChange;
                        }

                         while (MovingLoop < 5) {
                            while (loopy < 6) {
                                if (D == 1) {
                                    PACMAN[100 * MovingLoop + loopy].style.top = pxTop + 'px';       
                                } else if (D == 2) {           
                                    PACMAN[100 * MovingLoop + loopy].style.left = pxLeft + 'px';       
                                } else if (D == 3) {
                                    PACMAN[100 * MovingLoop + loopy].style.top = pxTop + 'px';       
                                } else {
                                    PACMAN[100 * MovingLoop + loopy].style.left = pxLeft + 'px';       
                                }     
    
                                 loopy = loopy + 1;
                            }
                            
                            loopy = 1;
                            MovingLoop = MovingLoop + 1;
                        }
                        MovingLoop = 1;
                        loopy = 1;

                            while (MovingLoop < 6) {
                                    while (loopy < 5) {
                                             PACMAN[100 * loopy + MovingLoop].style.zIndex = -999;
                                         loopy = loopy + 1;
                                    }
                                loopy = 1;
                                MovingLoop = MovingLoop + 1
                            }

                             PACMAN[100 * pmF + Frame].style.zIndex = 999;

                            Frame = Frame - 1;
                            MovingLoop = 1;
                    } else {

                        pxTop = (Ysize - Yarray[pmY])
                        pxLeft = (Xarray[pmX])

                        while (MovingLoop < (6)) {
                            PACMAN[100 * pmF + MovingLoop].style.top = pxTop + 'px';
                            PACMAN[100 * pmF + MovingLoop].style.left = pxLeft + 'px';
                            MovingLoop = MovingLoop + 1;
                        }
                        MovingLoop = 1;
                        Moving = 0;
                        Frame = 5;
                        D = 0;

                         if (MapArray[100*pmX + pmY] == 3) {
                             MapArray[100*pmX + pmY] = 0;
                             MapDiv[100*pmX + pmY].innerHTML =  '<img src="' + Blank[MapArray[100*pmX + pmY]] + '";>';
                             DotAmount = DotAmount - 1;
                         } else if (MapArray[100*pmX + pmY] == 4) {
                             MapArray[100*pmX + pmY] = 0;
                             MapDiv[100*pmX + pmY].innerHTML =  '<img src="' + Blank[MapArray[100*pmX + pmY]] + '";>';
                             BerryAmount = BerryAmount - 1;
                         }

	    loopy = 1;
                         if (BerryAmount == 0 && DotAmount == 0) {
                              clearInterval(PacmanTimer);
                              while (MovingLoop < 5) {		  
	             while (loopy < 6) {	         
	                 document.body.removeChild(PACMAN[100 * MovingLoop + loopy]);
	                 loopy = loopy + 1;
	             }
	             MovingLoop = MovingLoop + 1;
	             loopy = 1;
	         }
                              LoadMap();
	         MovingLoop = 1;
                         }
                    }
                }
            }
        </script>

        <script type = "text/javascript">
            function Movement (e) {
                var Direction;

                if(window.event) {
                    Direction = String.fromCharCode(e.keyCode);
                } else if(e.which) {
                    Direction = String.fromCharCode(e.which);
                }
                if (Direction == Up) {
                     UpSwitch = 1;
                     LeftSwitch = 0;
                     DownSwitch = 0;
                     RightSwitch = 0;
                }
                if (Direction == Left) {
                     UpSwitch = 0;
                     LeftSwitch = 1;
                     DownSwitch = 0;
                     RightSwitch = 0;
                }
                if (Direction == Down) {
                     UpSwitch = 0;
                     LeftSwitch = 0;
                     DownSwitch = 1;
                     RightSwitch = 0;
                }
                if (Direction == Right) {
                     UpSwitch = 0;
                     LeftSwitch = 0;
                     DownSwitch = 0;
                     RightSwitch = 1;
                }
            }

            function Movementa (e) {
                var Direction;

                if(window.event) {
                    Direction = String.fromCharCode(e.keyCode);
                } else if(e.which) {
                    Direction = String.fromCharCode(e.which);
                }

                if (Direction == Up.toUpperCase()) {
                     UpSwitch = 0;
                }
                if (Direction == Left.toUpperCase()) {
                     LeftSwitch = 0;
                }
                if (Direction == Down.toUpperCase()) {
                     DownSwitch = 0;
                }
                if (Direction == Right.toUpperCase()) {
                     RightSwitch = 0;
                }
            }
        </script>

        <script type = "text/javascript";>
            function DrawMap () {
                var LoopX = 0;
                var LoopY = 0;
                var EndLoopX = Xsize / SquareSize;
                var EndLoopY = Ysize / SquareSize;
                var loop = 1;
                var Face = 1;

                if (Xsize % SquareSize == 0 && Ysize % SquareSize == 0) {
                    while (LoopX < EndLoopX) {

                        Xarray[LoopX] = LoopX*SquareSize;

                        while (LoopY < EndLoopY) {
                            Yarray[LoopY] = LoopY*SquareSize;

                            if (MapArray[100*LoopX + LoopY] != 2) {
                                MapDiv[100*LoopX + LoopY] = document.createElement('div');
                                MapDiv[100*LoopX + LoopY].setAttribute('id', (100*LoopX + LoopY) + ' ');
                                MapDiv[100*LoopX + LoopY].style.position = 'absolute';
                                MapDiv[100*LoopX + LoopY].style.width = SquareSize + 'px';
                                MapDiv[100*LoopX + LoopY].style.height = SquareSize + 'px';
                                MapDiv[100*LoopX + LoopY].style.left = Xarray[LoopX] + 'px';
                                MapDiv[100*LoopX + LoopY].style.top = (Ysize - Yarray[LoopY]) + 'px';
                                MapDiv[100*LoopX + LoopY].style.zIndex = 1;
                                MapDiv[100*LoopX + LoopY].innerHTML = '<img src="' + Blank[MapArray[100*LoopX + LoopY]] + '";>';

                                if (MapArray[100*LoopX + LoopY] == 3) {
                                    DotAmount = DotAmount + 1;
                                } else if (MapArray[100*LoopX + LoopY] == 4) {
                                    BerryAmount = BerryAmount + 1;
                                }
                            } else {
                                MapDiv[100*LoopX + LoopY] = document.createElement('div');
                                MapDiv[100*LoopX + LoopY].setAttribute('id', (100*LoopX + LoopY) + ' ');
                                MapDiv[100*LoopX + LoopY].style.position = 'absolute';
                                MapDiv[100*LoopX + LoopY].style.width = SquareSize + 'px';
                                MapDiv[100*LoopX + LoopY].style.height = SquareSize + 'px';
                                MapDiv[100*LoopX + LoopY].style.left = Xarray[LoopX] + 'px';
                                MapDiv[100*LoopX + LoopY].style.top = (Ysize - Yarray[LoopY]) + 'px';
                                MapDiv[100*LoopX + LoopY].style.zIndex = 1;
                                MapDiv[100*LoopX + LoopY].innerHTML = '<img src="' + Blank[0] + '";>'; 
 
                                while (loop < (5 + 1)) {

                                    while (Face < 5) {
                                        PACMAN[100 * Face + loop] = document.createElement('div');
                                        PACMAN[100 * Face + loop].style.position = 'absolute';
                                        PACMAN[100 * Face + loop].style.width = SquareSize + 'px';
                                        PACMAN[100 * Face + loop].style.height = SquareSize + 'px';
                                        PACMAN[100 * Face + loop].style.left = Xarray[LoopX] + 'px';
                                        PACMAN[100 * Face + loop].style.top = (Ysize - Yarray[LoopY]) + 'px';
                                        PACMAN[100 * Face + loop].style.zIndex = -999;
                                        PACMAN[100 * 1 + 1].style.zIndex = 999;
                                        PACMAN[100 * Face + loop].innerHTML = '<img src="' + PacFrame[100 * Face + loop] + '";>'; 
                                        document.body.appendChild(PACMAN[100 * Face + loop]);
                        
                                        Face = Face + 1;
                                    }

                                    loop = loop + 1;
                                    Face = 1;
                                }
 
                                pxTop = (Ysize - Yarray[LoopY]);
                                pxLeft = (Xarray[LoopX]);

                                document.body.setAttribute('onkeypress', 'Movement(event)');
                                document.body.setAttribute('onkeyup', 'Movementa(event)');

                                pmX = LoopX;
                                pmY = LoopY;
                           }

                            
                            document.body.appendChild(MapDiv[100*LoopX + LoopY]);

                            LoopY = LoopY + 1;
                        }
                        
                        LoopX = LoopX + 1;
                        LoopY = 0;
                    }

                     PacmanTimer = setInterval('MovePacman()', 31);
                } else {
                    alert('Wrong size definition for either X or Y');
                }
            }

        </script>

        <script type = "text/javascript">
            function LoadMap() {
MapArray[0] = 1;
MapArray[1] = 1;
MapArray[2] = 1;
MapArray[3] = 1;
MapArray[4] = 1;
MapArray[5] = 1;
MapArray[6] = 1;
MapArray[7] = 1;
MapArray[8] = 1;
MapArray[9] = 1;
MapArray[10] = 1;
MapArray[11] = 1;
MapArray[12] = 1;
MapArray[13] = 1;
MapArray[14] = 1;
MapArray[15] = 1;
MapArray[16] = 1;
MapArray[100] = 1;
MapArray[101] = 3;
MapArray[102] = 3;
MapArray[103] = 3;
MapArray[104] = 3;
MapArray[105] = 3;
MapArray[106] = 3;
MapArray[107] = 3;
MapArray[108] = 1;
MapArray[109] = 3;
MapArray[110] = 3;
MapArray[111] = 3;
MapArray[112] = 3;
MapArray[113] = 3;
MapArray[114] = 3;
MapArray[115] = 3;
MapArray[116] = 1;
MapArray[200] = 1;
MapArray[201] = 3;
MapArray[202] = 1;
MapArray[203] = 1;
MapArray[204] = 3;
MapArray[205] = 1;
MapArray[206] = 4;
MapArray[207] = 3;
MapArray[208] = 1;
MapArray[209] = 3;
MapArray[210] = 1;
MapArray[211] = 1;
MapArray[212] = 1;
MapArray[213] = 1;
MapArray[214] = 1;
MapArray[215] = 3;
MapArray[216] = 1;
MapArray[300] = 1;
MapArray[301] = 3;
MapArray[302] = 3;
MapArray[303] = 1;
MapArray[304] = 3;
MapArray[305] = 1;
MapArray[306] = 1;
MapArray[307] = 3;
MapArray[308] = 1;
MapArray[309] = 3;
MapArray[310] = 1;
MapArray[311] = 4;
MapArray[312] = 3;
MapArray[313] = 4;
MapArray[314] = 1;
MapArray[315] = 3;
MapArray[316] = 1;
MapArray[400] = 1;
MapArray[401] = 3;
MapArray[402] = 3;
MapArray[403] = 1;
MapArray[404] = 3;
MapArray[405] = 1;
MapArray[406] = 4;
MapArray[407] = 3;
MapArray[408] = 1;
MapArray[409] = 3;
MapArray[410] = 1;
MapArray[411] = 3;
MapArray[412] = 1;
MapArray[413] = 3;
MapArray[414] = 1;
MapArray[415] = 3;
MapArray[416] = 1;
MapArray[500] = 1;
MapArray[501] = 3;
MapArray[502] = 3;
MapArray[503] = 1;
MapArray[504] = 3;
MapArray[505] = 1;
MapArray[506] = 3;
MapArray[507] = 1;
MapArray[508] = 1;
MapArray[509] = 3;
MapArray[510] = 1;
MapArray[511] = 3;
MapArray[512] = 1;
MapArray[513] = 3;
MapArray[514] = 1;
MapArray[515] = 3;
MapArray[516] = 1;
MapArray[600] = 1;
MapArray[601] = 3;
MapArray[602] = 3;
MapArray[603] = 1;
MapArray[604] = 3;
MapArray[605] = 1;
MapArray[606] = 3;
MapArray[607] = 1;
MapArray[608] = 1;
MapArray[609] = 3;
MapArray[610] = 1;
MapArray[611] = 3;
MapArray[612] = 1;
MapArray[613] = 3;
MapArray[614] = 1;
MapArray[615] = 3;
MapArray[616] = 1;
MapArray[700] = 1;
MapArray[701] = 3;
MapArray[702] = 3;
MapArray[703] = 1;
MapArray[704] = 3;
MapArray[705] = 1;
MapArray[706] = 3;
MapArray[707] = 1;
MapArray[708] = 1;
MapArray[709] = 3;
MapArray[710] = 1;
MapArray[711] = 3;
MapArray[712] = 1;
MapArray[713] = 3;
MapArray[714] = 1;
MapArray[715] = 3;
MapArray[716] = 1;
MapArray[800] = 1;
MapArray[801] = 3;
MapArray[802] = 3;
MapArray[803] = 1;
MapArray[804] = 3;
MapArray[805] = 1;
MapArray[806] = 3;
MapArray[807] = 1;
MapArray[808] = 1;
MapArray[809] = 3;
MapArray[810] = 1;
MapArray[811] = 3;
MapArray[812] = 1;
MapArray[813] = 3;
MapArray[814] = 1;
MapArray[815] = 3;
MapArray[816] = 1;
MapArray[900] = 1;
MapArray[901] = 3;
MapArray[902] = 3;
MapArray[903] = 1;
MapArray[904] = 3;
MapArray[905] = 1;
MapArray[906] = 4;
MapArray[907] = 3;
MapArray[908] = 1;
MapArray[909] = 3;
MapArray[910] = 1;
MapArray[911] = 3;
MapArray[912] = 1;
MapArray[913] = 3;
MapArray[914] = 1;
MapArray[915] = 3;
MapArray[916] = 1;
MapArray[1000] = 1;
MapArray[1001] = 3;
MapArray[1002] = 3;
MapArray[1003] = 1;
MapArray[1004] = 4;
MapArray[1005] = 1;
MapArray[1006] = 1;
MapArray[1007] = 3;
MapArray[1008] = 1;
MapArray[1009] = 3;
MapArray[1010] = 1;
MapArray[1011] = 3;
MapArray[1012] = 1;
MapArray[1013] = 3;
MapArray[1014] = 1;
MapArray[1015] = 3;
MapArray[1016] = 1;
MapArray[1100] = 1;
MapArray[1101] = 3;
MapArray[1102] = 1;
MapArray[1103] = 1;
MapArray[1104] = 1;
MapArray[1105] = 1;
MapArray[1106] = 4;
MapArray[1107] = 3;
MapArray[1108] = 1;
MapArray[1109] = 3;
MapArray[1110] = 1;
MapArray[1111] = 3;
MapArray[1112] = 1;
MapArray[1113] = 4;
MapArray[1114] = 3;
MapArray[1115] = 4;
MapArray[1116] = 1;
MapArray[1200] = 1;
MapArray[1201] = 3;
MapArray[1202] = 3;
MapArray[1203] = 3;
MapArray[1204] = 4;
MapArray[1205] = 1;
MapArray[1206] = 1;
MapArray[1207] = 3;
MapArray[1208] = 1;
MapArray[1209] = 3;
MapArray[1210] = 1;
MapArray[1211] = 3;
MapArray[1212] = 1;
MapArray[1213] = 1;
MapArray[1214] = 1;
MapArray[1215] = 1;
MapArray[1216] = 1;
MapArray[1300] = 1;
MapArray[1301] = 3;
MapArray[1302] = 1;
MapArray[1303] = 1;
MapArray[1304] = 3;
MapArray[1305] = 1;
MapArray[1306] = 3;
MapArray[1307] = 0;
MapArray[1308] = 0;
MapArray[1309] = 3;
MapArray[1310] = 1;
MapArray[1311] = 3;
MapArray[1312] = 3;
MapArray[1313] = 3;
MapArray[1314] = 1;
MapArray[1315] = 4;
MapArray[1316] = 1;
MapArray[1400] = 1;
MapArray[1401] = 3;
MapArray[1402] = 4;
MapArray[1403] = 1;
MapArray[1404] = 3;
MapArray[1405] = 3;
MapArray[1406] = 3;
MapArray[1407] = 0;
MapArray[1408] = 0;
MapArray[1409] = 0;
MapArray[1410] = 3;
MapArray[1411] = 3;
MapArray[1412] = 1;
MapArray[1413] = 3;
MapArray[1414] = 3;
MapArray[1415] = 3;
MapArray[1416] = 1;
MapArray[1500] = 1;
MapArray[1501] = 4;
MapArray[1502] = 1;
MapArray[1503] = 1;
MapArray[1504] = 1;
MapArray[1505] = 1;
MapArray[1506] = 1;
MapArray[1507] = 0;
MapArray[1508] = 0;
MapArray[1509] = 0;
MapArray[1510] = 1;
MapArray[1511] = 1;
MapArray[1512] = 1;
MapArray[1513] = 1;
MapArray[1514] = 1;
MapArray[1515] = 3;
MapArray[1516] = 1;
MapArray[1600] = 1;
MapArray[1601] = 4;
MapArray[1602] = 1;
MapArray[1603] = 1;
MapArray[1604] = 1;
MapArray[1605] = 1;
MapArray[1606] = 1;
MapArray[1607] = 0;
MapArray[1608] = 2;
MapArray[1609] = 0;
MapArray[1610] = 1;
MapArray[1611] = 1;
MapArray[1612] = 1;
MapArray[1613] = 1;
MapArray[1614] = 1;
MapArray[1615] = 3;
MapArray[1616] = 1;
MapArray[1700] = 1;
MapArray[1701] = 3;
MapArray[1702] = 4;
MapArray[1703] = 1;
MapArray[1704] = 3;
MapArray[1705] = 3;
MapArray[1706] = 3;
MapArray[1707] = 0;
MapArray[1708] = 0;
MapArray[1709] = 0;
MapArray[1710] = 3;
MapArray[1711] = 3;
MapArray[1712] = 1;
MapArray[1713] = 3;
MapArray[1714] = 3;
MapArray[1715] = 3;
MapArray[1716] = 1;
MapArray[1800] = 1;
MapArray[1801] = 3;
MapArray[1802] = 1;
MapArray[1803] = 1;
MapArray[1804] = 3;
MapArray[1805] = 1;
MapArray[1806] = 3;
MapArray[1807] = 0;
MapArray[1808] = 0;
MapArray[1809] = 3;
MapArray[1810] = 1;
MapArray[1811] = 3;
MapArray[1812] = 3;
MapArray[1813] = 3;
MapArray[1814] = 1;
MapArray[1815] = 4;
MapArray[1816] = 1;
MapArray[1900] = 1;
MapArray[1901] = 3;
MapArray[1902] = 3;
MapArray[1903] = 3;
MapArray[1904] = 4;
MapArray[1905] = 1;
MapArray[1906] = 1;
MapArray[1907] = 3;
MapArray[1908] = 1;
MapArray[1909] = 3;
MapArray[1910] = 1;
MapArray[1911] = 3;
MapArray[1912] = 1;
MapArray[1913] = 1;
MapArray[1914] = 1;
MapArray[1915] = 1;
MapArray[1916] = 1;
MapArray[2000] = 1;
MapArray[2001] = 3;
MapArray[2002] = 1;
MapArray[2003] = 1;
MapArray[2004] = 1;
MapArray[2005] = 1;
MapArray[2006] = 4;
MapArray[2007] = 3;
MapArray[2008] = 1;
MapArray[2009] = 3;
MapArray[2010] = 1;
MapArray[2011] = 3;
MapArray[2012] = 1;
MapArray[2013] = 4;
MapArray[2014] = 3;
MapArray[2015] = 4;
MapArray[2016] = 1;
MapArray[2100] = 1;
MapArray[2101] = 3;
MapArray[2102] = 3;
MapArray[2103] = 1;
MapArray[2104] = 4;
MapArray[2105] = 1;
MapArray[2106] = 1;
MapArray[2107] = 3;
MapArray[2108] = 1;
MapArray[2109] = 3;
MapArray[2110] = 1;
MapArray[2111] = 3;
MapArray[2112] = 1;
MapArray[2113] = 3;
MapArray[2114] = 1;
MapArray[2115] = 3;
MapArray[2116] = 1;
MapArray[2200] = 1;
MapArray[2201] = 3;
MapArray[2202] = 3;
MapArray[2203] = 1;
MapArray[2204] = 3;
MapArray[2205] = 1;
MapArray[2206] = 4;
MapArray[2207] = 3;
MapArray[2208] = 1;
MapArray[2209] = 3;
MapArray[2210] = 1;
MapArray[2211] = 3;
MapArray[2212] = 1;
MapArray[2213] = 3;
MapArray[2214] = 1;
MapArray[2215] = 3;
MapArray[2216] = 1;
MapArray[2300] = 1;
MapArray[2301] = 3;
MapArray[2302] = 3;
MapArray[2303] = 1;
MapArray[2304] = 3;
MapArray[2305] = 1;
MapArray[2306] = 3;
MapArray[2307] = 1;
MapArray[2308] = 1;
MapArray[2309] = 3;
MapArray[2310] = 1;
MapArray[2311] = 3;
MapArray[2312] = 1;
MapArray[2313] = 3;
MapArray[2314] = 1;
MapArray[2315] = 3;
MapArray[2316] = 1;
MapArray[2400] = 1;
MapArray[2401] = 3;
MapArray[2402] = 3;
MapArray[2403] = 1;
MapArray[2404] = 3;
MapArray[2405] = 1;
MapArray[2406] = 3;
MapArray[2407] = 1;
MapArray[2408] = 1;
MapArray[2409] = 3;
MapArray[2410] = 1;
MapArray[2411] = 3;
MapArray[2412] = 1;
MapArray[2413] = 3;
MapArray[2414] = 1;
MapArray[2415] = 3;
MapArray[2416] = 1;
MapArray[2500] = 1;
MapArray[2501] = 3;
MapArray[2502] = 3;
MapArray[2503] = 1;
MapArray[2504] = 3;
MapArray[2505] = 1;
MapArray[2506] = 3;
MapArray[2507] = 1;
MapArray[2508] = 1;
MapArray[2509] = 3;
MapArray[2510] = 1;
MapArray[2511] = 3;
MapArray[2512] = 1;
MapArray[2513] = 3;
MapArray[2514] = 1;
MapArray[2515] = 3;
MapArray[2516] = 1;
MapArray[2600] = 1;
MapArray[2601] = 3;
MapArray[2602] = 3;
MapArray[2603] = 1;
MapArray[2604] = 3;
MapArray[2605] = 1;
MapArray[2606] = 3;
MapArray[2607] = 1;
MapArray[2608] = 1;
MapArray[2609] = 3;
MapArray[2610] = 1;
MapArray[2611] = 3;
MapArray[2612] = 1;
MapArray[2613] = 3;
MapArray[2614] = 1;
MapArray[2615] = 3;
MapArray[2616] = 1;
MapArray[2700] = 1;
MapArray[2701] = 3;
MapArray[2702] = 3;
MapArray[2703] = 1;
MapArray[2704] = 3;
MapArray[2705] = 1;
MapArray[2706] = 4;
MapArray[2707] = 3;
MapArray[2708] = 1;
MapArray[2709] = 3;
MapArray[2710] = 1;
MapArray[2711] = 3;
MapArray[2712] = 1;
MapArray[2713] = 3;
MapArray[2714] = 1;
MapArray[2715] = 3;
MapArray[2716] = 1;
MapArray[2800] = 1;
MapArray[2801] = 3;
MapArray[2802] = 3;
MapArray[2803] = 1;
MapArray[2804] = 3;
MapArray[2805] = 1;
MapArray[2806] = 1;
MapArray[2807] = 3;
MapArray[2808] = 1;
MapArray[2809] = 3;
MapArray[2810] = 1;
MapArray[2811] = 4;
MapArray[2812] = 3;
MapArray[2813] = 4;
MapArray[2814] = 1;
MapArray[2815] = 3;
MapArray[2816] = 1;
MapArray[2900] = 1;
MapArray[2901] = 3;
MapArray[2902] = 1;
MapArray[2903] = 1;
MapArray[2904] = 3;
MapArray[2905] = 1;
MapArray[2906] = 4;
MapArray[2907] = 3;
MapArray[2908] = 1;
MapArray[2909] = 3;
MapArray[2910] = 1;
MapArray[2911] = 1;
MapArray[2912] = 1;
MapArray[2913] = 1;
MapArray[2914] = 1;
MapArray[2915] = 3;
MapArray[2916] = 1;
MapArray[3000] = 1;
MapArray[3001] = 3;
MapArray[3002] = 3;
MapArray[3003] = 3;
MapArray[3004] = 3;
MapArray[3005] = 3;
MapArray[3006] = 3;
MapArray[3007] = 3;
MapArray[3008] = 1;
MapArray[3009] = 3;
MapArray[3010] = 3;
MapArray[3011] = 3;
MapArray[3012] = 3;
MapArray[3013] = 3;
MapArray[3014] = 3;
MapArray[3015] = 3;
MapArray[3016] = 1;
MapArray[3100] = 1;
MapArray[3101] = 1;
MapArray[3102] = 1;
MapArray[3103] = 1;
MapArray[3104] = 1;
MapArray[3105] = 1;
MapArray[3106] = 1;
MapArray[3107] = 1;
MapArray[3108] = 1;
MapArray[3109] = 1;
MapArray[3110] = 1;
MapArray[3111] = 1;
MapArray[3112] = 1;
MapArray[3113] = 1;
MapArray[3114] = 1;
MapArray[3115] = 1;
MapArray[3116] = 1;

PacFrame[100*1 + 1] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan1.png";
PacFrame[100*1 + 2] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan2U.png";
PacFrame[100*1 + 3] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan3U.png";
PacFrame[100*1 + 4] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan2U.png";
PacFrame[100*1 + 5] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan1.png";

PacFrame[100*2 + 1] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan1.png";
PacFrame[100*2 + 2] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan2L.png";
PacFrame[100*2 + 3] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan3L.png";
PacFrame[100*2 + 4] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan2L.png";
PacFrame[100*2 + 5] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan1.png";

PacFrame[100*3 + 1] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan1.png";
PacFrame[100*3 + 2] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan2D.png";
PacFrame[100*3 + 3] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan3D.png";
PacFrame[100*3 + 4] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan2D.png";
PacFrame[100*3 + 5] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan1.png";

PacFrame[100*4 + 1] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan1.png";
PacFrame[100*4 + 2] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan2.png";
PacFrame[100*4 + 3] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan3.png";
PacFrame[100*4 + 4] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan2.png";
PacFrame[100*4 + 5] = "http://i147.photobucket.com/albums/r291/luciusxx/PacMan1.png";
                DrawMap();
            }
        </script>
    </head>

    <body onLoad = "LoadMap()";>

    </body>

</html>

The codes..
For the PacMan world editor!

Code: Select all

<html>
    <head>
        <title>Pac-Man Map Editor</title>

        <script type = "text/javascript";>
            //globals
                var Xsize = 1024;
                var Ysize = 544;

                var SquareSize = 32;
                var Xarray = [];
                var Yarray = [];

                var Blank = ["http://i147.photobucket.com/albums/r291/luciusxx/Blank_Black.png", 
                                         "http://i147.photobucket.com/albums/r291/luciusxx/Blank_Blue.png", 
                                         "http://i147.photobucket.com/albums/r291/luciusxx/PacMan1.png",
                                         "http://i147.photobucket.com/albums/r291/luciusxx/Dot-1.png",
                                         "http://i147.photobucket.com/albums/r291/luciusxx/Strawberry.png"
                                             
                                        ];
                var Object = document.getElementById('Body');

                var MapArray = [];
                var MapDiv = [];

                var MAPCODE;
            //endglobals   
        </script>

        <script type = "text/javascript";>
            function ChangePath (Index) {
                if (MapArray[Index] == 0) {
                     MapArray[Index] = 1;
                     MapDiv[Index].innerHTML = '<img src="' + Blank[1] + '";>';
                } else if (MapArray[Index] == 1) {
                     MapArray[Index] = 2;
                     MapDiv[Index].innerHTML = '<img src="' + Blank[2] + '";>';
                } else if (MapArray[Index] == 2) {
                     MapArray[Index] = 3;
                     MapDiv[Index].innerHTML = '<img src="' + Blank[3] + '";>';
                } else if (MapArray[Index] == 3) {
                     MapArray[Index] = 4;
                     MapDiv[Index].innerHTML = '<img src="' + Blank[4] + '";>';
                } else if (MapArray[Index] == 4) {
                     MapArray[Index] = 0;
                     MapDiv[Index].innerHTML = '<img src="' + Blank[0] + '";>';
                }

            }
        </script>

        <script type = "text/javascript";>
            function DrawMap () {
                var LoopX = 0;
                var LoopY = 0;
                var EndLoopX = Xsize / SquareSize;
                var EndLoopY = Ysize / SquareSize;

                if (Xsize % SquareSize == 0 && Ysize % SquareSize == 0) {
                    while (LoopX < EndLoopX) {

                        Xarray[LoopX] = LoopX*SquareSize;

                        while (LoopY < EndLoopY) {
                            Yarray[LoopY] = LoopY*SquareSize;

                            MapArray[100*LoopX + LoopY] = 0;
                            MapDiv[100*LoopX + LoopY] = document.createElement('div');
                            MapDiv[100*LoopX + LoopY].setAttribute('id', (100*LoopX + LoopY) + ' ');
                            MapDiv[100*LoopX + LoopY].style.position = 'absolute';
                            MapDiv[100*LoopX + LoopY].style.width = SquareSize + 'px';
                            MapDiv[100*LoopX + LoopY].style.height = SquareSize + 'px';
                            MapDiv[100*LoopX + LoopY].style.left = Xarray[LoopX] + 'px';
                            MapDiv[100*LoopX + LoopY].style.top = (Ysize - Yarray[LoopY]) + 'px';
                            MapDiv[100*LoopX + LoopY].setAttribute('onClick', 'ChangePath(' + (100*LoopX + LoopY) + ');');
                            MapDiv[100*LoopX + LoopY].innerHTML = '<img src="' + Blank[0] + '";>';

                             document.body.appendChild(MapDiv[100*LoopX + LoopY]);

                            LoopY = LoopY + 1;
                        }
                        
                        LoopX = LoopX + 1;
                        LoopY = 0;
                    }

                     //Create Section for MapCode To be Generated
                     MAPCODE = document.createElement('div');
                     MAPCODE.style.position = 'absolute';
                     //MAPCODE.style.width = Xsize + 'px';
                     //MAPCODE.style.height = Ysize + 'px';
                     MAPCODE.style.left = '0px';
                     MAPCODE.style.top = (Ysize + (SquareSize * 2)) + 'px';

                     document.body.appendChild(MAPCODE);

                } else {
                    alert('Wrong size definition for either X or Y');
                }
            }

        </script>

        <script type = "text/javascript">
            function GetCode () {
                   var LoopX = 0;
                   var LoopY = 0;
                   var EndLoopX = Xsize / SquareSize;
                   var EndLoopY = Ysize / SquareSize;

                   MAPCODE.innerHTML = ' ';                    

                   while (LoopX < EndLoopX) {
                       while (LoopY < EndLoopY) {
                           MAPCODE.innerHTML = MAPCODE.innerHTML + 'MapArray[' + (100*LoopX + LoopY) + '] = ' + MapArray[100*LoopX + LoopY] + ';<br>';                          

                           LoopY = LoopY + 1;
                       }

                       LoopX = LoopX + 1;
                       LoopY = 0;
                   }

            }
        </script>
    </head>

    <body onLoad = "DrawMap()";>

        <b>Map-Code:</b>
        <input type = "button"; onClick = "GetCode()"; value = "Get Map Code";>
    </body>

</html>

Post by **wizme** » Tue Jun 29, 2010 9:18 pm

Holy Shyt, thats a nice one! nice work

Post by **Nerrazzuri** » Tue Jun 29, 2010 9:24 pm

That was nice!=D

Post by **NoobHacker** » Tue Jun 29, 2010 10:26 pm

wow you type the map array yourself?
you can refrence the google pac man

its kinda hard to make game with javascript because you cannot extead anything and your functions is limited

Post by **LearningCode** » Wed Jun 30, 2010 2:05 am

Wow, you guys really did try it? O_O
T3T
I wanna' cry and hug you guys now T.T

Anyways,
@Hacker
Nah, I didn't type the entire array myself XD
I'd be mad if I did.
I made a 'PacMan map editor'.
You can make a map and hit: Get Map Code
It'll then hang for a while..
(Use of 2D arrays and a loop that goes through [100 * loop1 + loop2])
And generate a map-code that is used for the actual game's "LoadMap" function =x

The map-editor is primitive because I didn't need to have it be perfect.
I have a different kind of map editor now..
It's something I experimented on, just for the fun of it:

Code: Select all

<html>
    <head>
        <title>Map-Editor</title>

        <script type="text/javascript">
            var Size_Tile = 32;
            var Size_X = 20;
            var Size_Y = 15;

            //Non-configurables
            var Pixel_X = Size_X * Size_Tile;
            var Pixel_Y = Size_Y * Size_Tile;

            var Array_X = [];
            var Array_Y = [];
            var Array_Path = [];
            var Array_MapTileLowest = [];
            var Array_MapTileLow = [];
            var Array_MapTileNormal = [];
            var Array_MapTileHigh = [];
            var Array_MapTileHighest = [];

            var Solid = 1;
            var Ground = 0;
            var Above = 2;

            var SolidAmt = 0;
            var GroundAmt = 0;
            var AboveAmt = 0;

            var SolidX = -1;
            var SolidY = 0;
            var GroundX = -1;
            var GroundY = 0;
            var AboveX = -1;
            var AboveY = 0;

            var Tile_Path = [];
            var Tile_X = [];
            var Tile_Y = [];
            var Tile_Div = [];

            var SelectedIndex;
            var SelectedZ = 1;
            //Editor Buttons
            

        </script>

        <script type="text/javascript">
            function ChangeTile (Index, i, ii) {
                if (SelectedIndex > 100 * Above) {
                    Array_Path[Index] = Above;
                } else if (SelectedIndex > 100* Solid) {
                    Array_Path[Index] = Solid;
                } else if (SelectedIndex > 100* Ground) {
                    Array_Path[Index] = Ground;
                }

                if (SelectedZ == 1) {
                    Array_MapTileLowest[Index].innerHTML = '<img src="' + Tile_Path[SelectedIndex] + '">';
                } else if (SelectedZ == 2) {
                    if (!Array_MapTileLow[Index]) {
                        Array_MapTileLow[Index] = document.createElement('div');
                        Array_MapTileLow[Index].style.position = 'absolute';
                        Array_MapTileLow[Index].style.width = Size_Tile;
                        Array_MapTileLow[Index].style.height = Size_Tile;
                        Array_MapTileLow[Index].style.left = Array_X[i];
                        Array_MapTileLow[Index].style.top = Array_Y[ii];
                        Array_MapTileLow[Index].style.zIndex = SelectedZ;
                        Array_MapTileLow[Index].setAttribute('onClick', 'ChangeTile(' + (Index) + ', ' + i + ', ' + ii + ')');
                        Array_MapTileLow[Index].innerHTML = '<img src="' + Tile_Path[SelectedIndex] + '">';

                        document.body.appendChild(Array_MapTileLow[Index]);    
                    } else {
                        Array_MapTileLow[Index].innerHTML = '<img src="' + Tile_Path[SelectedIndex] + '">';
                    }
                } else if (SelectedZ == 3) {
                    if (!Array_MapTileNormal[Index]) {
                        Array_MapTileNormal[Index] = document.createElement('div');
                        Array_MapTileNormal[Index].style.position = 'absolute';
                        Array_MapTileNormal[Index].style.width = Size_Tile;
                        Array_MapTileNormal[Index].style.height = Size_Tile;
                        Array_MapTileNormal[Index].style.left = Array_X[i];
                        Array_MapTileNormal[Index].style.top = Array_Y[ii];
                        Array_MapTileNormal[Index].style.zIndex = SelectedZ;
                        Array_MapTileNormal[Index].setAttribute('onClick', 'ChangeTile(' + (Index) + ', ' + i + ', ' + ii + ')');
                        Array_MapTileNormal[Index].innerHTML = '<img src="' + Tile_Path[SelectedIndex] + '">';

                        document.body.appendChild(Array_MapTileNormal[Index]);
                    } else {
                        Array_MapTileNormal[Index].innerHTML = '<img src="' + Tile_Path[SelectedIndex] + '">';
                    }
                } else if (SelectedZ == 4) {
                    if (!Array_MapTileHigh[Index]) {
                        Array_MapTileHigh[Index] = document.createElement('div');
                        Array_MapTileHigh[Index].style.position = 'absolute';
                        Array_MapTileHigh[Index].style.width = Size_Tile;
                        Array_MapTileHigh[Index].style.height = Size_Tile;
                        Array_MapTileHigh[Index].style.left = Array_X[i];
                        Array_MapTileHigh[Index].style.top = Array_Y[ii];
                        Array_MapTileHigh[Index].style.zIndex = SelectedZ;
                        Array_MapTileHigh[Index].setAttribute('onClick', 'ChangeTile(' + (Index) + ', ' + i + ', ' + ii + ')');
                        Array_MapTileHigh[Index].innerHTML = '<img src="' + Tile_Path[SelectedIndex] + '">';

                        document.body.appendChild(Array_MapTileHigh[Index]);
                    } else {
                        Array_MapTileHigh[Index].innerHTML = '<img src="' + Tile_Path[SelectedIndex] + '">';
                    }
                } else if (SelectedZ == 5) {
                    if (!Array_MapTileHighest[Index]) {
                        Array_MapTileHighest[Index] = document.createElement('div');
                        Array_MapTileHighest[Index].style.position = 'absolute';
                        Array_MapTileHighest[Index].style.width = Size_Tile;
                        Array_MapTileHighest[Index].style.height = Size_Tile;
                        Array_MapTileHighest[Index].style.left = Array_X[i];
                        Array_MapTileHighest[Index].style.top = Array_Y[ii];
                        Array_MapTileHighest[Index].style.zIndex = SelectedZ;
                        Array_MapTileHighest[Index].setAttribute('onClick', 'ChangeTile(' + (Index) + ', ' + i + ', ' + ii + ')');
                        Array_MapTileHighest[Index].innerHTML = '<img src="' + Tile_Path[SelectedIndex] + '">';

                        document.body.appendChild(Array_MapTileHighest[Index]);
                    } else {
                        Array_MapTileHighest[Index].innerHTML = '<img src="' + Tile_Path[SelectedIndex] + '">';
                    }
                }
            }
        </script>

        <script type="text/javascript">
            function DrawMap () {
                var i = 0;
                var ii = 0;

                while (i < Size_X) {
                    while (ii < Size_Y) {
                        Array_Path[100*i + ii] = Ground;
                        Array_MapTileLowest[100*i + ii] = document.createElement('div');
                        Array_MapTileLowest[100*i + ii].style.position = 'absolute';
                        Array_MapTileLowest[100*i + ii].style.width = Size_Tile;
                        Array_MapTileLowest[100*i + ii].style.height = Size_Tile;
                        Array_MapTileLowest[100*i + ii].style.left = Array_X[i];
                        Array_MapTileLowest[100*i + ii].style.top = Array_Y[ii];
                        Array_MapTileLowest[100*i + ii].style.zIndex = 1;
                        Array_MapTileLowest[100*i + ii].setAttribute('onClick', 'ChangeTile(' + (100*i + ii) + ', ' + i + ', ' + ii + ')');
                        Array_MapTileLowest[100*i + ii].innerHTML = '<img src="http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/Empty.png">';

                        document.body.appendChild(Array_MapTileLowest[100*i + ii]);
            
                        ii = ii + 1;
                    }

                    i = i + 1;
                    ii = 0;
                }
            
            }

        </script>

        <script type="text/javascript">
            function SelectedTile (Index) {
                SelectedIndex = Index;
                document.getElementById('TileSelection').innerHTML = '<img src="' + Tile_Path[Index] + '">';
            }
        </script>

        <script type="text/javascript">
            function AddTile (Pathability, Tile_Filepath) {
                if (Pathability == Ground) {
                    GroundAmt = GroundAmt + 1;
                    Tile_Path[100*Ground + GroundAmt] = Tile_Filepath;

                    GroundX = GroundX + 1;
                    if (GroundX > 3) {
                        GroundX = 0;
                        GroundY = GroundY + 1
                    }

                    Tile_X[100*Ground + GroundAmt] = GroundX;
                    Tile_Y[100*Ground + GroundAmt] = GroundY;
                    Tile_Div[100*Ground + GroundAmt] = document.createElement('div');
                    Tile_Div[100*Ground + GroundAmt].style.position = 'absolute';
                    Tile_Div[100*Ground + GroundAmt].style.width = Size_Tile;
                    Tile_Div[100*Ground + GroundAmt].style.height = Size_Tile;
                    Tile_Div[100*Ground + GroundAmt].style.top = GroundY * Size_Tile;
                    Tile_Div[100*Ground + GroundAmt].style.left = GroundX * Size_Tile;
                    Tile_Div[100*Ground + GroundAmt].setAttribute('onClick', 'SelectedTile(' + (100*Ground + GroundAmt) + ')');
                    Tile_Div[100*Ground + GroundAmt].innerHTML = '<img src="' + Tile_Filepath + '">';

                    document.getElementById('GROUND').appendChild(Tile_Div[100*Ground + GroundAmt]);
                } else if (Pathability == Solid) {
                    SolidAmt = SolidAmt + 1;
                    Tile_Path[100*Solid + SolidAmt] = Tile_Filepath;

                    SolidX = SolidX + 1;
                    if (SolidX > 3) {
                        SolidX = 0;
                        SolidY = SolidY + 1
                    }

                    Tile_X[100*Solid + SolidAmt] = SolidX;
                    Tile_Y[100*Solid + SolidAmt] = SolidY;
                    Tile_Div[100*Solid + SolidAmt] = document.createElement('div');
                    Tile_Div[100*Solid + SolidAmt].style.position = 'absolute';
                    Tile_Div[100*Solid + SolidAmt].style.width = Size_Tile;
                    Tile_Div[100*Solid + SolidAmt].style.height = Size_Tile;
                    Tile_Div[100*Solid + SolidAmt].style.top = SolidY * Size_Tile;
                    Tile_Div[100*Solid + SolidAmt].style.left = SolidX * Size_Tile;
                    Tile_Div[100*Solid + SolidAmt].setAttribute('onClick', 'SelectedTile(' + (100*Solid + SolidAmt) + ')');
                    Tile_Div[100*Solid + SolidAmt].innerHTML = '<img src="' + Tile_Filepath + '">';

                    document.getElementById('SOLID').appendChild(Tile_Div[100*Solid + SolidAmt]);
                }

            }
        </script>

        <script type="text/javascript">
            function InitializeVariables () {
                var i = 0;
                var ii = 0;

                while (i < Size_X) {
                    Array_X[i] = i * Size_Tile;
                    i = i + 1;
                }

                while (ii < Size_Y) {
                    Array_Y[ii] = Pixel_Y - (ii*Size_Tile);
                    ii = ii + 1;
                }

                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/GrassCorner_2_TL.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/GrassCorner_2_TR.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/GrassCorner_1_TL.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/GrassCorner_1_TR.png');

                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/GrassCorner_2_BL.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/GrassCorner_2_BR.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/GrassCorner_1_BL.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/GrassCorner_1_BR.png');

                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/GrassT-Junction1.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/Grass1.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/GrassT-Junction2.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/JS-Project/Grass2.png');

                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/ThickGrassCorner_1_TL.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/ThickGrassCorner_1_TR.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/FlowersCorner_1_TL.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/FlowersCorner_1_TR.png');

                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/ThickGrassCorner_1_BL.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/ThickGrassCorner_1_BR.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/FlowersCorner_1_BL.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/FlowersCorner_1_BR.png');

                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/ThickGrass2.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/ThickGrass1.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/Flowers1.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/Flowers2.png');

                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/Plains1.png');
                AddTile(Ground, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/Empty.png');

                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A1-Solid/WaterCorner_1_TL.png');
                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A1-Solid/WaterCorner_1_TR.png');
                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A1-Solid/WaterT-Junction1.png');
                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A1-Solid/WaterT-Junction2.png');

                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A1-Solid/WaterCorner_1_BL.png');
                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A1-Solid/WaterCorner_1_BR.png');
                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A1-Solid/WaterT-Junction3.png');
                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A1-Solid/WaterHole1.png');

                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/Empty.png');
                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/Empty.png');
                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A1-Solid/WaterHole2.png');
                AddTile(Solid, 'http://i147.photobucket.com/albums/r291/luciusxx/A1-Solid/WaterHole3.png');


                //Call Draw-Function
                DrawMap();
            }
        </script>

        <script type="text/javascript">
            function ChangeLayer () {
                var LayerButton = document.getElementById('LayerEdit');
                if (LayerButton.value == 'Lowest') {
                    LayerButton.value = 'Low';
                    SelectedZ = 2;
                } else if (LayerButton.value == 'Low') {
                    LayerButton.value = 'Normal';
                    SelectedZ = 3;
                } else if (LayerButton.value == 'Normal') {
                    LayerButton.value = 'High';
                    SelectedZ = 4;
                } else if (LayerButton.value == 'High') {
                    LayerButton.value = 'Highest';
                    SelectedZ = 5;
                } else if (LayerButton.value == 'Highest') {
                    LayerButton.value = 'Lowest';
                    SelectedZ = 1;
                }
            }
        </script>

    </head>

    <body onload="InitializeVariables()">
        <div id="TileSelection" style="position:absolute; width:32px; height:32px; left:672px; top:0px">
            <img src="http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/Empty.png" alt="BlankSelection">
        </div>

        <div id="Text" style="position:absolute; left:714px; top:12px">
            <font face="LithosPro-Regular" color="Black" size="4">Current Selection!</font>
        </div>

        <div id="Zindex" style="position:absolute; left:672px; top:64px">
            <font face="LithosPro-Regular" color="Black" size="4">Current Layer:</font> <input id = "LayerEdit" type="button" value="Lowest" onClick="ChangeLayer()">
        </div>

        <div id="GROUND" style="position:absolute; width:160px; height:480px; left:672px; top:96px; background-color:white; z-index:10;">

        </div>

        <div id="SOLID" style="position:absolute; width:160px; height:480px; left:832px; top:96px; background-color:white; z-index:10;">

        </div>




    </body>
</html>

It's slightly more advanced..
But you have to add every tile manually and it got tiresome =x
Coding, not lazy, Graphics, VERY LAZY!!!!!

[EDIT]
Anyone know how a 3D array should look like?
I honestly have no idea.

I know that for 2Darrays,
[100 * Row + Column] will do as long as 'Column' is never 100, actually, it should be.. [(Column's max value + 1) * Row + Column]

But 3DArrays? Umm..
*Lost*

Post by **PIEzLOVERS** » Fri Jul 02, 2010 8:20 pm

WOW .... you typed that thing yourself O_O
or you just gotted it from google ?

OR you just editing most of the thing you got from google ?

Post by **LearningCode** » Fri Jul 02, 2010 9:42 pm

PIEzLOVERS wrote:WOW .... you typed that thing yourself O_O
or you just gotted it from google ?
OR you just editing most of the thing you got from google ?

Don't be an idiot >;(
All typed from scratch using notepad.

Of course, I took advantage of Photobucket for image hosting and photoshop to rip some graphics out.
Take a look at this:

Code: Select all

<html>
    <head>
        <title>SineCosine's Javascript RPG-Map Editor</title>

        <script type="text/javascript">
            //globals
            var Map_X = 20;
            var Map_Y = 15;

            var Tile_Pixel = 32;
            var Tile_Blank = "http://i147.photobucket.com/albums/r291/luciusxx/A2-Ground/Empty.png";

            var Array_Path = [];
            var Array_X = [];
            var Array_Y = [];
            var Array_Tile = [];

            var Selection_Tiles = [];
            var Selection_X = -1;
            var Selection_Y = 0;
            var Selection_Z = 1;
            var Selection_Current = Tile_Blank;
            var Selection_Index;

            var X_Threshold = 16;
            var Y_Threshold = 12;
            var X_Revert = 0;
            var Y_Revert = 0;

            var CoOrdinate;
            var TileSet = [];
            var HIDE;
            var CurrentSelection;

            var Eraser = 0;
            var Button_Eraser;
            var Button_GetCode;
            var Button_TileSet = [];

            var TileSet_MAX = 6;
            var CODE;
            var Array_TileIndex = [];

            //endglobals
        </script>

        <script type="text/javascript">
            function ShowXY (X, Y) {
                document.getElementById('XCo').value = X;
                document.getElementById('YCo').value = Y;
            }

            function ChangeZ (Z) {
                Selection_Z = Z;
                document.getElementById('ZCo').value = Z;
            }

            function ChangeTile (Index) {
                Selection_Index = Index;
                CurrentSelection.innerHTML = '<img src="' + Selection_Tiles[Index] + '">';
            }

            function ModifyTile (X, Y) {
                var loopy = 1;

                if (Eraser == 1) {
                    while (loopy <= TileSet_MAX) {
                        if (Array_Tile[(10000*loopy + 100*X + Y)]) {
                            document.body.removeChild(Array_Tile[(10000*loopy + 100*X + Y)]);
                            Array_Tile[10000*loopy + 100*X + Y] = null;
                        }
                        loopy = loopy + 1;
                    }
                    Array_Path[100*X + Y] = 0;
                } else {
                    CreateTile(X, Y, Selection_Z, Selection_Index);
                }
            }

            function EraserClick(Integer) {
                Eraser = Integer;
                if (Eraser == 1) {
                    Button_Eraser.value = 'Don\'t Use Eraser';
                    Button_Eraser.setAttribute('onClick', 'EraserClick(0);');
                } else {
                    Button_Eraser.value = 'Use Eraser';
                    Button_Eraser.setAttribute('onClick', 'EraserClick(1);');
                }

            }

            function ChangeTileset (Integer) {
                var loop = 1;

                while (loop <= TileSet_MAX) {
                    TileSet[loop].style.zIndex = -1;
                    loop = loop + 1;
                }
                TileSet[Integer].style.zIndex = 999;
            }

            function MapCode (INTEGER) {
                var LoopONE = 1;
                var LoopTWO = 0;
                var LoopTHR = 0;

                if (INTEGER == 1) {
                    CODE = CreateBodyDiv('CODE', Map_X * Tile_Pixel, Map_Y*Tile_Pixel, 0, Map_Y - 1, 99999, '');
                    while (LoopONE <= 6) {
                        while (LoopTWO < Map_X) {
                            while (LoopTHR < Map_Y) {
                                if (Array_Tile[10000*LoopONE + 100*LoopTWO + LoopTHR]) {
                                    CODE.innerHTML = CODE.innerHTML + '<br>' + 'Array_TileIndex[' + (10000*LoopONE + 100*LoopTWO + LoopTHR) + '] = ' + Array_TileIndex[10000*LoopONE + 100*LoopTWO + LoopTHR] + ';';
                                }

                                if (Array_Path[10000*(LoopONE-1) + 100*LoopTWO + LoopTHR] == 3 || Array_Path[10000*(LoopONE-1) + 100*LoopTWO + LoopTHR] == 4) {
                                    CODE.innerHTML = CODE.innerHTML + '<br>' + 'Array_Path[' + (100*LoopTWO + LoopTHR) + '] = 3;';
                                }
                                LoopTHR = LoopTHR + 1;
                            }

                            LoopTWO = LoopTWO + 1;
                            LoopTHR = 0;
                        }

                        LoopONE = LoopONE + 1;
                        LoopTWO = 0;
                        LoopTHR = 0;
                    }
                }

            }

        </script>

        <script type="text/javascript">
            function CreateTile (X, Y, Z, Index) {
                if (!Array_Tile[10000*Z + 100*X + Y]) {
                    Array_Tile[10000*Z + 100*X + Y] = document.createElement('div');
                    Array_Tile[10000*Z + 100*X + Y].style.position = 'absolute';
                    Array_Tile[10000*Z + 100*X + Y].style.width = Tile_Pixel;
                    Array_Tile[10000*Z + 100*X + Y].style.height = Tile_Pixel;
                    Array_Tile[10000*Z + 100*X + Y].style.left = X * Tile_Pixel;
                    Array_Tile[10000*Z + 100*X + Y].style.top = (Map_Y * Tile_Pixel) - (Y * Tile_Pixel);
                    Array_Tile[10000*Z + 100*X + Y].style.zIndex = Z;
                    Array_Tile[10000*Z + 100*X + Y].innerHTML = '<img src="'+Selection_Tiles[Index]+'">';
                    Array_Tile[10000*Z + 100*X + Y].setAttribute('onClick', 'ShowXY(' + X + ', ' + Y + '); ModifyTile(' + X + ', ' + Y + ');');
                    Array_TileIndex[10000*Z + 100*X + Y] = Index;

                    if (Z == 3 || Z == 4) {
                        Array_Path[100*X + Y] = Z;
                    }

                    document.body.appendChild(Array_Tile[10000*Z + 100*X + Y]);
                } else {
                    Array_Tile[10000*Z + 100*X + Y].innerHTML = '<img src="'+Selection_Tiles[Index]+'">';
                    Array_TileIndex[10000*Z + 100*X + Y] = Index;
                }
            }

        </script>

        <script type="text/javascript">
            function CreateBodyDiv (ID, Width, Height, X, Y, Z, Content) {
                var Div = document.createElement('div');

                Div.setAttribute('id', ID);
                Div.style.position = 'absolute';
                Div.style.width = Width;
                Div.style.height = Height;
                Div.style.top = (Map_Y * Tile_Pixel) - (Y * Tile_Pixel);
                Div.style.left = X * Tile_Pixel;
                Div.style.zIndex = Z;
                Div.style.overflow = 'auto';
                Div.style.backgroundColor = '#ffffff';
                Div.innerHTML = Content;

                document.body.appendChild(Div);

                return Div;

            }

            function CreateBodyButton (X, Y, Z, Value, ONCLICK) {
                var Div = document.createElement('input');

                Div.setAttribute('type', 'button');
                Div.style.position = 'absolute';
                Div.style.top = (Map_Y * Tile_Pixel) - (Y * Tile_Pixel);
                Div.style.left = X * Tile_Pixel;
                Div.style.zIndex = Z;
                Div.style.color = '#050';
                Div.style.backgroundColor = '#fed';
                Div.style.fontWeight = 700;
                Div.value = Value;
                Div.setAttribute('onClick', ONCLICK);

                document.body.appendChild(Div);

                return Div;
            }

        </script>

        <script type="text/javascript">
            function AddTile (Append, Set, Tile_Path) {
                var Div = document.createElement('div');

                Selection_X = Selection_X + 1;
                if (Selection_X == X_Threshold) {
                    Selection_X = X_Revert;
                    Selection_Y = Selection_Y + 1;
                }

                Selection_Tiles[10000*Set + 100*Selection_X + Selection_Y] = Tile_Path;

                Div.style.position = 'absolute';
                Div.style.width = Tile_Pixel;
                Div.style.height = Tile_Pixel;
                Div.style.top = (Selection_Y * Tile_Pixel);
                Div.style.left = Selection_X * Tile_Pixel;

                Div.innerHTML = '<img src="' + Tile_Path + '">';
                Div.setAttribute('onClick', 'ChangeTile(' + (10000*Set + 100*Selection_X + Selection_Y) + ');');

                Append.appendChild(Div);
            }

        </script>

        <script type="text/javascript">
            function loop (End, Start, FunctionCode) {
                var i = Start;

                while (i <= End) {
                    eval(FunctionCode);
                    i = i + 1;
                }

            }

            function StackedLoop (Loop1, Start1, Loop2, Start2, FunctionCode) {
                var i1 = Start1;
                var ii1 = i1 + Loop1;
                var i2 = Start2;
                var ii2 = i2 + Loop2;
            
                while (i1 < ii1) {
                    while (i2 < ii2) {
                        eval(FunctionCode);
                        i2 = i2 + 1;
                    }
                    i1 = i1 + 1;
                    i2 = Start2;
                }
            }

        </script>

        <script type="text/javascript">
            function FunctionMain () {
                var loopy = 1;
                StackedLoop(Map_X, 0, Map_Y, 0, "CreateTile(i1, i2, 0, Tile_Blank);")
                CoOrdinate = CreateBodyDiv('XY', 200, 96, Map_X + 2, Map_Y - 1, 999, '<font color="black" face="LithosPro-Regular" size="4"><table><tr><td>X-CoOrdinate: </td><td><input id = "XCo" type="text" disabled="true" value="0" size="1"></td></tr><tr><td>Y-CoOrdinate: </td><td><input id = "YCo" type="text" disabled="true" value="0" size="1"></td></tr><tr><td>Z-Index: </td><td><input id = "ZCo" type="text" disabled="true" value="1" size="1"></td></tr></table></font> ');

                CreateBodyDiv('Layers', 300, 32, Map_X + 9, Map_Y, 999, '<font color="#5c5ff1" face="LithosPro-Regular" size="4">--Layer Selection--</font>');

                CreateBodyDiv('Ground', 90, 32, Map_X + 8, Map_Y - 1, 999, '<font color="black" face="LithosPro-Regular" size="4">Ground:</font>');
                CreateBodyButton(Map_X + 11, Map_Y - 1, 1, 'Below', 'ChangeZ(1);');
                CreateBodyButton(Map_X + 13, Map_Y - 1, 1, 'Above', 'ChangeZ(2);');

                CreateBodyDiv('Solid', 90, 32, Map_X + 8, Map_Y - 2, 999, '<font color="black" face="LithosPro-Regular" size="4">Solid:</font>');
                CreateBodyButton(Map_X + 11, Map_Y - 2, 1, 'Below', 'ChangeZ(3);');
                CreateBodyButton(Map_X + 13, Map_Y - 2, 1, 'Above', 'ChangeZ(4);');

                CreateBodyDiv('Air', 90, 32, Map_X + 8, Map_Y - 3, 999, '<font color="black" face="LithosPro-Regular" size="4">Air:</font>');            
                CreateBodyButton(Map_X + 11, Map_Y - 3, 1, 'Below', 'ChangeZ(5);');
                CreateBodyButton(Map_X + 13, Map_Y - 3, 1, 'Above', 'ChangeZ(6);');

                CreateBodyDiv('SelectionPreview', 200, 32, Map_X + 16, Map_Y, 999, '<font color="#5c5ff1" face="LithosPro-Regular" size="4">--Selection--</font>');
                CurrentSelection = CreateBodyDiv('SelectionPic', Tile_Pixel, Tile_Pixel, Map_X + 16, Map_Y - 1, 999, '<img src="' + Tile_Blank + '">');


                loop(TileSet_MAX, 1, 'TileSet[i] = CreateBodyDiv(\'\' + i, 529, 401, Map_X + 2, Map_Y - 4, (999 - i*150), \'\');');

                while (loopy <= TileSet_MAX) {
                    Button_TileSet[loopy] = CreateBodyButton(Map_X + 18, Map_Y - 3 - loopy, 999, 'TileSet #' + loopy, 'ChangeTileset(' + loopy + ');');
                    loopy = loopy + 1;
                }

                HIDE = CreateBodyDiv('Hide4OtherLayers', 512, 384, Map_X + 2, Map_Y - 4, 800, '');
                HIDE.style.backgroundColor = 'white';

                Button_Eraser = CreateBodyButton(Map_X + 16, Map_Y - 2, 999, 'Use Eraser', 'EraserClick(1);');
                Button_GetCode = CreateBodyButton(Map_X + 16, Map_Y - 3, 999, 'Get MapCode', 'MapCode(1);');

                loop(9, 1, 'AddTile(TileSet[1], 1, \'http://i147.photobucket.com/albums/r291/luciusxx/A1-All/TileA1_0\' + i + \'.png\');');
                loop(192, 10, 'AddTile(TileSet[1], 1, \'http://i147.photobucket.com/albums/r291/luciusxx/A1-All/TileA1_\' + i + \'.png\');');

                Selection_X = -1;
                Selection_Y = 0;
                loop(9, 1, 'AddTile(TileSet[2], 2, \'http://i147.photobucket.com/albums/r291/luciusxx/A2-All/TileA2_0\' + i + \'.png\');');
                loop(192, 10, 'AddTile(TileSet[2], 2, \'http://i147.photobucket.com/albums/r291/luciusxx/A2-All/TileA2_\' + i + \'.png\');');

                Selection_X = -1;
                Selection_Y = 0;
                loop(9, 1, 'AddTile(TileSet[3], 3, \'http://i147.photobucket.com/albums/r291/luciusxx/A3-All/TileA3_0\' + i + \'.png\');');
                loop(128, 10, 'AddTile(TileSet[3], 3, \'http://i147.photobucket.com/albums/r291/luciusxx/A3-All/TileA3_\' + i + \'.png\');');

                Selection_X = -1;
                Selection_Y = 0;
                loop(9, 1, 'AddTile(TileSet[4], 4, \'http://i147.photobucket.com/albums/r291/luciusxx/A4-All/TileA4_0\' + i + \'.png\');');
                loop(240, 10, 'AddTile(TileSet[4], 4, \'http://i147.photobucket.com/albums/r291/luciusxx/A4-All/TileA4_\' + i + \'.png\');');

                Selection_X = -1;
                Selection_Y = 0;
                loop(9, 1, 'AddTile(TileSet[5], 5, \'http://i147.photobucket.com/albums/r291/luciusxx/A5-All/TileA5_0\' + i + \'.png\');');
                loop(128, 10, 'AddTile(TileSet[5], 5, \'http://i147.photobucket.com/albums/r291/luciusxx/A5-All/TileA5_\' + i + \'.png\');');

                Selection_X = -1;
                Selection_Y = 0;
                loop(9, 1, 'AddTile(TileSet[6], 6, \'http://i147.photobucket.com/albums/r291/luciusxx/B-All/TileB_0\' + i + \'.png\');');
                loop(256, 10, 'AddTile(TileSet[6], 6, \'http://i147.photobucket.com/albums/r291/luciusxx/B-All/TileB_\' + i + \'.png\');');

            }

        </script>
    </head>

    <body onload="FunctionMain()">


    </body>

</html>

SineCosine is my Forum name for TH.net
If you do find these codes from anywhere else on the net, give me the link and we'll see.

[EDIT]
Good luck finding a google'd site that'll give you this.

I was bored so..

I was bored so..

Re: I was bored so..

Re: I was bored so..

Re: I was bored so..

Re: I was bored so..

Re: I was bored so..

Re: I was bored so..