Keskustelu: Koodit: JavaScript: Life-peli

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.

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.

Kirjautuminen

Haku

Tehtävät

Kilpailu