javascript实现消灭星星小游戏简单版
投稿：daisy
字体：[ ] 类型：转载 时间：
消灭星星是一款经典的益智手游,单位里看到同事天天在手机上玩的游戏，现在也有web版了,出于业余爱好，自己尝试用javascript实现了下，就是略简单了点，文中给出了完整的实例代码，大家可以自行完善！！下面来一起看看吧。
来看看实现的效果图
游戏规则：双击颜色一样的星星，双击相同的部分就消失了
&!DOCTYPE html&
&meta charset="utf-8" content="target-densitydpi=320,width=640,user-scalable=no" /&
&noscript&&meta http-equiv="refresh" content="0"&&/noscript&
&title&&/title&
&meta name="description" id="seo_description" content="消灭星星"&
&meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no"&
&meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)"&
&meta name="apple-mobile-web-app-capable" content="yes"&
&meta name='apple-touch-fullscreen' content='yes'&
&meta name="full-screen" content="yes"&
&meta name="apple-mobile-web-app-status-bar-style" content="black"&
&meta name="format-detection" content="telephone=no"&
&meta name="format-detection" content="address=no"&
&link rel="icon" href="" type="image/x-icon"&
&script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"&&/script&
* {margin:0; padding:0;}
body {background:#000; width:100%; height:100%;}
#box {position: margin-top:50}
#star_box {position: }
#star_box .star {width:40 height:40 position: cursor: }
#star_box .star img {border-radius:5}
#star_box .link img {border:2px solid # border-radius:5}
$(function(){
app.run();
// 基本都已经实现
// 积分系统还没开始
var app = {};
app.linkStars = [];
app.searchStars = [];
app.stars = [];
app.newStars = [];
app.colsNoneNum = 0;
app.star = {
width:30, // 星星的宽度
height:30, // 高度
margin:5, // 每个星星的边距
rowNum:10, // 行数
colsNum:10, // 列数
colorNum:5, // 星星颜色数量 最大值为5 因为我TMD就做了5张星星图片
app.timer =
app.run = function() {
this.box = $('#box');
this.starBox = this.box.find('#star_box');
this.initCanvas();
this.initStars();
this.draw();
this.initBox();
// this.write();
app.initCanvas = function() {
var height = $(window).height();
$('body').css('height', height+'px');
// 初始化box样式
app.initBox = function() {
var boxWidth = this.star.width*this.star.colsNum+this.star.margin*this.star.colsN
var boxHeight = this.star.height*this.star.rowNum+this.star.margin*this.star.rowN
var left = ($(window).width() - boxWidth) / 2;
this.box.css('left', left+'px');
this.box.css('width', boxWidth+'px');
this.box.css('height', boxHeight+'px');
// 初始化星星数组
app.initStars = function() {
for(var i = 0; i & this.star.rowN i++) {
this.stars[i] = [];
for(var k = 0; k & this.star.colsN k++) {
var color_index = Math.floor((Math.random()*this.star.colorNum));
this.stars[i][k] = color_
// this.stars = [[0,1,0,1,1],[0,0,0,1,0]]; // bug测试
this.newStars = left2Array(this.stars);
this.noLeftChangeStars = left2Array(this.stars);
app.initColsLink = function() {
// 当前查找状态，一个数组对象，每个对象代表一列
this.colsLink = [];
for(var i = 0; i & this.star.colsN i++) {
this.colsLink[i] = {x:[], num:0, max:Number(-1), count:this.initRowArray(1)};
app.click = function(x, y) {
x = parseInt(x);
y = parseInt(y);
var searchStars = [];
searchStars[0] = {x:x, y:y};
this.count = 0;
this.linkStars = [];
this.searchStars = [];
this.bigSearch(searchStars); // 搜索 连接的星星
this.clickAnimate();
app.mouseup = function() {
clearTimeout(app.timer);
app.timer = setTimeout(function() {
app.starBox.find('.star').removeClass('link');
// 触摸某个星星
// X坐标 和 Y坐标
app.touch = function(x, y) {
x = parseInt(x);
y = parseInt(y);
var searchStars = [];
searchStars[0] = {x:x, y:y};
this.count = 0;
this.linkStars = [];
this.searchStars = [];
this.bigSearch(searchStars); // 搜索 连接的星星
this.initColsLink();
this.colsNoneLenth = this.initColsArray(0);
this.leftData = {min:Number(this.star.colsNum), y:[], num:0, count:this.initColsArray(1)};
this.makeStars(); // 重新生成星星数组
this.animate();
// this.draw(); // 重新绘制星星
// this.write(); // debug
// 星星动画
app.animate = function() {
if(this.linkStars.length & 2)
for(var i in this.linkStars) {
var x = parseInt(this.linkStars[i].x);
var y = parseInt(this.linkStars[i].y);
app.delAnimate(x, y);
for(var i in this.colsLink) {
var x = parseInt(this.colsLink[i].max);
var y = parseInt(i);
if(this.colsLink[i].x.length & 1) {
var mOffset = 0;
for(var j = this.colsLink[i].x.length-1; j &= 0; j--) {
mOffset += this.colsLink[i].count[j];
var r = this.colsLink[i].x[j-1];
if(j - 1 & 0) r=-1;
for(var t_x = this.colsLink[i].x[j]-1; t_x & t_x--) {
this.downAnimate(t_x, y, mOffset);
for(var t_x = x-1; t_x &= 0; t_x--) {
this.downAnimate(t_x, y, this.colsLink[y].num);
if(this.leftData.min & -1) {
if(this.leftData.y.length & 1) {
var mOffset = 0;
for(var j = 0; j &= this.leftData.y.length-1; j++) {
mOffset += this.leftData.count[j];
var r = this.leftData.y[j+1];
if(j + 1 & this.leftData.y.length-1) r=this.star.colsN
for(var n_x = 0; n_x &= this.star.rowNum-1; n_x++) {
for(var n_y = this.leftData.y[j]+1; n_y & n_y++) {
this.leftAnimate(n_x, n_y, mOffset);
var y = parseInt(this.leftData.min);
for(var n_x = 0; n_x &= this.star.rowNum-1; n_x++) {
for(var n_y = y+1; n_y & this.star.colsN n_y++) {
this.leftAnimate(n_x, n_y, this.leftData.num);
// this.leftAnimate();
/* 消除星星的动画效果 */
app.delAnimate = function(x,y) {
var index = x*this.star.colsNum + // 根据x、y计算对应dom中星星的 id
var starDiv = this.starBox.find('.id_'+index);
var left = parseInt(starDiv.css('left')) + this.star.width/2
var top = parseInt(starDiv.css('top')) + this.star.height/2
starDiv.find('img').animate({width:'0',height:'0'}, 500);
starDiv.animate({ left:left+'px', top:top+'px', opacity:0}, 500, function(){$(this).hide();});
starDiv.removeClass('id_'+index);
/* 星星向下移动的动画效果 */
app.downAnimate = function(x, y, move_num) {
if(this.checkRepeat(x, y)) {
var index = x*this.star.colsNum +
var starDiv = this.starBox.find('.id_'+index);
var dTop = parseInt(starDiv.css('top'));
var top = dTop + (this.star.height + this.star.margin) * move_
starDiv.animate({top:top+'px'}, 300);
var n_x_ = x + move_
starDiv.attr('ondblclick', 'app.touch('+n_x_+','+y+')');
starDiv.attr('onmousedown', 'app.click('+n_x_+','+y+')');
starDiv.removeClass('id_'+index);
var id = parseInt(n_x_*this.star.colsNum) + parseInt(y);
starDiv.addClass('id_'+id);
/* 星星向左移动的动画效果 */
app.leftAnimate = function(x, y, move_num) {
var index = x*this.star.colsNum +
var starDiv = this.starBox.find('.id_'+index);
var dLeft = parseInt(starDiv.css('left'));
var left = dLeft - (this.star.width + this.star.margin) * move_
starDiv.animate({left:left+'px'}, 300);
var n_y_ = y - move_
starDiv.attr('ondblclick', 'app.touch('+x+','+n_y_+')');
starDiv.attr('onmousedown', 'app.click('+x+','+n_y_+')');
starDiv.removeClass('id_'+index);
var id = parseInt(x*this.star.colsNum) + parseInt(n_y_);
starDiv.addClass('id_'+id);
// 点击提示连接星星动画
app.clickAnimate = function() {
if(this.linkStars.length & 2)
this.starBox.find('.star').removeClass('link');
for(var i in this.linkStars) {
var x = parseInt(this.linkStars[i].x);
var y = parseInt(this.linkStars[i].y);
var index = x*this.star.colsNum +
var starDiv = this.starBox.find('.id_'+index);
starDiv.addClass('link');
/* 递归遍历查找 */
app.bigSearch = function(searchStars) {
if(searchStars.length == 0)
this.newSearchStars = [];
this.s_count = 0;
for(var i in searchStars) {
var star = searchStars[i];
var x = parseInt(star.x);
var y = parseInt(star.y);
if(!this.checkRepeat(x, y)) {
this.linkStars[this.count] = {x:x, y:y};
this.count++;
this.search(x, y, 'top');
this.search(x, y, 'right');
this.search(x, y, 'down');
this.search(x, y, 'left');
this.bigSearch(this.newSearchStars);
/* 上下左右 查找 */
app.search = function(x, y, position) {
if(position == 'top') {
var top = x-1;
if(top & 0)
if(this.stars[x][y] == this.stars[top][y] && !this.checkRepeat(top, y)) {
this.newSearchStars[this.s_count] = {x:top, y:y};
else if(position == 'right') {
var right = y+1;
if(right & this.star.colsNum-1)
if(this.stars[x][y] == this.stars[x][right] && !this.checkRepeat(x, right)) {
this.newSearchStars[this.s_count] = {x:x, y:right};
else if(position == 'down') {
var down = x+1;
if(down & this.star.rowNum-1)
if(this.stars[x][y] == this.stars[down][y] && !this.checkRepeat(down, y)) {
this.newSearchStars[this.s_count] = {x:down, y:y};
else if(position == 'left') {
var left = y-1;
if(left & 0)
if(this.stars[x][y] == this.stars[x][left] && !this.checkRepeat(x, left)) {
this.newSearchStars[this.s_count] = {x:x, y:left};
this.s_count++;
// 根据传递的x, y来检测是否存在在linkStars中 如果存在则返回 true
app.checkRepeat = function(x, y) {
if(this.linkStars.length == 0)
for(var i in this.linkStars) {
var star = this.linkStars[i];
if(parseInt(star.x) == parseInt(x) && parseInt(star.y) == parseInt(y))
// 从新构造“星星”数组
// stars、newStars必须初始化完成
// linkStars必须&=2个星星
app.makeStars = function() {
if(this.stars.length==0 || this.newStars.length==0 || this.linkStars.length==0 || this.linkStars.length&2)
// -== setp-1 ==-
在相连数组中查找当前星星是否是相连的
如果是相连的星星 则在newStars中把该星星以上的星星的值都赋值给x+1的星星
然后在newStars中把最上面的一个元素 即[0][y]的元素值设为-1;
var clx_count = this.initColsArray(0);
for(var x in this.stars) {
x = parseInt(x);
for(var y in this.stars[x]) {
y = parseInt(y);
if(this.stars[x][y] != -1 && this.checkRepeat(x,y)) {
for(var n_x = x-1; n_x &= 0; n_x--) {
this.newStars[n_x+1][y] = this.newStars[n_x][y];
this.newStars[0][y] = -1;
this.colsLink[y].num += 1;
if(this.colsLink[y].max & x) {
this.colsLink[y].max =
if((x+1 &= this.stars.length-1 && !this.checkRepeat(x+1,y)) || (x == this.stars.length-1 && this.checkRepeat(x,y))) {
this.colsLink[y].x[clx_count[y]] =
clx_count[y]++;
else if(x+1 &= this.stars.length-1 && this.checkRepeat(x+1,y)) {
this.colsLink[y].count[clx_count[y]] += 1;
this.colsNoneLenth[y] += 1;
// -== setp-2 ==-
// 主要是为生成左移动画统计数据
this.noLeftChangeStars = left2Array(this.newStars);
var ld_count = 0;
for(var y = 0; y &= this.star.colsNum-1; y++) {
y = parseInt(y);
// if(this.star.colsNum - (y+1) & this.colsNoneNum)
// 判断当前列是否全部被设置为-1
if(this.checkColsNone(y)) {
if(this.leftData.min & y) {
this.leftData.min =
if((y+1 &= this.star.colsNum-1 && !this.checkColsNone(y+1)) || (y == this.star.colsNum-1)) {
this.leftData.y[ld_count] =
ld_count++;
else if(y+1 &= this.star.colsNum-1 && this.checkColsNone(y+1)) {
this.leftData.count[ld_count] += 1;
this.leftData.num += 1;
// this.colsNoneNum += 1;
// -== setp-3 ==-
// 左移数据 并从新构造新数组
if(this.leftData.min & -1) {
var check = this.leftData.
for(var y = 0; y & this.star.colsN y++) {
if(this.checkNewColsNone(check)) {
for(var n_x = 0; n_x &= this.star.rowNum-1; n_x++) {
for(var n_y = check+1; n_y & this.star.colsN n_y++) {
this.newStars[n_x][n_y-1] = this.newStars[n_x][n_y];
this.newStars[n_x][this.star.colsNum-1] = -1;
check += 1;
// 把新构造的数组 再赋值给星星数组
this.stars = left2Array(this.newStars);
// 检测当前列是否全部消空 如果消空返回true
// 数组未被左移破坏，只被下移修改过
app.checkColsNone = function(y) {
var count = 0;
for(var x = 0; x & this.star.rowN x++) {
if(this.noLeftChangeStars[x][y] == Number(-1)) count++;
if(count == this.star.rowNum)
// 检测当前列是否全部消空 如果消空返回true
// 数组为每次下移和左移之后新生成的数组
app.checkNewColsNone = function(y) {
var count = 0;
for(var x = 0; x & this.star.rowN x++) {
if(this.newStars[x][y] == Number(-1)) count++;
if(count == this.star.rowNum)
app.draw = function() {
var starsDiv = '';
for(var x in this.stars) {
x = parseInt(x);
for(var y in this.stars[x]) {
y = parseInt(y);
var star = this.stars[x][y];
if(star == -1) {
var left = y*this.star.width+y*5;
var top = x*this.star.height+x*5;
var index = x*this.star.colsNum +
starsDiv += '&div class="star id_'+index+'" style="left:'+left+' top:'+top+' width:'+this.star.width+'height:'+this.star.height+'" ondblclick="app.touch('+x+','+y+');" onmousedown="app.click('+x+','+y+');" onmouseup="app.mouseup();"&&img src="/uploads/rs/437/doeiphrq/star_'+star+'.png" width="'+this.star.width+'" height="'+this.star.height+'"/&&/div&';
$('#star_box').html(starsDiv);
app.initColsArray = function(val) {
var array = [];
if(val == 'undefined') val = 0;
for(var i = 0; i & this.star.colsN i++) {
array[i] =
app.initRowArray = function(val) {
var array = [];
if(val == 'undefined') val = 0;
for(var i = 0; i & this.star.rowN i++) {
array[i] =
app.write = function() {
var html = '';
for(var i in this.stars) {
var line = this.stars[i];
for(var j in line) {
var star = line[j];
var color = 'red';
if(star == -1) {
color = 'blue';
html += '&font color="'+color+'"&'+star+'&/font&&font color="#999"&('+i+','+j+')&/font&
html += '&br/&&br/&';
html += '&p&--===================================================--&p&';
$('#show').append(html);
function left2Array(array) {
if(array.length & 0)
var newArray = [];
for(var i in array) {
newArray[i] = [];
for(var j in array[i]) {
newArray[i][j] = array[i][j];
return newA
&div id="box"&
&div id="star_box"&
&div id="show" style="padding-top:600"&&/div&
X:&input type="text" id="x" value=""/&
Y:&input type="text" id="y" value=""/&
&input type="button" value="点击" onclick="app.touch($('#x').val(), $('#y').val());"/&
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具消灭星星_消灭星星游戏在线玩_消灭星星小游戏无敌版消灭星星||||||操作：点击连在一起的相同星星进行消除。消灭星星游戏其他版本玩过消灭星星的还玩过热门游戏专题推荐：操作说明：点击连在一起的相同星星进行消除。如何开始：游戏载入后，点击PLAY开始消灭星星游戏。游戏介绍：消灭星星小游戏这里有好多五颜六色的星星，点击颜色相同的星星就可以消去，现在就让我们一起去玩消灭星星游戏吧！类型：&&标签：&&大小：2.9MB游戏目标：消灭星星尽可能获得更多的分数。游戏评论： 09:09:51973山东省泰安市玩家很好玩，我喜欢玩嘻嘻…… 09:09:19973山东省泰安市玩家太棒了，顶973 19:44:15973山东省泰安市玩家很好玩，我喜欢玩嘻嘻…… 11:49:05973山西省晋中市玩家上传不了41343430292929252221消灭星星游戏_消灭星星小游戏_消灭星星在线玩_消灭星星小游戏大全消灭星星游戏&（共19款）消灭星星游戏游戏数：19个专题介绍：消灭星星游戏提供大量经典好玩的消灭星星小游戏,消灭星星在线玩,更多最新最热的消灭星星小游戏大全尽在973。||全新改良版的消灭星星游戏火热上线了，并且融合了经典的俄罗斯方块玩法，喜欢的朋友就一起来消灭星星吧！消灭星星糖果大爆炸2游戏经典好玩来袭啦，全新的关卡界面和闯关道具，让你在可爱华丽的消除世界不想出来。超经典的益智消除游戏消灭星星酷炫版华丽来袭啦，全新的关卡、场景、画面、音效和道具，等你来完美体验。消灭星星很多人都玩过，这款消灭星星官方正版会让你体验到不一样的感觉，赶快行动起来吧，挑战最高分吧。消灭星星糖果大爆炸中可以对星星的造型进行选择，有六种造型不一样的星星，你可以选择你喜欢的进行游戏，来挑战吧。温馨提示：想玩更多关于消灭星星的游戏，可点击消灭星星手机版进入哦~消灭星星大家都喜欢玩的消除游戏，这次是消灭星星物理版，新鲜的玩法不一样的感受，赶快来体验一下吧。消灭星星完美中文版非常好玩的游戏，游戏画面非常美观，绝对会让你爱上，快点加入吧，大家一起想办法消灭星星。消灭星星一款非常火爆的游戏，在消灭星星中文电脑版你可以选择不同的玩法，挑战你的最高分。消灭星星3上线了，在原来的基础上添加了限时限步的玩法，还有几种道具哦，喜欢的朋友们来试试，挑战一下吧。消灭星星大家最喜欢的游戏，经典的玩法，运用你的智慧消灭更多的星星，获得更高的分数才可以过关哦，消灭星星3电脑版你来挑战一下吧。消灭星星豪华版开启了，简单的玩法，好看的方块星星图案，赶快来消除吧，试试你能过多少关卡，大家快来来挑战一下吧。消灭星星终极完美版是一款非常简单的消消看小游戏，你只需要将两个或两以上相同颜色的星星进行消除，获得相应分数，即可进入下一个卡。很多美丽的星星，等着你来消灭，达到目标分数即可过关，关卡越高，难度越大，快来挑战一下自己吧！消灭星星电脑版是一款很有趣的小游戏哦。只要点击相同的星星，就可以啦，看你能获得多少分数呢？让我们一起来玩消灭星星游戏吧！温馨提示：想玩更多关于消灭星星的游戏，可点击消灭星星手机版进入哦~消灭星星小游戏这里有好多五颜六色的星星，点击颜色相同的星星就可以消去，现在就让我们一起去玩消灭星星游戏吧！消灭星星连连看1.0上线了，这不是消消看哦，而是连连看哈，老游戏新玩法，赶紧来体验下吧！消灭星星中文版，达到目标分数即可过关，来看看你能通过多少关吧！消星星修改版开启，你们是不是也很喜欢在夜空中闪耀着的星星那，喜欢的话现在就让我们一起去看看这些闪耀着的星星吧！消灭星星2开启，你们喜欢玩消灭星星吗？喜欢的话现在就和我一起去玩玩看吧！1|820888269554848462727友情链接：}