遊戲簡介：
這是一個純js寫的小遊戲，遊戲開始時會有一些燈點亮，我們需要關掉所有亮着燈進入下一關卡，在點擊關燈時會對它四周的燈產生影響，如果燈是亮的就會關掉，否則就會打開。
第一步 製作遊戲界面
在界面製作過程中要注意 控制每行，每列燈的數量 添加index onOrOff 自定義屬性
for(i=0; i<lightRow * lightCol; i++){
// 創建 燈
var lightDiv = document.createElement('div');
lightDiv.style.width = lightWidth +'px';
lightDiv.style.height = lightHight + 'px';
lightDiv.style.background = beforeBg;
lightDiv.style.border = lightBorder + 'px solid black';
lightDiv.style.borderRadius = '10% 30%';
lightDiv.style.boxShadow = beforeSdow;
lightDiv.style.display = 'inline-block';
lightDiv.style.margin = lightMargin +'px';
lightDiv.onOrOff = false; //添加自定義屬性
lightDiv.index = i; //自定義屬性 index
lights.push(lightDiv);
mainDiv.appendChild(lightDiv);
lightDiv.onclick = lightClick; //點擊事件 點亮燈
}
第二步 點擊改變燈的狀態
點擊之前判斷燈的狀態， 如果是點亮的就關掉 改變它的屬性onOrrOff 爲false，如果是關的就點亮 改變它的屬性 onOrOff 爲true
//判斷燈的狀態
function lightJudge(a){
if(a.onOrOff == false){
a.style.background = afterBg;
a.style.boxShadow = afterSdow;
a.onOrOff = true;
flag++;
}else {
a.style.background = beforeBg;
a.style.boxShadow = beforeSdow;
a.onOrOff = false;
flag--;
}
}
第三步 改變點擊燈四周的狀態
在改變當前燈狀態的時候也要改變它四周的燈的狀態，如果亮就關掉，如果關掉就打開
function light_on_off(aa){
lightJudge(aa);// 當前
// 上
if(aa.index > lightCol - 1){
lightJudge(lights[aa.index - 10]);
}
// 右
if(aa.index % lightCol != (lightCol - 1)){
lightJudge(lights[aa.index + 1]);
}
// 下
if(aa.index < lightRow * (lightCol - 1)){
lightJudge(lights[aa.index + 10]);
}
// 左
if(aa.index % lightCol != 0){
lightJudge(lights[aa.index - 1]);
}
}
第四步 開始遊戲模擬點擊
隨機產生一個不大於燈個數的隨機數 用這個數作爲下標找數組lights相對應的燈並點擊
function startGame(){
//產生隨機數 並模擬點擊
for(i=0; i<start_onclick; i++){
num = Math.round(Math.random() * lightRow * lightCol -1 );
light_on_off(lights[num]);
}
}效果圖：
完整代碼：
html文件(lights.html)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/lights.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>js文件(lights.js)：
//定義變量
var lightRow = 10; // 行數
var lightCol = 10; // 列數
var lightWidth = 40; //燈的寬度
var lightHight = 40; //燈的高度
var lightBorder = 1; //邊框寬度
var beforeBg = 'black'; //初始背景
var afterBg = 'yellow'; //開燈背景
var beforeSdow = '0px 0px 10px gray'; //初始陰影
var afterSdow = '3px 3px 20px yellowgreen'; //燈點亮陰影
var lightMargin = 3; //燈的間距
var lights = []; //數組 用來裝燈
var start_onclick = 10; //初始模擬點擊次數
var flag = 0; // 記錄分數
var onclick_num = 0; //記錄點亮燈的數量
//獲取元素
var bob = document.getElementsByTagName('body')[0];
//創建 mainDiv
var mainDiv = document.createElement('div');
mainDiv.style.width = lightCol * (lightWidth + lightBorder * 2 + lightMargin *2 ) +'px';
bob.appendChild(mainDiv);
for(i=0; i<lightRow * lightCol; i++){
// 創建 燈
var lightDiv = document.createElement('div');
lightDiv.style.width = lightWidth +'px';
lightDiv.style.height = lightHight + 'px';
lightDiv.style.background = beforeBg;
lightDiv.style.border = lightBorder + 'px solid black';
lightDiv.style.borderRadius = '10% 30%';
lightDiv.style.boxShadow = beforeSdow;
lightDiv.style.display = 'inline-block';
lightDiv.style.margin = lightMargin +'px';
lightDiv.onOrOff = false; //添加自定義屬性
lightDiv.index = i; //自定義屬性 index
lights.push(lightDiv);
mainDiv.appendChild(lightDiv);
lightDiv.onclick = lightClick; //點擊事件 點亮燈
}
// 開始按鈕
var btn = document.createElement('button');
btn.innerText = '開始遊戲';
btn.style.fontSize = '1.5rem';
btn.style.borderRadius = '10px';
btn.style.outline = 'none';
btn.style.background = 'white';
btn.style.margin = '10px';
btn.onclick = startGame; //添加點擊事件 點擊開始遊戲
mainDiv.appendChild(btn);
//燈點亮方法
function lightClick(){
light_on_off(this);//傳參 this代表當前
//當燈全部被關掉時進入下一關
if(flag==0){
alert( '恭喜進入下一關，總共用了 ' + onclick_num +' 步' );
start_onclick += 1;
onclick_num = 0;
startGame();
}else{
onclick_num += 1;
}
}
//判斷燈的狀態
function lightJudge(a){
if(a.onOrOff == false){
a.style.background = afterBg;
a.style.boxShadow = afterSdow;
a.onOrOff = true;
flag++;
}else {
a.style.background = beforeBg;
a.style.boxShadow = beforeSdow;
a.onOrOff = false;
flag--;
}
}
//點擊當前 對它周圍的燈產生遊戲
function light_on_off(aa){
lightJudge(aa);// 當前
// 上
if(aa.index > lightCol - 1){
lightJudge(lights[aa.index - 10]);
}
// 右
if(aa.index % lightCol != (lightCol - 1)){
lightJudge(lights[aa.index + 1]);
}
// 下
if(aa.index < lightRow * (lightCol - 1)){
lightJudge(lights[aa.index + 10]);
}
// 左
if(aa.index % lightCol != 0){
lightJudge(lights[aa.index - 1]);
}
}
//開始遊戲
function startGame(){
//產生隨機數 並模擬點擊
for(i=0; i<start_onclick; i++){
num = Math.round(Math.random() * lightRow * lightCol -1 );
light_on_off(lights[num]);
}
}
startGame();