Kirjautuminen

Haku

Tehtävät

Keskustelu: Koodit: JavaScript: Life-peli

Sivun loppuun

karvanaama [19.10.2002 13:59:37]

#

Conwayn vanha tuttu 'Life'-peli javascriptinä. Aika hidas kun en viittiny enää optimoida ;)

<html>
<meta name="keywords" Content="">
<meta name="content" content="">
<meta name="author" content="">
<head>
<title>The game of life in javascript</title>
<script language="Javascript1.2">
<!-- hide script
var countX = 20;
var countY = 20;
var delay = 100;
var cells = new Array(countX);
var changes = new Array();
var runner;
var dilly = true;

function Point(x, y, s) {
    this.x = x;
    this.y = y;
    this.state = s;
}

function switchImg(x,y) {
  if(isOn(x, y)) {
    setOff(x, y);
  } else {
    setOn(x, y);
  }
}
function isOn(x, y) {
  return (cells[y][x] == true);
}
function setOn(x, y) {
  eval( "document.all.cell" + x + "_" + y + ".style.backgroundColor='lightgreen'");
  cells[y][x] = true;
}
function setOff(x, y) {
  eval( "document.all.cell" + x + "_" + y + ".style.backgroundColor='red'");
  cells[y][x] = false;
}
function mapArrayToBoard() {
    for(var i = 0; i < changes.length; i++) {
        if( changes[i].state == true ) {
            setOn(changes[i].x, changes[i].y);
        } else {
            setOff(changes[i].x, changes[i].y);
        }
    }
}
function recalc() {
  var c;
  changes.length = 0;
  var idx = 0;
  for(var y = 0; y < countY; y++) {
    for(var x = 0; x < countX; x++) {
      c = countLivingNeighbours(x, y);
      switch(c) {
      case 3:
        if (! isOn(x, y))
            changes[idx++] = new Point(x, y, true);
        break;
      case 2:
        break;
      default:
        if(isOn(x, y))
           changes[idx++] = new Point(x, y, false);
      }
    }
  }
  for(c = 0; c < changes.length; c++) {
    cells[changes[c].y][changes[c].x] = changes[c].state;
  }
}
function countLivingNeighbours(x, y) {
  var c = 0;
  if(x > 0) {
    if (y > 0)
        if(cells[y-1][x-1] == true)c++;
    if(cells[y][x-1] == true)c++;
    if (y < countY-1)
        if(cells[y+1][x-1] == true)c++;
  }
  if(y > 0)
      if(cells[y-1][x] == true) c++;
  if(y < countY-1)
      if(cells[y+1][x] == true) c++;
  if(x < countX-1) {
    if(y > 0)
        if(cells[y-1][x+1] == true) c++;
    if(cells[y][x+1] == true)  c++;
    if(y < countY-1)
        if(cells[y+1][x+1] == true)  c++;
  }
  return c;
}
function run() {
  step();
  runner = setTimeout("run()", delay);
}
function step() {
  recalc();
  mapArrayToBoard();
}
function stop() {
  if(runner != null) clearTimeout(runner);
}
function reset() {
    changes.length = 0;
    for(var y = 0; y < countY; y++) {
        for(var x = 0; x < countX; x++) {
            cells[y][x] = false;
            setOff(x, y);
        }
    }
    mapArrayToBoard();
}
function init() {
  for(var y = 0; y < countY; y++) {
    cells[y] = new Array(countX);
    for (var x = 0; x < countX; x++) {
      eval( "document.all.cell" + x + "_" + y + ".style.backgroundColor='red'");
      cells[y][x] = false;
    }
  }
  mapArrayToBoard();
}
function pattern(idx) {
    reset();
    switch(idx) {
    case 0:
        break;
    case 1:
        createGlider();
        break;
    case 2:
        createPiHept();
        break;
    case 3:
        createRPent();
        break;
    default:
    }
}
function createGlider() {
    var posX = countX/2;
    var posY = countY/2;
    var idx = 0;
    changes[idx++] = new Point(posX-1, posY-1, true);
    changes[idx++] = new Point(posX, posY-1, true);
    changes[idx++] = new Point(posX+1, posY-1, true);
    changes[idx++] = new Point(posX-1, posY, true);
    changes[idx++] = new Point(posX, posY+1, true);
    mapArrayToBoard();
}
function createPiHept() {
    var posX = countX/2;
    var posY = countY/2;
    var idx = 0;
    changes[idx++] = new Point(posX-1, posY-1, true);
    changes[idx++] = new Point(posX, posY-1, true);
    changes[idx++] = new Point(posX+1, posY-1, true);
    changes[idx++] = new Point(posX-1, posY, true);
    changes[idx++] = new Point(posX-1, posY+1, true);
    changes[idx++] = new Point(posX+1, posY, true);
    changes[idx++] = new Point(posX+1, posY+1, true);
    mapArrayToBoard();
}
function createRPent() {
    var posX = countX/2;
    var posY = countY/2;
    var idx = 0;
    changes.length = 0;
    changes[idx++] = new Point(posX-1,posY-1,true);
    changes[idx++] = new Point(posX, posY-1, true);
    changes[idx++] = new Point(posX, posY, true);
    changes[idx++] = new Point(posX+1, posY, true);
    changes[idx++] = new Point(posX, posY+1, true);
    mapArrayToBoard();
}
// -->
</script>
<script language="JavaScript" src="misc/functions.js"></script>

</head>

<body onLoad="init();" background="images/pawz_yellow.jpg">

<h2 align="center" style="color:maroon;">Conway's Game of Life in Javascript.</h2>
<div align="center">
<input type="button" onClick="run();" value="Run">
<input type="button" onClick="stop();" value="Stop">
<input type="button" onClick="step();" value="Step">
<input type="button" onClick="reset();" value="Reset">
<!-- booh, let's user create own patterns...
<select name="patterns" size=1 onChange="pattern(selectedIndex);">
<option>-- patterns --
<option>Glider
<option>Pi Heptomino
<option>R Pentomino
</select>
-->
<hr width="50%">
<script language="Javascript">
<!-- hide script
document.write('<table border="1" cellspacing="0" cellpadding="0"><tr>');
for(var j = 0;j < countY; j++) {
  for(var i = 0; i < countX; i++) {
    document.write("<td style='width:10px;height:12px;'");
    document.write(" id='cell" + i + "_" + j + "'");
    document.write(" onClick='switchImg(" + i + "," + j + ");'></td>\n");
  }
  document.write('</tr><tr>');
}
document.write('</tr></table>');
// -->
</script>
<hr width="50%">
<div align='center' style='color:red;width:400px;'>
</div>
<div style="width:400px;text-align:center;" align="center">
<ul style="text-align:left;">First create "alive" cells and then click Run-button.<br><br><b>Rules:</b><ul>
<li>If a cell has two "neighbours", it stays alive.</li>
<li>If a empty cell has three "neighbours", it becomes alive.</li>
<li>If a cell has less than two "neighbours" or more than three "neighbour", it dies.</li>
</ul></ul>

To be honest, this is not a true implementation of the Game of Life, because the
board is a finite size. Maybe one day I'll get round to making it infinite, but
it was fun to write it as it is.
</div>
<hr width="50%">
</div>

</body>
</html>

Antti Laaksonen [20.10.2002 13:39:31]

#

Hyvin tuntuu toimivan. JavaScriptille en olekaan ennen nähnyt Life-peliä ;)

progo [20.10.2002 15:51:34]

#

Hyvä hyvä, tuollaisia me juuri kaivataankin, eli vanhoja ideoita uusilla toteutuspohjilla. Tuo on *todella* hyvä versio siitä vanhasta.

(nimetön) [20.10.2002 16:43:54]

#

Mikäs tossa on ideana?

thefox [20.10.2002 17:34:27]

#

http://www.radicaleye.com/lifepage/
Katos vaikka tuo..

MMM [21.10.2002 16:16:46]

#

UPEA!!!

KimmoKM [21.10.2002 17:23:58]

#

Hieno!
En uskonut että tuollaista saa javascriptillä aikaan. Ei sen tarvitsekkaan olla niin nopea, koska älyttöman nopeasta ei ehdi nähdä mitään.

Dude1 [01.11.2002 17:25:12]

#

Aika lievän nätti :))

lahtis [03.05.2003 19:19:19]

#

toimii ie 6.0

ei toimi
Opera 7.10
Mozilla 1.4a
K-Meleon 0.7.1
se siitä..
mutta hauska toteutus.

akunurmio1 [11.07.2003 14:09:10]

#

Miten tätä ees pelataan?
Torvet!

Aku

Monkkats [24.09.2003 21:33:48]

#

En kyl oikee tajunnu mitä tos tehää :D

Matti Kaijomaa [10.02.2004 15:02:35]

#

Siinä pitää laittaa niitä pallukoita pelikentälle ja sit ku pistää sen käyntii nii ne pallukat liikkuu ja tekee hienoja kuvioita.

Jyri [16.05.2004 11:49:51]

#

Tosi siisti!

Ahti [11.11.2004 18:59:46]

#

ihan hauska mut ei toimi IE5:dessä!
Eikä Mozillassa!!!

nikkenakkerton [16.02.2005 11:31:50]

#

aika ihmeellinen...

xmetal [17.02.2005 16:29:32]

#

voisko tota käyttää omalla sivulla?tai antaisitko käyttää?

makas [17.02.2005 16:47:46]

#

Hauska :D

jack [29.09.2005 07:55:16]

#

Todella hieno!!

gamehouse [15.06.2007 18:13:34]

#

wow!

jlaire [04.07.2007 10:19:53]

#

Ihan hieno!

Koodi on muuten selkeää, mutta countLivingNeighbours on todella häiritsevä. Lailla pitäisi kieltää tuollaiset viritykset. Vaikkapa näin sen saisi vähän loogisemmin:

function countLivingNeighbours(x, y) {
    var c = 0, i, j, x2, y2;

    for (i = -1; i <= 1; i++) {
        x2 = x + i;

        if (x2 < 0) {x2 = countX - 1}
        else if (x2 >= countX) {x2 = 0}

        for (j = -1; j <= 1; j++) {
            y2 = y + j;
            if (x2 == x && y2 == y) {continue}

            if (y2 < 0) {y2 = countY - 1}
            else if (y2 >= countY) {y2 = 0}

            if (cells[y2][x2]) {c++}
        }
    }
    return c;
}

Tuo myös muuttaa alueen "donitsiksi", eli reunat eivät rajoita sitä vaan niistä mennään ulos ja toiselta puolelta tullaan sisään. Vähän kömpelöitä nuo for-silmukat, mutta en saanut while (i++ <= 1)-ideaa tai mitään muuta vastaavaa jostain syystä toimimaan. JavaScript ei vielä oikein suju.

Malfunc [13.09.2007 13:52:31]

#

Hmm. Aika hieno itseasiassa. Se luo Aivan tavallisen HTML taulukon, jonka solujen taustaväri muuttuu. HTML:län tylsä taulukko muuttuu bittikartaksi!

teemuh [14.09.2011 16:38:57]

#

hei voisiko joku tehdä mulle semmosen scriptin joka klikkailee semmosia punaisia G kirjaimia sellasel 6*12 alueella salaman nopeasti klikkailis niitä ja siel on myös sellaisia hymiöitä sc awesome faces ja sitten vääriä G kirjaimia joita ei saisi klikata.ja jos joku viittii tehdä niin lähetä minun sähköpostiin wippies1@luukku.com tonne lähetä se scripti kiitos olisin kiitollinen siitä scriptistä! http://www.kongregate.com/games/Tukkun/anti-idle-the-game tossa on peli jossa käyttäisin sitä.
tässä on vähän sen näkönen http://www.youtube.com/watch?v=mM4-RLc2Djg se on vähän muuttunut niiltä ajoilta olisi parempi jos menisitte tohon kongregaten sivulle vedätte äkkiä taso 80 menee about 1-2tunnissa sitten arcade ja greg whacking niin näette itse mikä periaate siinä on.

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta