js實(shí)現(xiàn)消滅星星(web簡(jiǎn)易版)
昨天看視頻之后，整理思路，自己完成了簡(jiǎn)易版消滅星星
創(chuàng)新互聯(lián)企業(yè)建站,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營(yíng)經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對(duì)于成都網(wǎng)站建設(shè)、網(wǎng)站制作中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁中充分展現(xiàn)，通過對(duì)客戶行業(yè)精準(zhǔn)市場(chǎng)調(diào)研，為客戶提供的解決方案。
思路：
模塊1：初始化
- 初始化總分?jǐn)?shù)、當(dāng)前分?jǐn)?shù)、背景圖、選擇的星星分?jǐn)?shù)
- 初始化星星（生成二維數(shù)組，對(duì)二維數(shù)組的每一個(gè)對(duì)象設(shè)置樣式（長(zhǎng)、寬、背景圖），生成二維數(shù)組個(gè)div元素節(jié)點(diǎn)插入到游戲面板中）
模塊2：預(yù)判
判斷：
鼠標(biāo)移動(dòng)到某一個(gè)方塊，判斷上下左右是否有連接著的小方塊（采用遞歸方法），然后將其存儲(chǔ)到數(shù)組choose[]，移到其他方塊時(shí)，choose置為空
閃爍：
將已選中的小方塊設(shè)置樣式（縮放）
顯示選擇分?jǐn)?shù)：
設(shè)置初始分?jǐn)?shù)和遞增分?jǐn)?shù)，根據(jù)選中的塊數(shù)算出選中的分?jǐn)?shù)
模塊3：點(diǎn)擊
消失:
點(diǎn)擊已選中的小方塊，將連著的所有小方塊在二維數(shù)組的位置設(shè)置為空，清空choose數(shù)組
移動(dòng)：
下移：設(shè)置一個(gè)指針，指向最下面的行。每當(dāng)行+1，若遇到不為空的方塊，則pointer++,若遇到該列某行為空，則將pointer的行數(shù)設(shè)為i
左移：最底部的一行若有一列為空，將右邊的所有方塊的列-1
判斷：
每次點(diǎn)擊完成之后判斷游戲是否結(jié)束
代碼部分
html
html結(jié)構(gòu)很簡(jiǎn)單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./index.js"></script> <link rel="stylesheet" href="index.css" > </head> <body> <div id="pop_star"> <div id="target_score">目標(biāo)分?jǐn)?shù)：2000</div> <div id="now_score">當(dāng)前分?jǐn)?shù)：0</div> <div id="select_score">0塊 0分</div> </div> </body> </html>
CSS
css布局也很簡(jiǎn)單，相信不用我來說
* {
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;
}JS
/*
創(chuàng)建二維數(shù)組
*
*
* */
var table ;
var suqareWidth = 50 ; //一個(gè)星星/方塊邊長(zhǎng)
var boardWidth = 10 ; //橫豎方塊個(gè)數(shù)
var squareSet = [];//小方塊的集合，二維數(shù)組
var choose = [];//有相鄰的小方塊，將其放到這個(gè)數(shù)組
var timer = null ;
var baseScore = 5 ;
var stepScore = 10 ;
var totalScore = 0 ;
var targetScore = 1500;
var flag = true ;
var tempSquare = null;//在處理鼠標(biāo)動(dòng)作過程中，動(dòng)作被屏蔽，導(dǎo)致事件處理完成，有不連貫現(xiàn)象
function createSquare(value , row , col){
//創(chuàng)建小方塊節(jié)點(diǎn)
var blocks = document.createElement('div');
//設(shè)置樣式
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 < squareSet.length ; i ++){
for (var j = 0 ; j < squareSet[i].length ; j++) {
//嚴(yán)謹(jǐn)判斷
if (squareSet[i][j] == null) {
continue;
}
//將二維數(shù)組里面的小方塊對(duì)應(yīng)面板的行和列顯示
squareSet[i][j].row = i;
squareSet[i][j].col = j;
//列*方塊長(zhǎng)度
squareSet[i][j].style.transition = "left 0.3s, bottom 0.3s";
squareSet[i][j].style.left = squareSet[i][j].col * suqareWidth + 'px';
squareSet[i][j].style.bottom = squareSet[i][j].row * suqareWidth + 'px';
//背景圖
squareSet[i][j].style.backgroundImage = "url('img/" + squareSet[i][j].num + ".png')";
squareSet[i][j].style.backgroundSize = 'cover';
squareSet[i][j].style.transform = 'scale(0.95)';//是圖片縮小至原來的0.95倍
}
}
}
function checkLinked(square , arr){
//嚴(yán)謹(jǐn)判斷
if(square == null){
return;
}
//添加小方塊到arr
arr.push(square);
/*
判斷位于該小方塊左邊的小方格是否能被收錄進(jìn)選擇數(shù)組
1.小方格不能是最左邊的
2.小方格左邊必須有小方塊
3.小方塊左邊的要和該小方塊顏色相同
4.該小方塊左邊沒有被收錄到數(shù)組中去
5.遞歸
*
* */
//向左
if(square.col > 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 < boardWidth - 1 && 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.row < boardWidth - 1 && 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);
}
//向上
if(square.row > 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 ;
//設(shè)置計(jì)時(shí)器，讓其一之閃爍
timer = setInterval(function(){
for (var i = 0 ; i < arr.length ; i++) {
//設(shè)置縮放樣式
arr[i].style.border = "3px solid #BFEFFF";
arr[i].style.transform = "scale("+(0.9 + 0.05 *Math.pow(-1 , num))+")";
}
//小方塊閃爍完成之后num++,使其再次縮放
num++;
},300);
}
function back(){
//若計(jì)時(shí)器還存在，清楚計(jì)數(shù)器
if(timer != null){
clearInterval(timer);
}
//返回原樣式
for(var i = 0 ; i < squareSet.length ; i++){
for(var j = 0 ; j < squareSet[i].length ; j++){
//嚴(yán)謹(jǐn)判斷
if (squareSet[i][j] == null) {
continue;
}
squareSet[i][j].style.border = "0px solid #BFEFFF";
squareSet[i][j].style.transform = "scale(0.95)";
}
}
}
//選中分?jǐn)?shù)
function selectScore(){
var socre = 0 ;
//遍歷choose
for(var i = 0 ; i < choose.length ; i++){
socre += baseScore + stepScore * i ;
}
//嚴(yán)謹(jǐn)判斷
if (socre <= 0) {
return ;
}
//設(shè)置select_score的樣式
var select_score = document.getElementById('select_score');
select_score.innerHTML = choose.length + "塊" + socre + "分";
select_score.style.transition = null ;
//設(shè)置透明度，讓其突然顯示
select_score.style.opacity = 1 ;
//讓其逐漸消失
setTimeout(function(){
select_score.style.transition = 'opacity 1s';
select_score.style.opacity = 0;
},1000);
}
//鼠標(biāo)移動(dòng)到該小方塊時(shí)，閃爍
function mouseOver(obj){
//當(dāng)鼠標(biāo)在移動(dòng)到該方塊突然移動(dòng)到其他位置時(shí)
if(!flag){
tempSquare = obj;
return ;
}
//當(dāng)鼠標(biāo)移開選中的方塊之后，讓其回到原來的樣式
back();
//選擇相鄰相同的小方格
//傳一個(gè)數(shù)組
choose = [];
checkLinked(obj , choose);//obj是當(dāng)前鼠標(biāo)移到的小方塊，choose是存儲(chǔ)響鈴小方塊的數(shù)組
if (choose.length <= 1) {
choose = [] ;
return;
}
//將選中的設(shè)置樣式，讓其閃爍
flicker(choose);
//顯示所選中的小方塊的分?jǐn)?shù)
selectScore();
}
function move(){
/*
1.設(shè)置一個(gè)指針，開始的時(shí)候指針指向最下面一行
2.此時(shí)指針和j是否一樣，一樣都++。
3.若改行該列該列有小方塊，均++，反之j++,pointer不變，循環(huán)判斷該條件
3.當(dāng)j移動(dòng)到該列某行的小方塊，該小方塊存在，則將j指向的小方塊的位置設(shè)置為指針指向的那一個(gè)小方塊的位置
* */
//向下移動(dòng)
for (var i = 0 ; i < boardWidth ; i ++) {
var pointer = 0;//pointer指向小方塊，當(dāng)遇到null的時(shí)候停止，等待上面的小方塊落到這里來
for (var j = 0 ; j < boardWidth ; j ++) {
if (squareSet[j][i] != null) {
if (j != pointer) {
squareSet[pointer][i] = squareSet[j][i];
squareSet[j][i].row = pointer;
squareSet[j][i] = null;
}
pointer ++;
}
}
}
//橫向移動(dòng)
for (var i = 0 ; i < squareSet[0].length ; ) {
if (squareSet[0][i] == null) {
for (var j = 0 ; j < boardWidth ; j ++) {
squareSet[j].splice(i, 1);
}
continue;
}
i ++;
}
refresh();
}
function isFinish(){
for (var i = 0 ; i < squareSet.length ; i++) {
for (var j = 0 ; j < squareSet[i].length ; j++) {
//判斷周圍是否還有可消除的方塊
var temp = [];
checkLinked(squareSet[i][j] , temp);
if(temp.length > 1){
return false ;
}
}
}
return true;
}
function init(){
//獲取面板
table = document.getElementById('pop_star');
//創(chuàng)建二維數(shù)組
for(var i = 0 ; i < boardWidth ; i++){
squareSet[i] = new Array();
for(var j = 0 ; j < boardWidth; j++){
//創(chuàng)建小方塊
var square = createSquare(Math.floor(Math.random() * 5), i, j);
//鼠標(biāo)移動(dòng)到該方塊
square.onmouseover = function(){
mouseOver(this);
}
//點(diǎn)擊小方塊時(shí)的操作
square.onclick = function(){
//小方塊在被點(diǎn)擊的時(shí)候其他操作不能影響他的執(zhí)行
if(choose.length == 0 || !flag ){
return ;
}
flag = false;
tempSquare = null ;
/*
1.增加當(dāng)前分?jǐn)?shù)
2.小方塊消失
3.向下或想做移動(dòng)
4.判斷游戲是否結(jié)束
*/
var socre = 0 ;
//遍歷choose
for(var i = 0 ; i < choose.length ; i++){
socre += baseScore + stepScore * i ;
}
totalScore += socre ;//總分?jǐn)?shù)
//改變樣式
document.getElementById('now_score').innerHTML = '當(dāng)前分?jǐn)?shù)：' + totalScore;
//小方塊消失
/*
1.從二維數(shù)組里面移除選擇了的小方塊
2.在面板上移除div，不然div會(huì)一直占著格子
* */
for(var i = 0 ; i < choose.length ; i++){
//立即函數(shù)，立即出發(fā)該函數(shù)，否則的話，不會(huì)執(zhí)行
(function(i){
setTimeout(function(){
//將二維數(shù)組的某一值設(shè)置為空，后面的會(huì)向前移
squareSet[choose[i].row][choose[i].col] = null ;
//移除div
table.removeChild(choose[i]);
},i * 100);
})(i);
}
//移動(dòng)
setTimeout(function(){
move();
setTimeout(function(){
var finished = isFinish();
if(finished){
if (totalScore >= targetScore) {
alert('闖關(guān)成功');
} else{
alert('闖關(guān)失敗');
}
}else{//還可以繼續(xù)
choose = [] ;
flag = true;
mouseOver(tempSquare);
}
} , 300 + choose.length * 150);
},choose.length * 100);
}
//將小方塊放進(jìn)二維數(shù)組
squareSet[i][j] = square;
//將創(chuàng)建好的小方塊插入到面板中
table.appendChild(square);
}
}
//顯示小星星，刷新整個(gè)面板
refresh();
}
//頁面加載完成之后，初始化所有操作
window.onload = function(){
init();
}其實(shí)這里還有優(yōu)化的就是闖關(guān)部分，大致的思路就是，游戲每過一關(guān)增加目標(biāo)分?jǐn)?shù)，當(dāng)游戲結(jié)束時(shí)，闖關(guān)失敗，目標(biāo)分?jǐn)?shù)恢復(fù)初始值。
大家有什么不懂，可以在評(píng)論區(qū)評(píng)論。
jq進(jìn)階版的源碼詳情見我github，網(wǎng)址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
分享題目：js實(shí)現(xiàn)消滅星星(web簡(jiǎn)易版)
當(dāng)前地址：http://chinadenli.net/article18/gspedp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)、面包屑導(dǎo)航、營(yíng)銷型網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 企業(yè)建站的關(guān)鍵點(diǎn)有哪些 2016-08-06
- 企業(yè)建站網(wǎng)站規(guī)劃功能布局和板塊內(nèi)容 2020-04-01
- 企業(yè)建站前的網(wǎng)站規(guī)劃圖 2021-03-05
- 企業(yè)建站租用服務(wù)器應(yīng)該考慮的兩個(gè)因素 2022-10-05
- 企業(yè)建站需要注意哪些問題 2016-10-20
- 成都中小企業(yè)建站是定制網(wǎng)站還是選擇模板網(wǎng)站？ 2014-12-05
- 企業(yè)建站后怎么做優(yōu)化（二） 2016-08-10
- 關(guān)于企業(yè)建站的二三事 2016-10-08
- 百度指數(shù)在企業(yè)建站中的應(yīng)用 2021-02-07
- 企業(yè)建站如何確定網(wǎng)站設(shè)計(jì)風(fēng)格? 2016-04-07
- CDN有用嗎？企業(yè)建站用CDN加速有沒有用？ 2022-10-05
- 企業(yè)建站的規(guī)則及其相關(guān)要點(diǎn)，想明白就一定要先了解！ 2022-08-30