用java实现消灭星星（网页版）

下面先放效果图

PS：实现了基本功能，一些额外的功能（如打乱、变色等）还没实现

因为用到排行榜，所以就连接上数据库，简单的建了一个表。后台代码大体上跟我上一篇博客的代码差不多，不过有几个点优化了一下，下面贴一些主要代码

//判断一竖数据是否全部为0(为空)public boolean isALlZero(int[][]arr,int y){for (int i = 0;i<arr[y].length;i++){if (arr[i][y] != 0){return false;}}return true;}//模拟消去0(下沉的过程)public void deleteZeo(int[][] arr,MultiValueMap<Integer,Integer> totalMap){Set<Integer> keySet =totalMap.keySet();int[]sort = new int[keySet.size()];//取出key的值，即横坐标的值Iterator<Integer> iterator = keySet.iterator();for(int i =0;iterator.hasNext();i++){sort[i] = iterator.next();}//排序(方便下沉交换值)Arrays.sort(sort);//下沉操作(值与0交换位置)for (int i = 0;i<sort.length;i++){List<Integer>list =totalMap.get(sort[i]);for (int j = 0;j<list.size();j++){int status = sort[i];while (status-1>=0){if (arr[status-1][list.get(j)]!=0){int temp=0;temp = arr[status][list.get(j)];arr[status][list.get(j)] = arr[status-1][list.get(j)];arr[status-1][list.get(j)] = temp;}status--;}}}//判断一竖是否为0,若是则连接两列for (int m = arr.length-1;m>=0;m--){if (isALlZero(arr,m)){int status = m;while (status+1<=arr.length-1){if (!isALlZero(arr,status+1)){for (int n = 0;n<arr.length;n++){int temp = 0;temp = arr[n][status];arr[n][status] = arr[n][status+1];arr[n][status+1] = temp;}}status++;}}}}

这里添加了一个合并中间列为空的两列的方法

前端页面部分js代码

点击开始游戏，开始加载星星

$("#starGame").on("click",function () {show();$("#score").html(0);$.post("starGameSer",function(data){var arr = new Array();for(var k = 0;k<data.length;k++){arr[k] = new Array();}for (var i =0;i<data.length;i++){for(var j = 0;j<data[i].length;j++){arr[i][j] = data[i][j];}}var lis ="";for (var i = 0;i<arr.length;i++){lis+= '<div>';for (var j = 0;j<arr.length;j++){if(arr[i][j]==0){lis+='<img style="visibility:hidden;" src="img/'+arr[i][j]+'.png"/>';}else {lis+= '<a href="javascript:xiaoqu('+i+','+j+')">'+'<img src="img/'+arr[i][j]+'.png"/>'+'</a>'}}lis+='</div>';}$("#mainFrm").html(lis);});});

点击星星，消去下沉合并和计分

//显示分数function showPoint() {$.ajax({url:"showPointServlet",success:function (data) {$("#score").html(data);}})}function xiaoqu(x,y) {$.ajax({type: "post",url: "judgeServlet",data: {x:x,y:y},dataType: "json",success: function(data){showPoint();if (data=="false"){alert("游戏结束!当前已无可消去的星星!");return;}var arr = new Array();for(var k = 0;k<data.length;k++){arr[k] = new Array();}for (var i =0;i<data.length;i++){for(var j = 0;j<data[i].length;j++){arr[i][j] = data[i][j];}}var lis ="";for (var i = 0;i<arr.length;i++){lis+= '<div>';for (var j = 0;j<arr.length;j++){if(arr[i][j]==0){lis+='<img style="visibility:hidden;" src="img/'+arr[i][j]+'.png"/>';}else {lis+= '<a href="javascript:xiaoqu('+i+','+j+')">'+'<img src="img/'+arr[i][j]+'.png"/>'+'</a>'}}lis+='</div>'}$("#mainFrm").html(lis);}});}

排行榜部分js代码

function show() {$.post("showRank",function(data){var str = "";for (var x = 0;x<data.length;x++){str +='<li>'+data[x].username+'&nbsp;&nbsp;&nbsp;'+data[x].score+'</li>';}$("#liebiao").html(str);});}

排行榜代码后端

import com.java.dao.RankDao;import com.java.model.Rank;import org.codehaus.jackson.map.ObjectMapper;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.ArrayList;import java.util.List;@WebServlet("/showRank")public class showRankServlet extends HttpServlet{RankDao rankDao = new RankDao();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("application/json;charset=utf-8");ObjectMapper mapper = new ObjectMapper();List<Rank> list = new ArrayList<>();list = rankDao.showRank();mapper.writeValue(resp.getOutputStream(),list);}}

后续完善了功能之后我会贴出所有的代码，大家有什么建议的话可以留言评论！