疫情扩散模拟
基本要求
用21x21的网络模拟疫情扩散：
（1）初始时在中心位置存在一个传染源；
（2）开始传染，界面刷新，，已存在的传染源以0.1的概率分别向周围8个格子进行传染，已传染的不能再传染；
（3）循环第二步，直到网格填满或者重置；
（4）使用填充（感染）或不填充（未感染）表格来模拟扩散过程，每步还要输出感染格子的数量。
算法分析
由中心向外传播，由此传染范围可以分为10层（21x21方格）
定义一个全局变量（用于标记传染范围已经达到第几层）quanju
定义一个全局变量（用于记录已经感染了多少个方格）count
初始化界面（中心方格已经感染）
while(开始传染)
if 方格全部被感染
提示 已经全部感染，不能继续
else
判断quanju不能大于最大传染范围，否则将其限定为最大
for 传染层数范围内，进行传染
定义传染层内左上、左下、右上、右下四个位置坐标
for 遍历该传染层（一个大的正方形）内的每一个方格
if 如果该方格被感染了，可以去感染其他方格
定义传染层内每个方格的周围相邻的8个方格的位置坐标
对相邻的8个方格逐一进行传染（传染成功的概率为0.1）
判断位置坐标是否在0~20范围内（超出21x21）网格不做处理
if 方格未被感染
随机生成0~9内的一个整数
if 该整数为0（概率是0.1）
感染该方格
count++感染个数加一
quanju++传染层数加一
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.11.0.js"></script>
<style type="text/css">
.d1 {
margin: 10px 450px 10px 450px;
}
.d2 {
margin: 1px 1px 1px 1px;
display: inline-block;
}
</style>
<script type="text/javascript">
var quanju = -1;
$(document)
.ready(
function() {
for (var i = 0; i < 21; i++) {
for (var j = 0; j < 21; j++) {
var j_y = j < 10 ? '0' + j : j;
var i_x = i < 10 ? '0' + i : i;
var div_child = $("<div style=\"border: 1px solid blue; width: 20px; height: 20px;\" id=\"div"+i_x+j_y+"\" class=\"d2\"></div>");
var temp = i_x + "" + j_y;
//alert(temp);
$("#div_parent").append(div_child);
$('#div'+temp).css("background-color","green");
}
var br = $("<br>");
$("#div_parent").append(br);
}
$("#div1010").css("background-color", "red");
$("#reset").click(function () {
window.location.reload();
$("#count").val(1);
});
$("#ganran").click(function () {
var flag = 0;
var example = $("#div1010").css("background-color");
for (var i = 0; i < 21; i++) {
for (var j = 0; j < 21; j++) {
var j_y = j < 10 ? '0' + j : j;
var i_x = i < 10 ? '0' + i : i;
var temp = i_x + "" + j_y;
var c = $("#div"+temp).css("background-color");
//alert(JSON.stringify(c));
if (c !== example) {
flag = 1;
}
}
}
if (flag == 0) {
alert("已经全部感染！");
} else {
var x_0 = 10;
var y_0 = 10;
if (quanju>=9) {
quanju = 9;
}
if (quanju == -1) {
}
for (var i = -1; i <= quanju; i++) {
var left_up_x = x_0 - i - 1;
var left_up_y = y_0 - i - 1;
var left_wm_x = x_0 - i - 1;
var left_wm_y = y_0 + i + 1;
var rght_up_x = x_0 + i + 1;
var rght_up_y = y_0 - i - 1;
var rght_wm_x = x_0 + i + 1;
var rght_wm_y = y_0 + i + 1;
/*var x = left_up_x;
var y = left_up_y;*/
var row = 1+2*(i+1);
for (var x = left_up_x; x < left_up_x+row; x++) {
for (var y = left_up_y; y < left_up_y+row; y++) {
if ((parseInt(x)<=rght_up_x && parseInt(y)==left_up_y)||(parseInt(x)<=rght_wm_x && parseInt(y)==left_wm_y)||
(parseInt(x)==left_up_x && parseInt(y)<=left_wm_y)||(parseInt(x)==rght_up_x && parseInt(y)<=rght_wm_y)) {
//alert(x+","+y);
var j_y = y < 10 ? '0' + y : y;
var i_x = x < 10 ? '0' + x : x;
var temp = i_x + "" + j_y;
//$("#div"+temp).css("background-color", "red");
var test_1_x = x - 1;
var test_1_y = y - 1;
ganran(test_1_x, test_1_y);
var test_2_x = x - 1;
var test_2_y = y + 0;
ganran(test_2_x, test_2_y);
var test_3_x = x - 1;
var test_3_y = y + 1;
ganran(test_3_x, test_3_y);
var test_4_x = x + 0;
var test_4_y = y - 1;
ganran(test_4_x, test_4_y);
var test_5_x = x + 0;
var test_5_y = y + 1;
ganran(test_5_x, test_5_y);
var test_6_x = x + 1;
var test_6_y = y - 1;
ganran(test_6_x, test_6_y);
var test_7_x = x + 1;
var test_7_y = y + 0;
ganran(test_7_x, test_7_y);
var test_8_x = x + 1;
var test_8_y = y + 1;
ganran(test_8_x, test_8_y);
}
}
}
}
quanju++;
}
function ganran(x,y) {
if (x>=0&&x<=20&&y>=0&&y<=20) {
var example = $("#div1010").css("background-color");
var j_y = y < 10 ? '0' + y : y;
var i_x = x < 10 ? '0' + x : x;
var temp = i_x + "" + j_y;
var c = $("#div"+temp).css("background-color");
//alert(c);
/*if (c == example) {
alert("red,"+x+","+y);
}*/
if (c !== example) {
var suiji = Math.floor(Math.random()*10);
//alert("white,"+x+","+y+":"+suiji);
if (suiji==0) {
$("#div"+temp).css("background-color", "red");
var ganran_count = $("#count").val();
ganran_count++;
$("#count").val(ganran_count);
}
}
}
}
});
});
</script>
</head>
<body style="align-content: center;">
<div style="margin: 50px 450px 10px 450px;">
<p style="font-family: '华文仿宋'">模拟疫情扩散，每个感染的格子会以0.1的概率感染周围8个格子，以中心向外扩散。</p>
<div>
<input type="button" id="ganran" value="Click Me">
<input type="button" id="reset" value="重置"> 已感染
<input type="text" id="count" value="1" readonly="readonly"/>
</div>
</div>
<div class="d1" id="div_parent">
</div>
</body>
</html>
效果截图
仅供学习，若有错误，请指出