javascript
消灭星星网页版java代码,javascript实现消灭星星小游戏简单版
來(lái)看看實(shí)現(xiàn)的效果圖
游戲規(guī)則：雙擊顏色一樣的星星，雙擊相同的部分就消失了
實(shí)例代碼
* {margin:0; padding:0;}
body {background:#000; width:100%; height:100%;}
#box {position:absolute; margin-top:50px;}
#star_box {position:relative; }
#star_box .star {width:40px; height:40px; position:absolute; cursor:pointer; }
#star_box .star img {border-radius:5px;}
#star_box .link img {border:2px solid #fff; border-radius:5px;}
$(function(){
app.run();
});
// 2015-1-30 16:26
// 基本都已經(jīng)實(shí)現(xiàn)
// 積分系統(tǒng)還沒(méi)開(kāi)始
var app = {};
app.linkStars = [];
app.searchStars = [];
app.stars = [];
app.newStars = [];
app.colsNoneNum = 0;
app.star = {
width:30, // 星星的寬度
height:30, // 高度
margin:5, // 每個(gè)星星的邊距
rowNum:10, // 行數(shù)
colsNum:10, // 列數(shù)
colorNum:5, // 星星顏色數(shù)量 最大值為5 因?yàn)槲襎MD就做了5張星星圖片
};
app.timer = null;
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.colsNum;
var boxHeight = this.star.height*this.star.rowNum+this.star.margin*this.star.rowNum;
var left = ($(window).width() - boxWidth) / 2;
this.box.css('left', left+'px');
this.box.css('width', boxWidth+'px');
this.box.css('height', boxHeight+'px');
}
// 初始化星星數(shù)組
app.initStars = function() {
for(var i = 0; i < this.star.rowNum; i++) {
this.stars[i] = [];
for(var k = 0; k < this.star.colsNum; k++) {
var color_index = Math.floor((Math.random()*this.star.colorNum));
this.stars[i][k] = color_index;
}
}
// this.stars = [[0,1,0,1,1],[0,0,0,1,0]]; // bug測(cè)試
this.newStars = left2Array(this.stars);
this.noLeftChangeStars = left2Array(this.stars);
}
app.initColsLink = function() {
// 當(dāng)前查找狀態(tài)，一個(gè)數(shù)組對(duì)象，每個(gè)對(duì)象代表一列
this.colsLink = [];
for(var i = 0; i < this.star.colsNum; 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');
}, 500);
}
// 觸摸某個(gè)星星
// X坐標(biāo) 和 Y坐標(biāo)
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(); // 重新生成星星數(shù)組
this.animate();
// this.draw(); // 重新繪制星星
// this.write(); // debug
}
// 星星動(dòng)畫
app.animate = function() {
if(this.linkStars.length < 2) return;
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 > r; t_x--) {
this.downAnimate(t_x, y, mOffset);
}
}
}
else {
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.colsNum;
for(var n_x = 0; n_x <= this.star.rowNum-1; n_x++) {
for(var n_y = this.leftData.y[j]+1; n_y < r; n_y++) {
this.leftAnimate(n_x, n_y, mOffset);
}
}
}
}
else {
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.colsNum; n_y++) {
this.leftAnimate(n_x, n_y, this.leftData.num);
}
}
}
}
// this.leftAnimate();
}
/* 消除星星的動(dòng)畫效果 */
app.delAnimate = function(x,y) {
var index = x*this.star.colsNum + y; // 根據(jù)x、y計(jì)算對(duì)應(yīng)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);
}
/* 星星向下移動(dòng)的動(dòng)畫效果 */
app.downAnimate = function(x, y, move_num) {
if(this.checkRepeat(x, y)) {
return ;
}
var index = x*this.star.colsNum + y;
var starDiv = this.starBox.find('.id_'+index);
var dTop = parseInt(starDiv.css('top'));
var top = dTop + (this.star.height + this.star.margin) * move_num;
starDiv.animate({top:top+'px'}, 300);
var n_x_ = x + move_num;
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);
}
/* 星星向左移動(dòng)的動(dòng)畫效果 */
app.leftAnimate = function(x, y, move_num) {
var index = x*this.star.colsNum + y;
var starDiv = this.starBox.find('.id_'+index);
var dLeft = parseInt(starDiv.css('left'));
var left = dLeft - (this.star.width + this.star.margin) * move_num;
starDiv.animate({left:left+'px'}, 300);
var n_y_ = y - move_num;
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);
}
// 點(diǎn)擊提示連接星星動(dòng)畫
app.clickAnimate = function() {
if(this.linkStars.length < 2) return;
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 + y;
var starDiv = this.starBox.find('.id_'+index);
starDiv.addClass('link');
}
}
/* 遞歸遍歷查找 */
app.bigSearch = function(searchStars) {
if(searchStars.length == 0) return ;
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) return;
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) return;
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) return;
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) return;
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++;
}
// 根據(jù)傳遞的x, y來(lái)檢測(cè)是否存在在linkStars中 如果存在則返回 true
app.checkRepeat = function(x, y) {
if(this.linkStars.length == 0) return false;
for(var i in this.linkStars) {
var star = this.linkStars[i];
if(parseInt(star.x) == parseInt(x) && parseInt(star.y) == parseInt(y)) return true;
}
return false;
}
// 從新構(gòu)造“星星”數(shù)組
// stars、newStars必須初始化完成
// linkStars必須>=2個(gè)星星
app.makeStars = function() {
if(this.stars.length==0 || this.newStars.length==0 || this.linkStars.length==0 || this.linkStars.length<2) return false;
// -== setp-1 ==-
/*
在相連數(shù)組中查找當(dāng)前星星是否是相連的
如果是相連的星星 則在newStars中把該星星以上的星星的值都賦值給x+1的星星
然后在newStars中把最上面的一個(gè)元素 即[0][y]的元素值設(shè)為-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 = x;
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]] = x;
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 ==-
// 主要是為生成左移動(dòng)畫統(tǒng)計(jì)數(shù)據(jù)
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) continue;
// 判斷當(dāng)前列是否全部被設(shè)置為-1
if(this.checkColsNone(y)) {
if(this.leftData.min > y) {
this.leftData.min = y;
}
if((y+1 <= this.star.colsNum-1 && !this.checkColsNone(y+1)) || (y == this.star.colsNum-1)) {
this.leftData.y[ld_count] = y;
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 ==-
// 左移數(shù)據(jù) 并從新構(gòu)造新數(shù)組
if(this.leftData.min > -1) {
var check = this.leftData.min;
for(var y = 0; y < this.star.colsNum; 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.colsNum; n_y++) {
this.newStars[n_x][n_y-1] = this.newStars[n_x][n_y];
}
this.newStars[n_x][this.star.colsNum-1] = -1;
}
}
else {
check += 1;
}
}
}
// 把新構(gòu)造的數(shù)組 再賦值給星星數(shù)組
this.stars = left2Array(this.newStars);
}
// 檢測(cè)當(dāng)前列是否全部消空 如果消空返回true
// 數(shù)組未被左移破壞，只被下移修改過(guò)
app.checkColsNone = function(y) {
var count = 0;
for(var x = 0; x < this.star.rowNum; x++) {
if(this.noLeftChangeStars[x][y] == Number(-1)) count++;
}
if(count == this.star.rowNum) return true;
return false;
}
// 檢測(cè)當(dāng)前列是否全部消空 如果消空返回true
// 數(shù)組為每次下移和左移之后新生成的數(shù)組
app.checkNewColsNone = function(y) {
var count = 0;
for(var x = 0; x < this.star.rowNum; x++) {
if(this.newStars[x][y] == Number(-1)) count++;
}
if(count == this.star.rowNum) return true;
return false;
}
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) {
continue;
}
var left = y*this.star.width+y*5;
var top = x*this.star.height+x*5;
var index = x*this.star.colsNum + y;
starsDiv += '
';}
}
$('#star_box').html(starsDiv);
}
app.initColsArray = function(val) {
var array = [];
if(val == 'undefined') val = 0;
for(var i = 0; i < this.star.colsNum; i++) {
array[i] = val;
}
return array;
}
app.initRowArray = function(val) {
var array = [];
if(val == 'undefined') val = 0;
for(var i = 0; i < this.star.rowNum; i++) {
array[i] = val;
}
return array;
}
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 += ''+star+'('+i+','+j+') ';
}
html += '
';
}
html += '
--===================================================--
';
$('#show').append(html);
}
function left2Array(array) {
if(array.length < 0) return array;
var newArray = [];
for(var i in array) {
newArray[i] = [];
for(var j in array[i]) {
newArray[i][j] = array[i][j];
}
}
return newArray;
}
本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請(qǐng)注明出處，感謝您的尊重！
總結(jié)
以上是生活随笔為你收集整理的消灭星星网页版java代码,javascript实现消灭星星小游戏简单版的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： php 如何实现关键字查找,php中如何
- 下一篇： 微服务接入oauth2_微服务权限终极解