7.29关灯游戏,用script实现

<!DOCTYPE html>

<head>

<title>关灯js版</title>

</head>

<body>

let rowCount = 10;

let colCount = 10;

let onColor = 'yellow';

let offColor = 'black';

let lightCount = 0;

let level = 1;

let lightWidth = 50;

let lightHeight = lightWidth;

let lightList = [];

//游戏初始化

function init(){

let wap = document.createElement('div');

wap.style.width = lightWidth * colCount + 'px';

wap.style.height = lightWidth * rowCount +'px';

wap.style.border = '1px solid gray';

wap.style.margin = 'auto';

wap.classList.add('clear');

let clearStyle = document.createElement('style');

clearStyle.innerText = '.clear:after {content :""; display: block; clear: both;}'

for(i = 0 ; i < 100 ; i++){

let light = document.createElement('div');

light.style.width = lightWidth + 'px';

light.style.height = lightHeight +'px';

light.style.border ='1px solid lightgray';

light.style.boxSizing = 'border-box';

light.style.backgroundColor = offColor;

light.style.float = 'left';

light.id = i;

light.onclick = myClick;

//push 从数组后面添加元素

lightList.push(light);

wap.appendChild(light);

}

document.body.appendChild(clearStyle);

document.body.appendChild(wap);

}

//游戏逻辑

function myClick(){

findLights(this);

}

function findLights(light){

turnLight(light);

//获取灯的下标

let index = parseInt(light.id);

let row = parseInt(index / colCount);

let upIndex = index - colCount;

if(upIndex >= 0){

turnLight(lightList[upIndex]);

}

let downIndex = index + colCount;

if(downIndex < lightList.length){

turnLight(lightList[downIndex]);

}

let leftIndex = index - 1;

let leftRow = parseInt(leftIndex / colCount);

if(leftIndex >= 0 && leftRow == row){

turnLight(lightList[leftIndex]);

}

let rightIndex = index + 1;

let rightRow = parseInt(rightIndex / colCount);

if(rightRow == row){

turnLight(lightList[rightIndex]);

}

//获胜判断

if(lightCount == 0){

alert('u win');

run();

}

function turnLight(light){

if(light.style.backgroundColor == onColor){

light.style.backgroundColor = offColor;

lightCount--;

}else{

light.style.backgroundColor = onColor;

lightCount++;

}

function next(level){

for(let i = 0 ; i < level; i++){

let randomIndex = parseInt(Math.random() * lightList.length);

findLights(lightList[randomIndex]);

}

function run(){

next(level++);

}

init();

run();

</script>

</body>

</html>

巴特西

7.29关灯游戏,用script实现

最新文章

热门文章