今日完成
// 获取格子dom节点
var box = document.getElementsByClassName("box");
// 创建判断格子是否重复的数组
var boxArr = [];
// 创建判断颜色是否重复的数组
var colorArr = [];
//随机改变X个格子颜色
function change(x) {
// 每次执行前先还原默认颜色
for (var i = 0; i < boxArr.length; i++) {
box[boxArr[i]].style.backgroundColor = "rgb(255, 165, 0)";
}
//生成新颜色前，清除之前生成的颜色后，清除数组，归零计数器
boxArr = [];
colorArr = [];
i = 0;
// 选取X个格子并修改颜色
for (var i = 0; i < x; i++) {
// 随机选取一个格子
var num = Math.floor(Math.random() * 9);
// 数组比对是否重复
if (boxArr.indexOf(num) < 0) {
// 不重复 数值加入数组
boxArr.push(num);
// 产生随机颜色的循环(死循环)
while (true) {
// 随机产生一个颜色
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var rgb = "rgb" + "(" + r + "," + g + "," + b + ")";
// 数组比对是否重复
if (colorArr.indexOf(rgb) < 0) {
// 未重复 加入数组
colorArr.push(rgb);
// 颜色赋值
box[num].style.backgroundColor = rgb;
//退出循环
break;
} //否则继续循环产生新颜色
}
} else {
// 重复 重新获取随机格子
i--;
}
}
}
之前写的代码稍微有点问题，重新修改了下
这个代码是
随机选择一个格子判断是否重复，然后随机生成一个颜色判断是否重复，不重复就赋值
循环三次，完成三个格子
缺点 仅能判断本次改变的格子不重复颜色不重复，不能判断是否与上一次改变的的同一格子重复 虽然概率极低
重构了下代码
可以保证两次变换的格子和颜色都不重复
/* =============== 复用模块================== */
//随机生成min~max的数
function mkRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// 随机生成rgb颜色
function mkRGB() {
var r = mkRandom(0, 255);
var g = mkRandom(0, 255);
var b = mkRandom(0, 255);
return "rgb(" + r + "," + g + "," + b + ")";
}
// 清除被修改的颜色
function cancelColor(x) {
//清除被修改颜色的格子
if (numArr.length <= x) {
for (var i = 0; i < numArr.length; i++) {
box[numArr[i]].style.backgroundColor = "rgb(255, 165, 0)";
}
} else {
for (var i = 0; i < numArr.length / 2; i++) {
box[numArr[i]].style.backgroundColor = "rgb(255, 165, 0)";
}
}
}
/* ===============创建变量================= */
// 创建格子数组
var numArr = new Array();
// 创建颜色数组
var colorArr = new Array();
// 获取类名为box的节点
var box = document.getElementsByClassName("box");
// 创建变量
var interval;
/* =================== function ===================== */
function change(x) {
// 清除被修改颜色的格子
cancelColor(x);
// 检测是否有两次的数据，
if (colorArr.length >= x * 2) {
for (var i = 0; i < 3; i++) {
// 删除最早的的数值
numArr.shift();
colorArr.shift();
}
}
// 生成三个不重复的格子
for (var i = 0; i < x; i++) {
var num = mkRandom(0, 8);
// 数值比对是否重复
if (numArr.indexOf(num) < 0) {
numArr.unshift(num);
} else {
i--;
}
}
// 生成三个不重复的颜色
for (var i = 0; i < x; i++) {
var color = mkRGB();
// 颜色比对是否重复且不等于格子原色
if (colorArr.indexOf(color) < 0 && color != "rgb(255,165,0)") {
colorArr.unshift(color);
} else {
i--;
}
}
}
function start() {
// 执行前清除定时器，防止多次点击加快计时器
clearInterval(interval);
interval = setInterval("change(3)", 1000);
}
function stop() {
clearInterval(interval);
cancelColor(3);
}
人数随输入框实时变化
function myInput() {
// 实时获取输入的数值
var totalNum = document.getElementById("count").value;
var killerNum, civilianNum;
// 判断平民及杀手人数
if (totalNum < 4 && totalNum > 18) {
killerNum = 0;
} else if (totalNum >= 4 && totalNum < 6) {
killerNum = 1;
} else if (totalNum >= 6 && totalNum < 9) {
killerNum = 2;
} else if (totalNum >= 9 && totalNum < 12) {
killerNum = 3;
} else if (totalNum >= 12 && totalNum < 16) {
killerNum = 4;
} else if (totalNum >= 16 && totalNum <= 18) {
killerNum = 5;
}
// 计算平民数量
civilianNum = totalNum - killerNum;
if (killerNum) {
document.getElementsByClassName("killer")[0].innerHTML = killerNum;
document.getElementsByClassName("civilian")[0].innerHTML = civilianNum;
} else {
document.getElementsByClassName("killer")[0].innerHTML = " ";
document.getElementsByClassName("civilian")[0].innerHTML = " ";
}
}
function startGame() {
var totalNum = document.getElementById("count").value;
// console.log(totalNum);
if (!(totalNum >= 4 && totalNum <= 18)) {
alert("请输入正确的数量");
}
}
遇到的问题
设置杀人数量计算平民数时，数量在4以下会出现负值
原因
if条件写的有漏洞，使其获得的杀手数量
写判断条件时要注意范围
明日计划
继续完成task2
返回列表
评论