jeremyjia
commented
2 weeks ago //精灵对象之滑翔机插件 commentID:2169344009 var canvas; var ctx; var width = 300; var height = 200; var time = 0;
var t = 0; var gridColor = 'red'; var gridSize = 20; // 每个格子的大小 var gridWidth = 30; var gridHeight = 30; var grid = []; //initGrid(); function animateFrame2() { if(time==0){ initGrid(); } time++; canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); //ctx.clearRect(0, 0, 2048, 1536);
nextGeneration(ctx);
ctx.fillStyle = "red";
ctx.font = "50px Arial";
ctx.fillText("滑翔机演示!", 300, 700);}
function drawGrid(ctx) { for (var y = 0; y < gridHeight; y++) { for (var x = 0; x < gridWidth; x++) { if (grid[y][x]) { ctx.fillStyle = gridColor; ctx.fillRect(x gridSize, y gridSize, gridSize, gridSize); }else{ ctx.fillStyle = 'lightblue'; ctx.fillRect(x gridSize, y gridSize, gridSize, gridSize); } } } }
function initGrid() { for (var i = 0; i < gridHeight; i++) { grid[i] = []; for (var j = 0; j< gridWidth; j++) { grid[i][j] = false; } }
// 初始化滑翔机模式var arrayNum = [-2, -1, 0, 1, 2, 3]; var arrayColor = ['red', 'green', 'blue', 'yellow', 'black', 'orange']; var k = arrayNum[getRandomInt(0, 5)]; grid[2+k][3+k] = true; grid[3+k][4+k] = true; grid[4+k][2+k] = true; grid[4+k][3+k] = true; grid[4+k][4+k] = true; gridColor = arrayColor[k]; }
function countNeighbors(x, y) { var count = 0; for (var i = -1; i <= 1; i++) { for (var j = -1; j <= 1; j++) { var nx = x + i; var ny = y + j; if ( nx >= 0 && nx < gridWidth && ny >= 0 && ny < gridHeight && !(i === 0 && j === 0) && grid[ny][nx] ) { count++; } } } return count; }
function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; }
function nextGeneration(ctx) { var nextGrid = []; for (var i = 0; i < gridHeight; i++) { nextGrid[i] = []; for (var j = 0; j < gridWidth; j++) { nextGrid[i][j] = grid[i][j]; } }
for (var y = 0; y < gridHeight; y++) {
for (var x = 0; x < gridWidth; x++) {
var neighbors = countNeighbors(x, y);
if (grid[y][x]) {
if (neighbors < 2 || neighbors > 3) {
nextGrid[y][x] = false; // 死亡
}
} else {
if (neighbors === 3) {
nextGrid[y][x] = true; // 诞生
}
}
}
}
//grid = nextGrid;
for (var i = 0; i < gridHeight; i++) {
for (var j = 0; j < gridWidth; j++) {
grid[i][j] = nextGrid[i][j];
}
}
drawGrid(ctx);}
[x] 测试案例： http://localhost:8080/videodocs/findAll?issueId=1063