极乐门资源网

js实现消灭星星(web简易版)
网络编程 2024/12/23 佚名
2 0
极乐门资源网 Design By www.ioogu.com

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

思路：

模块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.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

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

暂无js实现消灭星星(web简易版)的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com