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

网络编程 2024/12/24 佚名

3 1 2

昨天看视频之后，整理思路，自己完成了简易版消灭星星

思路：

模块1：初始化

初始化总分数、当前分数、背景图、选择的星星分数
初始化星星（生成二维数组，对二维数组的每一个对象设置样式（长、宽、背景图），生成二维数组个div元素节点插入到游戏面板中）

模块2：预判

判断：

"color: #800000">闪烁：

"color: #800000">显示选择分数：

"color: #800000">点击

消失:

"color: #800000">移动：

"color: #800000">判断：

"htmlcode">

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/index.js">

CSS
css布局也很简单，相信不用我来说


* {
 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


/*
 创建二维数组
 * 
 * 
 * */
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 < squareSet.length ; i ++){
 for (var j = 0 ; j < squareSet[i].length ; j++) {
 //严谨判断
 if (squareSet[i][j] == null) {
 continue;
 }
 //将二维数组里面的小方块对应面板的行和列显示
 squareSet[i][j].row = i;
  squareSet[i][j].col = j;
  //列*方块长度
  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){
 //严谨判断
 if(square == null){
 return;
 }
 //添加小方块到arr
 arr.push(square);
 /*
 判断位于该小方块左边的小方格是否能被收录进选择数组
 1.小方格不能是最左边的
 2.小方格左边必须有小方块
 3.小方块左边的要和该小方块颜色相同
 4.该小方块左边没有被收录到数组中去
 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 ;
 //设置计时器，让其一之闪烁
 timer = setInterval(function(){
 for (var i = 0 ; i < arr.length ; i++) {
 //设置缩放样式
 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(){
 //若计时器还存在，清楚计数器
 if(timer != null){
 clearInterval(timer);
 }
 //返回原样式
 for(var i = 0 ; i < squareSet.length ; i++){
 for(var j = 0 ; j < squareSet[i].length ; j++){
 //严谨判断
 if (squareSet[i][j] == null) {
 continue;
 }
 squareSet[i][j].style.border = "0px solid #BFEFFF";
 squareSet[i][j].style.transform = "scale(0.95)";
 }
 }
 
}
//选中分数
function selectScore(){
 var socre = 0 ;
 //遍历choose
 for(var i = 0 ; i < choose.length ; i++){
 socre += baseScore + stepScore * i ;
 }
 //严谨判断
 if (socre <= 0) {
 return ;
 }
 //设置select_score的样式
 var select_score = document.getElementById('select_score');
 select_score.innerHTML = choose.length + "块" + socre + "分";
 select_score.style.transition = null ;
 //设置透明度，让其突然显示
 select_score.style.opacity = 1 ;
 //让其逐渐消失
 setTimeout(function(){
 select_score.style.transition = 'opacity 1s';
 select_score.style.opacity = 0;
 },1000);
 
}
//鼠标移动到该小方块时，闪烁
function mouseOver(obj){
 //当鼠标在移动到该方块突然移动到其他位置时
 if(!flag){
 tempSquare = obj;
 return ;
 }
 //当鼠标移开选中的方块之后，让其回到原来的样式
 back();
 //选择相邻相同的小方格
 //传一个数组
 choose = [];
 checkLinked(obj , choose);//obj是当前鼠标移到的小方块，choose是存储响铃小方块的数组
 if (choose.length <= 1) {
 choose = [] ;
 return;
 }
 //将选中的设置样式，让其闪烁
 flicker(choose);
 //显示所选中的小方块的分数
 selectScore();
}
function move(){
 /*
 1.设置一个指针，开始的时候指针指向最下面一行
 2.此时指针和j是否一样，一样都++。
 3.若改行该列该列有小方块，均++，反之j++,pointer不变，循环判断该条件
 3.当j移动到该列某行的小方块，该小方块存在，则将j指向的小方块的位置设置为指针指向的那一个小方块的位置
 * */
 //向下移动
 for (var i = 0 ; i < boardWidth ; i ++) {
 var pointer = 0;//pointer指向小方块，当遇到null的时候停止，等待上面的小方块落到这里来
 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 ++;
  }
 }
 }
 //横向移动
 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');
 //创建二维数组
 for(var i = 0 ; i < boardWidth ; i++){
 squareSet[i] = new Array();
 for(var j = 0 ; j < boardWidth; j++){
 //创建小方块
 var square = createSquare(Math.floor(Math.random() * 5), i, j);
 //鼠标移动到该方块
 square.onmouseover = function(){
 mouseOver(this);
 }
 //点击小方块时的操作
 square.onclick = function(){
 //小方块在被点击的时候其他操作不能影响他的执行
 if(choose.length == 0 || !flag ){
 return ;
 }
 flag = false;
 tempSquare = null ;
 /*
 1.增加当前分数
 2.小方块消失
 3.向下或想做移动
 4.判断游戏是否结束
 */ 
 var socre = 0 ;
 //遍历choose
 for(var i = 0 ; i < choose.length ; i++){
 socre += baseScore + stepScore * i ;
 }
 totalScore += socre ;//总分数
 //改变样式
 document.getElementById('now_score').innerHTML = '当前分数：' + totalScore;
 //小方块消失
 /*
 1.从二维数组里面移除选择了的小方块
 2.在面板上移除div，不然div会一直占着格子
 * */
 for(var i = 0 ; i < choose.length ; i++){
 //立即函数，立即出发该函数，否则的话，不会执行
 (function(i){
 setTimeout(function(){
 //将二维数组的某一值设置为空，后面的会向前移
 squareSet[choose[i].row][choose[i].col] = null ;
 //移除div
 table.removeChild(choose[i]);
 },i * 100);
 })(i);
 }
 //移动
 setTimeout(function(){
 move();
 setTimeout(function(){
 var finished = isFinish();
 if(finished){
 if (totalScore >= 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();
}


其实这里还有优化的就是闯关部分，大致的思路就是，游戏每过一关增加目标分数，当游戏结束时，闯关失败，目标分数恢复初始值。
大家有什么不懂，可以在评论区评论。
jq进阶版的源码详情见我github，网址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,消灭星星

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“js实现消灭星星(web简易版)”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

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

js实现页面图片消除效果

JavaScript实现移动端带transition动画的轮播效果

评论“js实现消灭星星(web简易版)”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接