消消乐实现下坠_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]);

}

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/501993.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站能拿到其他网站的cookie_在网站推广中企业网站能发挥哪些作用?(一)

相信大家都知道&#xff0c;在如今这个互联网环境下的市场中&#xff0c;企业必须借助互联网的便利才能寻求更加长远的发展。而要做到这些&#xff0c;首先就要求企业建立自己的企业网站。企业网站如此重要&#xff0c;接下来易推网将为大家分析在网站推广中企业网站能发挥的作…

猎户座计划软件测试,四核配置跑分:猎户座4412性能强劲_平板电脑评测-中关村在线...

四核配置跑分&#xff1a;猎户座4412性能强劲硬件配置方面&#xff0c;纽曼Q10采用三星Exynos 4412猎户座处理器&#xff0c;搭载1GB DDR3内存&#xff0c;16GB存储空间(可通过TF存储卡扩展至32GB)&#xff0c;预装Android 4.0操作系统&#xff0c;内置蓝牙4.0模块&#xff0c;…

蛋糕是叫胚子还是坯子_教你做巧克力淋面蛋糕,掌握这个配比,好看又好吃,10分钟做一个...

淋面蛋糕不知道从什么时候开始非常流行&#xff0c;它唯美的流淌线条&#xff0c;以及简洁的造型受到很多人的喜爱&#xff0c;这对于没有任何裱花基础的小伙伴来说真是福音&#xff0c;过生日不用再去蛋糕店订蛋糕&#xff0c;而是亲手为家人制作更有意义的蛋糕&#xff0c;虽…

mysql begin end 用法_MySQL ------ 游标(CURSOR)(二十六)

MySQL执行检索操作会返回一组称为结果集的行&#xff0c;这组返回的行都是与SQL 语句相匹配的行&#xff08;零行或多行&#xff09;&#xff0c;但是&#xff0c;使用简单的select 语句&#xff0c;没有办法得到第一行、下一行、或前十行&#xff0c;也不存在一行地处理所有行…

计算机背景为什么总是黑色,电脑背景变成黑色的了是为什么

大家好&#xff0c;我是时间财富网智能客服时间君&#xff0c;上述问题将由我为大家进行解答。电脑背景变成黑色的了是因为微软采取了反盗版措施&#xff0c;凡是使用盗版Windows系统的用户&#xff0c;系统启动后&#xff0c;桌面背景会变成全黑&#xff0c;且半个小时黑屏一次…

treeview控件怎么折叠_拍摄的视频闪烁怎么办?一招就能搞定,电脑手机都适用...

视频拍摄/视频剪辑教程/新媒体大家好我是学拍视频剪辑的黑米老师很多剪辑师在剪辑时&#xff0c;总会收到一些视频画面闪烁的素材&#xff0c;这是因为机器观察到的色彩和人肉眼观察到的色彩不一样&#xff0c;当曝光变化比较明显时&#xff0c;机器会捕捉到一些肉眼观察不到的…

rocketmq 消息指定_进大厂必备的RocketMQ你会吗?

点击关注"故里学Java"右上角"设为星标"好文章不错过关于消息队列&#xff0c;相信大家都不陌生&#xff0c;现在的中大型项目中或多或少都有使用到消息队列&#xff0c;对于消息队列大家可能都有一定的了解&#xff0c;使用消息队列可以解决什么样的问题&a…

秦丝软件的服务器稳定吗,强烈推荐 | 最好的五款服装进销存软件排名

随着企业的发展和市场的需要&#xff0c;传统的手工记录法复杂而繁琐&#xff0c;且错误较多费时费力&#xff0c;尤其是服装行业&#xff0c;涉及的品牌众多&#xff0c;需要管理的货品数量多&#xff0c;质量参差不齐&#xff0c;经营管理越来越困难。在此&#xff0c;小编为…

c语言putchar_C语言实现变色的心!连机器都会变心,呵,男人!

各位&#xff0c;今天我们用C语言来秀一把&#xff0c;给大家带来一个会自动变色的心&#xff1a;怎么样&#xff0c;效果还可以吧&#xff01;其实这个实现的原理还是比较简单的&#xff0c;为了让窗口别跟控制台那样难看&#xff0c;我调用了system函数对窗口的大小、颜色和标…

git灰度发布版本_Git发布2.30版本

Git 2.30版本已于北京时间今天凌晨3点发布&#xff0c;是该广受欢迎的分布式修订版本控制系统的最新稳定版本更新&#xff0c;Git由Linux内核发明者Linus大神于2005年推出。2020年早些时候&#xff0c;Git 2.28版本带来了对可配置/默认分支名称的支持&#xff0c;以取代到目前为…

匿名的ftp服务器不允许用户上传文件对吗,FTP服务器匿名用户也能上传文件的配置...

FTP服务器匿名用户也能上传文件的配置[日期&#xff1a;2006-12-05]来源&#xff1a;作者&#xff1a;[字体&#xff1a;大 中 小]环境:RedHat 7.3 wu-ftp-2.6.2 proftpd-1.2.4步骤:1.wu-ftpa.从RedHat的光盘上安装wu-ftpd-2.6.2-5.i386.rpm和anonftp-4.0-9.i386.rpm这两个包# …

mongdb2008puls4.0.3安装_Mathematica 10.3安装教程

软件下载[软件名称]&#xff1a;Mathematica v10.3[软件语言]&#xff1a;简体中文 [软件大小]&#xff1a;2.26G[安装环境]&#xff1a;Win10/Win8/Win7&#xfeff;&#xfeff;&#xfeff;[下载链接]&#xff1a;https://pan.baidu.com/s/1fDUUrR-W8IIj8Dem3YZMrQ[提取码]&…

开发web应用,用前端技术还是.NET?

选择使用前端技术还是.NET&#xff08;后端&#xff09;取决于您的项目需求、团队技能和其他因素。下面是一些考虑因素&#xff1a; 使用前端技术的情况&#xff1a; 1、交互性强的应用&#xff1a; 如果您的网站需要大量客户端交互、动画效果或实时更新&#xff0c;前端技术…

python接口 同花顺_利用python探索股票市场数据指南

虽然同花顺之类的金融理财应用的数据足够好了&#xff0c;但还是有自己定制的冲动, 数据自然不会不会比前者好很多&#xff0c;但是按照自己的想法来定制还是不错的。目标通过免费的数据接口获取数据&#xff0c;每日增量更新标的历史交易数据, 然后通过Kibana做可视化及数据分…

java ee是什么_死磕 java集合之HashSet源码分析

问题&#xff08;1&#xff09;集合&#xff08;Collection&#xff09;和集合&#xff08;Set&#xff09;有什么区别&#xff1f;&#xff08;2&#xff09;HashSet怎么保证添加元素不重复&#xff1f;&#xff08;3&#xff09;HashSet是否允许null元素&#xff1f;&#xf…

php获取ajax数组,从AJAX获取PHP中的JSON数组请求

如果可以的话&#xff0c;我会建议改变你正在jQuery的请求发送到以下方式&#xff1a;var h1 []h2 []h3 [],layout $("input[typeradio][namelayout_option]:checked").val();$("ul.widget-order[name1] li").each(function() { h1.push($(this).attr(…

ubuntu wifi固定ip_自制wifi遥控小车!ESP8266实践指南(二)

上次带大家利用ESP8266自制了wifi控制的LED点阵屏幕&#xff0c;大家觉得怎么样呢&#xff1f; 手把手教你用wifi控制显示屏&#xff01;ESP8266实践指南(一)今天我们来做点更有意思的~ wifi遥控小车&#xff01;一、所需材料ESP8266 NodeMCU开发板&#xff1a;这次我们使用CP2…

micopython 18b20_[MicroPython]stm32f407控制DS18B20检测温度

1.实验目的 1. 学习在PC机系统中扩展简单I/O 接口的方法。 2. 进一步学习编制数据输出程序的设计方法。 3. 学习DS18B20的接线方法&#xff0c;并利用DS18B20检测当前温度。 2.所需元器件 F407Micropython开发板1块 数据线1条 DS18b20温度传感器1个 DS18B20测温模块(不含DS18B2…

shiro ajax权限,web项目中使用shiro权限管理,session过时,Ajax请求的处理方式。

// 服务端代码RequestMapping(value { "/login-form.html", "/" }, method GET)public String loginForm() {if(contextService.isAuthenticated()) {return "redirect:/home.html";} else {HttpServletRequest request contextService.getRe…

float php 运算_写给 PHP 程序员的 Python 学习指南

文 | 汤青松SegmentFault编辑 | EarlGrey推荐 | 编程派公众号(ID&#xff1a;codingpy)一、背景人工智能这几年一直都比较火&#xff0c;笔者一直想去学习一番&#xff1b;因为一直是从事PHP开发工作&#xff0c;对于Python接触并不算多&#xff0c;总是在关键时候面临着 基础不…