javascript
消消乐实现下坠_JavaScript有多强大，实现消消乐小游戏
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目標(biāo)分1000var 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 = "當(dāng)前分" + 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("結(jié)束")
}, 1000);
} else {
setTimeout(function() {
goal += (1000 + 100 * g);
g++;
gs.innerHTML = "目標(biāo)分" + 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]);
}
}
}
總結(jié)
以上是生活随笔為你收集整理的消消乐实现下坠_JavaScript有多强大，实现消消乐小游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 同步锁_死磕 java同步系列
- 下一篇： springmvc 拦截器_Spring