js实现消灭星星(web简易版)

 
 
 
 


 

 
目标分数：2000
 
当前分数：0
 
0块 0分
 

* {
 margin: 0px;
 padding: 0px;
 }

html, body {
 height: 100%;
 width: 100%;
}

#pop_star {
 width: 500px;
 height: 100%;
 background: url("./pic/background.png");
 margin-left: auto;
 margin-right: auto;
 position: relative;
 background-size: cover;
 font-size: 0px;
}

#target_score {
 width: 100%;
 height: 50px;
 line-height: 50px;
 text-align: center;
 color: white;
 font-size: 20px;
 position: relative;
}

#now_score {
 width: 100%;
 height: 50px;
 line-height: 50px;
 text-align: center;
 color: white;
 font-size: 20px;
 position: relative;
}

#select_score {
 width: 100%;
 height: 50px;
 line-height: 50px;
 text-align: center;
 color: white;
 font-size: 20px;
 position: relative;
 opacity: 0;
}

/*
 创建二维数组
 * 
 * 
 * */
var table ;
var suqareWidth = 50 ; //一个星星/方块边长
var boardWidth = 10 ; //横竖方块个数
var squareSet = [];//小方块的集合，二维数组
var choose = [];//有相邻的小方块，将其放到这个数组
var timer = null ;
var baseScore = 5 ;
var stepScore = 10 ;
var totalScore = 0 ;
var targetScore = 1500;
var flag = true ;
var tempSquare = null;//在处理鼠标动作过程中，动作被屏蔽，导致事件处理完成，有不连贯现象
function createSquare(value , row , col){
 //创建小方块节点
 var blocks = document.createElement('div');
 //设置样式
 blocks.style.width = suqareWidth + 'px';
 blocks.style.height = suqareWidth + 'px';
 blocks.style.display = 'inline-block';
 blocks.style.boxSizing = 'border-box';
 blocks.style.position = 'absolute';
 blocks.style.borderRadius = "12px";
 //小方块的行和列，小方块的num.jpg
 blocks.num = value ;
 blocks.row = row ;
 blocks.col = col ;
 return blocks;
}
function refresh(){
 for(var i = 0 ; i  0 && squareSet[square.row][square.col - 1]
 && squareSet[square.row][square.col - 1].num == square.num 
 && arr.indexOf(squareSet[square.row][square.col - 1]) == -1){
 checkLinked(squareSet[square.row][square.col - 1] , arr);
 }
 //向右
 if(square.col  0 && squareSet[square.row - 1][square.col]
 && squareSet[square.row - 1][square.col].num == square.num 
 && arr.indexOf(squareSet[square.row - 1][square.col]) == -1){
 checkLinked(squareSet[square.row - 1][square.col] , arr);
 }
}
//让选中的小方块闪烁
function flicker(arr){
 var num = 0 ;
 //设置计时器，让其一之闪烁
 timer = setInterval(function(){
 for (var i = 0 ; i  1){
 return false ;
 }
 }
 }
 return true;
}
function init(){
 //获取面板
 table = document.getElementById('pop_star');
 //创建二维数组
 for(var i = 0 ; i = targetScore) {
 alert('闯关成功');
 } else{
 alert('闯关失败');
 }
 }else{//还可以继续
 choose = [] ;
 flag = true;
 mouseOver(tempSquare);
 }
 } , 300 + choose.length * 150);
 },choose.length * 100);
 }
 //将小方块放进二维数组
 squareSet[i][j] = square;
 //将创建好的小方块插入到面板中
 table.appendChild(square);
 }
 }
 //显示小星星，刷新整个面板
 
 refresh();
}
//页面加载完成之后，初始化所有操作
window.Onload= function(){
 init();
}