该楼层疑似违规已被系统折叠隐藏此楼查看此楼
Life Simulator
body {
margin: 10px;
}
#title {
text-align: center;
margin: auto;
position: absolute;
left: 0;
right: 0;
}
#myGraph {
height: 1000px;
margin-top: 50px;
width: 100%;
border: solid;
border-width: 1px;
}
Size:
Life Chance:
Refresh frequence:
Start Simulation
Stop Simulation
Continue Simulation
Save Data
let cp = document.getElementById('myGraph')
let ctx = cp.getContext('2d')
let width = document.getElementById('board').offsetWidth;
let height = document.getElementById('board').offsetHeight;
let size = document.getElementById('size')
let sizeVal = +size.value;
let rffVal = 500;
let arr = [];
let myInterval;
function initCanvas() {
let dpr = window.devicePixelRatio || 1;
let bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
let PIXEL_RATIO = dpr / bsr;
cp.style.width = width + "px";
cp.style.height = height + "px";
cp.width = width * PIXEL_RATIO;
cp.height = height * PIXEL_RATIO;
ctx.scale(PIXEL_RATIO, PIXEL_RATIO)
}
function paint() {
ctx.save();
ctx.clearRect(0, 0, width, height);
let lineNum = arr.length;
let colNum = arr[0].length;
for (let i = 0; i < lineNum; i += 1) {
for (let j = 0; j < colNum; j += 1) {
if (arr[i][j] === 0) {
ctx.fillStyle = '#000000'
} else {
ctx.fillStyle = '#FFFFFF'
}
ctx.fillRect(j*sizeVal, i*sizeVal, sizeVal, sizeVal)
}
}
ctx.restore();
}
function initData(lifeChance) {
arr = [];
let sumVal = 0;
let aliveVal = 0;
for (let j = 0; j < height; j += sizeVal) {
let oneLine = [];
for (let i = 0; i < width; i += sizeVal) {
let a = Math.random();
if (a >= lifeChance) {
oneLine.push(0)
} else {
aliveVal += 1;
oneLine.push(1)
}
sumVal += 1;
}
arr.push(oneLine)
}
console.log((aliveVal/sumVal*100).toFixed(2) + '% chance to live!')
}
function updateData() {
let lineNum = arr.length;
let colNum = arr[0].length;
let newArr = []
for (let i = 0; i < lineNum; i += 1) {
let oneLine = [];
for (let j = 0; j < colNum; j += 1) {
let neighborLifeNum = 0;
for (let left = j-1; left <= j+1; left += 1) {
for (let top = i-1; top <= i+1; top += 1) {
if (left < 0 || top < 0 || left >= colNum || top >= lineNum) {
continue;
}
if (left === j && top === i) {
continue;
}
neighborLifeNum += arr[top][left];
}
}
if (neighborLifeNum === 3) {
oneLine.push(1)
} else if (neighborLifeNum === 2) {
oneLine.push(arr[i][j]);
} else {
oneLine.push(0)
}
}
newArr.push(oneLine)
}
arr = newArr;
}
function startSimulation() {
paint();
myInterval = setInterval(d=>{
updateData();
paint();
}, rffVal)
}
function saveData() {
var content = JSON.stringify(arr);
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
if(navigator.appVersion.toString().indexOf(".NET")>0){
window.navigator.msSaveBlob(blob, "lifeSimulationData.json");
}
else{
var a = document.createElement("a");
a.href =window.URL.createObjectURL(blob);
a.download = "lifeSimulationData.json";
a.click();
document.body.appendChild(a);
}
}
function loadData() {
var file = document.getElementById("uploadFile").files[0];
var reader = new FileReader();
reader.onload = function(event) {
let content = event.target.result;
arr = JSON.parse(content)
startSimulation();
}
reader.readAsText(file,"UTF-8");
}
function init() {
initCanvas();
document.getElementById('go').addEventListener('click', d=>{
sizeVal = +size.value;
let lifeChance = +document.getElementById('lfc').value * 0.01;
rffVal = +document.getElementById('rff').value*100;
initData(lifeChance);
startSimulation();
});
document.getElementById('stop').addEventListener('click', d=>{
console.log('stop')
clearInterval(myInterval)
});
document.getElementById('continue').addEventListener('click', d=>{
startSimulation();
});
document.getElementById('save').addEventListener('click', d=>{
saveData();
})
document.getElementById('uploadFile').onchange = function() {
loadData();
}
}
init();
