Langton's ant

nakkz

2012-01-03 13:20:05

License: MIT License

Fork: 0

Fav: 2

View: 132

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 129 lines
HTML 4 lines
CSS 1 lines

ラングトンの蟻．
かっちょいい色になるまでクリック連打．

Langton's ant

var CANVAS_WIDTH = 400;
var CANVAS_HEIGHT = 400;

var World = function(ctx){
  this.ctx = ctx;
  this.cellSize = 5;
  this.hNum = CANVAS_HEIGHT / this.cellSize;
  this.vNum = CANVAS_WIDTH / this.cellSize;
  this.bg1 = getColor();
  this.bg2 = getColor();

this.states = new Array(this.hNum * this.vNum);
  for(var i=0; i < this.vNum; i++){
    for(var j=0; j < this.hNum; j++){
      this.states[i + j * this.vNum] = false;
    }
  }
};

World.prototype = {
  draw : function(){
    for(var i=0; i < this.vNum; i++){
      for(var j=0; j < this.hNum; j++){
        var state = this.states[i + j * this.vNum];
        var color = state ? this.bg1 : this.bg2;
        this.drawAt(i, j, color);
      }
    }
  },

drawAt : function(x, y, color){
    this.ctx.fillStyle = color;
    this.ctx.fillRect(x * this.cellSize, y * this.cellSize, this.cellSize, this.cellSize);
  },

stateOf : function(x, y){
    return this.states[x + y * this.vNum];
  },

changeState : function(i, j){
    this.states[i + j * this.vNum] = !this.states[i + j * this.vNum]; 
  }
};

var Ant = function(world, startX, startY){
  this.world = world;
  this.direction = parseInt(Math.random() * 4, 10);
  this.x = startX;
  this.y = startY;
  this.color = getColor();
};

Ant.prototype = {
  draw : function(){
    this.world.drawAt(this.x, this.y, this.color);
  },

move : function(){
    if(this.world.stateOf(this.x, this.y)){
      this.direction--;
      if(this.direction < 0) this.direction += 4;
    } else {
      this.direction++;
      if(this.direction > 3) this.direction -= 4;
    }
    this.world.changeState(this.x, this.y);
    this.moveForward();
  },

moveForward : function(){
    switch(this.direction){
      case 0: this.y--; break;
      case 1: this.x++; break;
      case 2: this.y++; break;
      case 3: this.x--; break;
      default: break;
    }
    if(this.x < 0)                this.x += this.world.vNum;
    if(this.y < 0)                this.y += this.world.hNum;
    if(this.x >= this.world.vNum) this.x -= this.world.vNum;
    if(this.y >= this.world.hNum) this.y -= this.world.hNum;
  }
};

var getColor = function(){
  var r = parseInt(255*Math.random(), 10);
  var g = parseInt(255*Math.random(), 10);
  var b = parseInt(255*Math.random(), 10);
  return 'rgb(' + r + ', ' + g + ', ' + b + ')';
};

var init = function(){
  world = new World(ctx);
  ants = new Array(8);
  for(var i = 0; i < ants.length; i++) ants[i] = new Ant(world,i*10, i*10);
};

var canvas = document.getElementById('world');
var ctx = canvas.getContext('2d');
var world; 
var ants;

canvas.onclick = function(){
  if(intervalId != undefined){
    clearInterval(intervalId);
    intervalId = undefined;
  } else {
    intervalId = setInterval(intervalHandler, 1000/60);
  }
};

document.getElementById('colorchange').onclick = function(){
  for(var i in ants){
    ants[i].color = getColor();
  }
  world.bg1 = getColor();
  world.bg2 = getColor();
};

document.getElementById('reset').onclick = init;

var intervalHandler = function(){
  for(i in ants) ants[i].move(); 
  world.draw();
  for(i in ants) ants[i].draw();
};

init();
var intervalId = setInterval(intervalHandler, 1000/60);

Langton's ant

ラングトンの蟻．かっちょいい色になるまでクリック連打．var CANVAS_WIDTH = 400; var CANVAS_HEIGHT = 400; var World = function(ctx){ this.ctx = ctx; this.cellSize = 5; this.hNum = CANVAS_HEIGHT / this.cellSize; this.vNum = CANVAS_WIDTH / this.cellSize; this.bg1 = getColor(); this.bg2 = getColor(); this.states = new Array(this.hNum * this.vNum); for(var i=0; i < this.vNum; i++){ for(var j=0; j < this.hNum; j++){ this.states[i + j * this.vNum] = false; } } }; World.prototype = { draw : function(){ for(var i=0; i < this.vNum; i++){ for(var j=0; j < this.hNum; j++){ var state = this.states[i + j * this.vNum]; var color = state ? this.bg1 : this.bg2; this.drawAt(i, j, color); } } }, drawAt : function(x, y, color){ this.ctx.fillStyle = color; this.ctx.fillRect(x * this.cellSize, y * this.cellSize, this.cellSize, this.cellSize); }, stateOf : function(x, y){ return this.states[x + y * this.vNum]; }, changeState : function(i, j){ this.states[i + j * this.vNum] = !this.states[i + j * this.vNum]; } }; var Ant = function(world, startX, startY){ this.world = world; this.direction = parseInt(Math.random() * 4, 10); this.x = startX; this.y = startY; this.color = getColor(); }; Ant.prototype = { draw : function(){ this.world.drawAt(this.x, this.y, this.color); }, move : function(){ if(this.world.stateOf(this.x, this.y)){ this.direction--; if(this.direction < 0) this.direction += 4; } else { this.direction++; if(this.direction > 3) this.direction -= 4; } this.world.changeState(this.x, this.y); this.moveForward(); }, moveForward : function(){ switch(this.direction){ case 0: this.y--; break; case 1: this.x++; break; case 2: this.y++; break; case 3: this.x--; break; default: break; } if(this.x < 0) this.x += this.world.vNum; if(this.y < 0) this.y += this.world.hNum; if(this.x >= this.world.vNum) this.x -= this.world.vNum; if(this.y >= this.world.hNum) this.y -= this.world.hNum; } }; var getColor = function(){ var r = parseInt(255*Math.random(), 10); var g = parseInt(255*Math.random(), 10); var b = parseInt(255*Math.random(), 10); return 'rgb(' + r + ', ' + g + ', ' + b + ')'; }; var init = function(){ world = new World(ctx); ants = new Array(8); for(var i = 0; i < ants.length; i++) ants[i] = new Ant(world,i*10, i*10); }; var canvas = document.getElementById('world'); var ctx = canvas.getContext('2d'); var world; var ants; canvas.onclick = function(){ if(intervalId != undefined){ clearInterval(intervalId); intervalId = undefined; } else { intervalId = setInterval(intervalHandler, 1000/60); } }; document.getElementById('colorchange').onclick = function(){ for(var i in ants){ ants[i].color = getColor(); } world.bg1 = getColor(); world.bg2 = getColor(); }; document.getElementById('reset').onclick = init; var intervalHandler = function(){ for(i in ants) ants[i].move(); world.draw(); for(i in ants) ants[i].draw(); }; init(); var intervalId = setInterval(intervalHandler, 1000/60);<canvas id='world' width='400' height='400'></canvas> <br /> <input type="button" value="change color" id="colorchange" /> <input type="button" value="reset" id="reset" />body { background-color: #DDDDDD; font: 30px sans-serif; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/9YZf/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/nakkz/9YZf" title="Langton's ant">Langton's ant - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code

Favorite by

gaziya

31103:

CellularAutomaton

Langton's ant

Description どんなゲームですか？

Control Device

Fullscreen

style

code

Tweet

twitter

Tags

Favorite by