该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

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;

}

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();