Skip to content

Instantly share code, notes, and snippets.

@rsivapr
Last active December 20, 2015 09:39
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save rsivapr/6108940 to your computer and use it in GitHub Desktop.
Influence

I am currently enrolled for Coursera's Startup Engineering class. Part of the class revolves around coding in Node.js, and I had to learn Javascript for that. What better way than to implement an idea in code!

I decided to create a small extension of John Conway's Game of Life. This is a three state game, where the motivation is borrowed from a college community with three teams. Every person has eight friends, each of who can support one of the three teams.

Rules are defined to be:

  1. Camaraderie : If I have atleast 4 fans of the same team. I do not change. Else,
  2. Influence: If I am surrounded by fans of opponent teams, I pick the largest fanbase.
  3. Indesicion: If I am surrounded by fans of opponent teams and two of them are equal, I pick randomly.

Fun fact: For Camaraderie I started out with atleast 3 of the same team, but this is more interesting visually.

gameGrid = function(gridSize) {
var i;
window.a = [];
this.size = gridSize;
this.map = [];
for (i = 0; i < this.size; i++) {
this.map[i] = [];
}
};
//Initial configuration is built by using the Math.random() function.
//For this sample, I used N for NCSU, U for UNC, D for Duke.
gameGrid.prototype.randomConfig = function() {
var y, x, i;
for (y = 0; y < this.size; y++) {
for (x = 0; x < this.size; x++) {
var rand = Math.random() * 90;
if (Math.floor(rand) > 60) {
i = "D";
} else if (Math.floor(rand) > 30 && Math.floor(rand)<60 ) {
i = "U";
} else {
i = "N";
}
x = x % this.size;
y = y % this.size;
this.map[x][y] = i;
}
}
};
//We assume that the grid has no borders.
gameGrid.prototype.get = function(x, y) {
x = (this.size + x) % this.size;
y = (this.size + y) % this.size;
return this.map[x][y];
};
gameGrid.prototype.neighborFan = function(x, y) {
var count = {"U": 0 , "N": 0, "D":0 };
count[this.get(x + 1, y + 1)] += 1;
count[this.get(x + 1, y)] += 1;
count[this.get(x + 1, y - 1)] += 1;
count[this.get(x , y - 1)] += 1;
count[this.get(x - 1, y - 1)] += 1;
count[this.get(x - 1, y)] += 1;
count[this.get(x - 1, y + 1)] += 1;
count[this.get(x, y + 1)] += 1;
return count;
};
//Rules are below. They are
// 1. Camaraderie : If I have atleast 4 fans of the same team. I do not change. Else,
// 2. Influence: If I am surrounded by fans of opponent teams, I pick the largest fanbase.
// 3. Indesicion: If I am surrounded by fans of opponent teams and two of them are equal, I pick randomly.
// Fun fact: For Camaraderie I started out with atleast 3 of the same team, but this is more interesting visually.
gameGrid.prototype.generateStep = function() {
var i, x, y, newMap = [];
for (i = 0; i < this.size; i++) {
newMap[i] = [];
}
for (y = 0; y < this.size; y++) {
for (x = 0; x < this.size; x++) {
newMap[x][y] = this.get(x, y);
if (this.neighborFan(x,y)[this.get(x,y)] > 3) {
newMap[x][y] = this.get(x,y);
} else {
var maxProp = null,
data = this.neighborFan(x,y),
maxVal = -1;
for (var school in data) {
if (data[school] > maxVal) {
maxVal = data[school];
maxProp = school;
} else if (data[school] === maxVal){
var coinToss = Math.floor( Math.random() * 2 );
if (coinToss > 0) {
maxVal = data[school];
maxProp = school;
}
}
};
newMap[x][y] = maxProp;
}
}
}
this.map = newMap;
};
var test = new gameGrid(30, 30);
test.randomConfig();
var table = document.getElementById('output');
var plot = function() {
table.innerHTML = "";
for (var r = 0; r < test.map.length; r++) {
var row = table.insertRow(-1);
for (var c = 0; c < test.map[r].length; c++) {
var cell = row.insertCell(-1);
cell.appendChild(document.createTextNode(test.map[r][c] ));
if (test.map[r][c] === "N") {
cell.style.backgroundColor= "#CC0000";
} else if (test.map[r][c] === "D") {
cell.style.backgroundColor= "#001A57";
} else {
cell.style.backgroundColor="#56A0D3";
}
}
}
};
var timeStep = function() {
test.generateStep();
plot();
};
window.timeStep = timeStep;
plot();
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
td {
width: 15px;
height: 15px;
font-size: 1px;
border: 0px;
}
button {
float: right;
padding: 3px 12px;
margin-bottom: 10px;
font-size: 14px;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
height: 2em;
width: 20em;
}
button:hover,
button:focus {
color: #ffffff;
text-decoration: none;
}
</style>
</head>
<body>
<button onclick="timeStep()"> Next Step </button>
<table id="output" cellspacing="1"></table>
<script src="game.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment