消消乐实现下坠_JavaScript有多强大，实现消消乐小游戏

简易JS消消乐-jq22.com

html,body {

margin:0px;

padding:0px;

}

.bgs0 {

background:linear-gradient(to left,#ABDCFF,#0396FF);

}

.bgs1 {

background:linear-gradient(to left,#E2B0FF,#9F44D3);

}

.bgs2 {

background:linear-gradient(to left,#FEB692,#0396FF);

}

.bgs3 {

background:linear-gradient(to left,#CE9FFC,#7367F0);

}

.bgs4 {

background:linear-gradient(to left,#90F7EC,#32CCBC);

}

.bgs5 {

background:linear-gradient(to left,#FFF6B7,#F6416C);

}

.bgs6 {

background:linear-gradient(to left,#81FBB8,#28C76F);

}

.bgs7 {

background:linear-gradient(to left,#FEB692,#EA5455);

}

.bgs8 {

background:linear-gradient(to right,#ffe985,#e2b0ff);

}

.bgs9 {

background:linear-gradient(to left,#FFE985,#FA742B);

}

.bgs10 {

background:linear-gradient(to left,#3C8CE7,#00EAFF);

}

#conter {

margin:50px auto;

width:650px;

height:650px;

}

#bg {

position:relative;

width:650px;

height:650px;

background-size:cover;

}

.dsplay-style {

width:65px;

height:65px;

left:585px;

bottom:325px;

position:absolute;

border-radius:8px;

transform:scale(0.95);

border:1px solid rgba(255,255,255,0.9);

font-size:60px;

line-height:65px;

cursor:pointer;

text-align:center;

color:rgb(255,255,255);

background-size:cover;

transition:all 0.1s ease 0s;

}

#fenshuq {

position:relative;

width:200px;

height:650px;

left:-210px;

top:-650px;

}

#guanshu {

position:absolute;

top:0px;

width:200px;

height:200px;

box-sizing:border-box;

border:10px solid #fff;

font-size:140px;

text-align:center;

border-radius:50%;

color:#fff;

}

#gs {

position:absolute;

top:220px;

width:200px;

height:60px;

box-sizing:border-box;

border:10px solid #fff;

border-radius:8px;

font-size:20px;

line-height:35px;

text-align:center;

color:#fff;

}

#fs {

position:absolute;

top:300px;

width:200px;

height:60px;

box-sizing:border-box;

border:10px solid #fff;

border-radius:8px;

font-size:20px;

line-height:35px;

text-align:center;

color:#fff;

}

#ks {

position:absolute;

top:380px;

width:200px;

height:60px;

box-sizing:border-box;

border:10px solid #fff;

border-radius:8px;

font-size:20px;

line-height:35px;

text-align:center;

color:#fff;

}

1

目标分1000

var html = document.getElementById('html');

var goal = 1000;

var score = 0;

var g = 1;

var a = 0;

var stars = [];

var choose = [];

var flag = true;

var texts = ["\u2655", "\u2654", "\u2657", "\u2656", "\u2623"]

var guanka = document.getElementById('guanka');

var guanshu = document.getElementById('guanshu');

var ks = document.getElementById('ks');

var bg = document.getElementById('bg');

var gs = document.getElementById('gs');

var colors = ["red", "#ffffff", "yellow", "blue", "green"];

function start() {

for (var h = 0; h < 10; h++) {

stars[h] = [];

for (var s = 0; s < 10; s++) {

var y = parseInt(Math.random() * 5);

var star = document.createElement("div");

star.className = "dsplay-style"

star.style.left = 65 * h + "px";

star.style.bottom = 65 * s + "px";

star.style.color = colors[y];

star.innerHTML = texts[y];

star.y = y;

star.h = h;

star.s = s;

ks.innerHTML = choose.length + "块" + "" + score1() + "分";

star.onmousemove = function() {

if (flag) {

check(this);

px()

if (choose.length > 1) {

ks.innerHTML = choose.length + "块" + score1() + "分";

}

}

}

star.onmouseout = function() {

if (flag) {

ks.innerHTML = "";

goback();

choose = [];

}

}

star.onclick = function() {

if (flag) {

if (choose.length > 1) {

flag = false;

score += score1();

fs.innerHTML = "当前分" + score;

for (var i = 0; i < choose.length; i++) {

(function(i) {

setTimeout(function() {

bg.removeChild(stars[choose[i].h][choose[i].s]);

stars[choose[i].h].splice(choose[i].s, 1);

}, 100 * i)

})(i)

}

setTimeout(refresh, choose.length * 100);

setTimeout(function() {

choose = [];

pd();

choose = [];

flag = true;

},

(choose.length) * 105)

}

}

}

stars[h][s] = star;

bg.appendChild(star);

}

}

}

start();

var n = 1;

function flicker() {

var a = Math.pow(-1, n);

if (choose.length > 1) {

for (var i = 0; i < choose.length; i++) {

choose[i].style.transform = "scale(" + (0.9 + 0.05 * a) + ")";

}

}

n++;

}

var time = setInterval(flicker, 300);

function goback() {

if (choose.length > 1) {

for (var i = 0; i < choose.length; i++) {

choose[i].style.transform = "scale(0.95)";

}

}

}

function check(tg) {

if (choose.indexOf(tg) == -1) {

choose.push(tg);

}

if (stars[tg.h][tg.s + 1] && stars[tg.h][tg.s + 1].y == tg.y && choose.indexOf(stars[tg.h][tg.s + 1]) == -1) {

check(stars[tg.h][tg.s + 1]);

}

if (stars[tg.h][tg.s - 1] && stars[tg.h][tg.s - 1].y == tg.y && choose.indexOf(stars[tg.h][tg.s - 1]) == -1) {

check(stars[tg.h][tg.s - 1]);

}

if (stars[tg.h - 1] && stars[tg.h - 1][tg.s] && stars[tg.h - 1][tg.s].y == tg.y && choose.indexOf(stars[tg.h - 1][tg.s]) == -1) {

check(stars[tg.h - 1][tg.s]);

}

if (stars[tg.h + 1] && stars[tg.h + 1][tg.s] && stars[tg.h + 1][tg.s].y == tg.y && choose.indexOf(stars[tg.h + 1][tg.s]) == -1) {

check(stars[tg.h + 1][tg.s]);

}

}

function px() {

if (choose.length > 1) {

var ch = [];

for (var i = stars.length - 1; i >= 0; i--) {

for (var j = stars[i].length - 1; j >= 0; j--) {

if (choose.indexOf(stars[i][j]) != -1) {

ch.push(stars[i][j]);

}

}

}

choose = ch;

}

}

function refresh() {

for (var i = stars.length - 1; i >= 0; i--) {

if (stars[i].length == 0) {

stars.splice(i, 1);

}

}

for (var i = 0; i < stars.length; i++) {

for (var j = 0; j < stars[i].length; j++) {

stars[i][j].style.left = i * 65 + "px";

stars[i][j].style.bottom = j * 65 + "px";

stars[i][j].h = i;

stars[i][j].s = j;

stars[i][j].style.transition = "left 0.3s, bottom 0.3s";

}

}

}

function score1() {

var a = 0;

if (choose.length > 1) {

a = (5 * choose.length) * choose.length;

}

return a;

}

function pd() {

a = 0;

choose = [];

for (var i = 0; i < stars.length; i++) {

for (var j = 0; j < stars[i].length; j++) {

check(stars[i][j]);

if (choose.length > 1) {

a++;

}

choose = [];

}

}

if (a == 0) {

if (score < goal) {

setTimeout(function() {

alert("结束")

}, 1000);

} else {

setTimeout(function() {

goal += (1000 + 100 * g);

g++;

gs.innerHTML = "目标分" + goal;

guanshu.innerHTML = g;

if (g >= 10) {

g = 0;

}

html.className = "bgs" + g;

gc();

stars = [];

choose = [];

start();

}, 500);

}

}

}

function gc() {

for (var i = stars.length - 1; i >= 0; i--) {

for (var j = stars[i].length - 1; j >= 0; j--) {

bg.removeChild(stars[i][j]);

}

}

}