前段时间看见园子里有同学用js+jquery实现了消星星游戏，自己也早有这个想法，于是就利用业余时间用js+html5实现了一下消星星游戏。

主要是想实现效果，运用了css3中的动画属性。游戏积分算法是随便写的，所以玩起来难度不高。

由于时间仓促，代码上还有一些冗余，还可以进一步优化。等以后有时间吧。

上代码：

<!doctype html>

<html>

<head>

    <title></title>

    <style>

        #box{height:600px;width:600px;margin:20px auto;border:2px solid #123;position:relative;}

        #box div{position:absolute;height:58px;width:58px;border:1px solid #fff;border-radius:4px;transition:all linear 0.25s 0s;-moz-transition:all linear 0.25s 0s;}

        [r="1"]{top:540px;}

        [r="2"]{top:480px;}

        [r="3"]{top:420px;}

        [r="4"]{top:360px;}

        [r="5"]{top:300px;}

        [r="6"]{top:240px;}

        [r="7"]{top:180px;}

        [r="8"]{top:120px;}

        [r="9"]{top:60px;}

        [r="10"]{top:0px;}

        [c="1"]{left:0px}

        [c="2"]{left:60px}

        [c="3"]{left:120px}

        [c="4"]{left:180px}

        [c="5"]{left:240px}

        [c="6"]{left:300px}

        [c="7"]{left:360px}

        [c="8"]{left:420px}

        [c="9"]{left:480px}

        [c="10"]{left:540px}

        #box div[s="s"]{border-color:red;}

        .red {

        background-color: rgba(255, 0, 0, 0.5);

       }

       .green {

      background-color: rgba(0, 255, 0, 0.5);

    }

    .blue {

      background-color: rgba(0, 0, 255, 0.5);

    }

       .yellow {

      background-color: rgba(255, 255, 0, 0.5);

    }

    .lightblue {

      background-color: rgba(0, 255, 255, 0.5);

    }

    </style>

</head>

<body> 

<div id="title">

</div>

<div id="msg">

</div>

<div id="box">

</div> 

<script>

Array.prototype.has_item = function(item){

    for(var i=0,l=this.length;i<l;i++){

        //if(d == true)    console.log(item,this[i],item == this[i]);

        if(item == this[i]){

            return true;

        }

    }

    return false;

}    

!function(){

    var stage = 0,

        stage_target = 0,

        score = 0,

        selected_color = null,

        selected_stars = [],

        colors = ['red','green','blue','yellow','lightblue'],

        box    = $('box');

    if(box === null) return false;

    init();

    function $(id){

        return document.getElementById(id) ? document.getElementById(id) : null;

    }    

    // 页面初始化函数

    function init(){

        stage++;

        if(stage == 1){

            stage_target = 1000;

        }else{

            stage_target = stage_target + 2000;

        }

        $('title').innerHTML = "stage:"+stage+";target:"+stage_target;

        var frag = document.createDocumentFragment();

        for(var r=1;r<=10;r++){

            for(var c=1;c<=10;c++){

                var color = colors[Math.floor(Math.random() * 5)];

                var div = document.createElement('div');

                div.id = r+'_'+c;

                div.setAttribute('r',r);

                div.setAttribute('c',c);

                div.className = color;

                div.onclick = click_star;

                frag.appendChild(div);

            }

        }

        box.appendChild(frag);

    }

    // 单机星星事件函数

    function click_star(){

        if(selected_stars.length == 0 || !selected_stars.has_item(this)){

            clear_selected();

            select_stars(this);

        }else if(selected_stars.length > 1){

            pop_selected();

            clear_selected();

            after_pop();

            check_single();

        }

    }

    // 首次单击时选中相同颜色相邻星星

    function select_stars(current_star){

        if(current_star.getAttribute('s') == 's') return;

        current_star.setAttribute('s','s');

        selected_color = current_star.className;

        selected_stars.push(current_star);

        var r = parseInt(current_star.getAttribute('r')),

            c = parseInt(current_star.getAttribute('c')),

            t_star = {},

            r_star = {},

            b_star = {},

            l_star = {};

        var all_stars = $('box').getElementsByTagName('div');

        for(var i=0,l=all_stars.length;i<l;i++){

            if(all_stars[i].getAttribute('r') == r+1 && all_stars[i].getAttribute('c') == c){

                t_star = all_stars[i];

            }else if(all_stars[i].getAttribute('r') == r && all_stars[i].getAttribute('c') == c+1){

                r_star = all_stars[i];

            }else if(all_stars[i].getAttribute('r') == r-1 && all_stars[i].getAttribute('c') == c){

                b_star = all_stars[i];

            }else if(all_stars[i].getAttribute('r') == r && all_stars[i].getAttribute('c') == c-1){

                l_star = all_stars[i];

            }

        }

        if(t_star.className == selected_color){

            select_stars(t_star);

        }

        if(r_star.className == selected_color){

            select_stars(r_star);

        }

        if(b_star.className == selected_color){

            select_stars(b_star);

        }

        if(l_star.className == selected_color){

            select_stars(l_star);

        }

    }

    // 取消已选中星星状态

    function clear_selected(){

        selected_stars = [];

        var all_stars = $('box').getElementsByTagName('div');

        for(var i=0,l=all_stars.length;i<l;i++){

            all_stars[i].setAttribute('s','');

        }

    }

    // 消掉已选中星星

    function pop_selected(){

        for(var i=0,l=selected_stars.length;i<l;i++){

            selected_stars[i].parentNode.removeChild(selected_stars[i]);

        }

        score += 5 * l * l;

        $('msg').innerHTML = 'score:'+score;

    }

    // 一次消星星动作完成以后的回调函数，用来填补已消掉星星空出来的空白

    function after_pop(){

        var all_stars = $('box').getElementsByTagName('div');

        var not_exist_c = [1,2,3,4,5,6,7,8,9,10];

        for(var i=0,l=all_stars.length;i<l;i++){

            var r = all_stars[i].getAttribute('r');

            var c = parseInt(all_stars[i].getAttribute('c'));

            //console.log('======='+c+'=======');

            if(not_exist_c.has_item(c)){

                not_exist_c.splice(c-1,1,null);

            }

            if(r > 1){

                after_pop_d(all_stars[i],r-1,c);

            }

        }

        //console.log(not_exist_c);

        for(var i=9;i>=0;i--){

            if(not_exist_c[i] == null){

                not_exist_c.splice(i,1);

            }

        }

        after_pop_l(not_exist_c.reverse());

    }

    // 消星星以后被消星星上面的星星向下移动，填补空白

    function after_pop_d(star,r,c){

        if(document.getElementById(r+'_'+c)){

            return;

        }else{

            star.setAttribute('r',r);

            star.id=r+'_'+c;

            if(r > 1){

                after_pop_d(star,r-1,c)

            }

        }

    }

    // 消星星以后被如果出现空列，空列右侧的列向左移动，填补空白列

    function after_pop_l(not_exist_c){

        for(var i=0,l=not_exist_c.length;i<l;i++){

            var all_stars = $('box').getElementsByTagName('div');

            for(var j=0,n=all_stars.length;j<n;j++){

                var c = all_stars[j].getAttribute('c');

                var r = all_stars[j].getAttribute('r');

                if(c > not_exist_c[i]){

                    c--;

                    all_stars[j].setAttribute('c',c);

                    all_stars[j].id = r+'_'+c;

                }

            }

        }

    }

    //

    function check_single(){

        if(selected_stars.length>1) return;

        var all_stars = $('box').getElementsByTagName('div');

        for(var i=0,l=all_stars.length;i<l;i++){

            clear_selected();

            select_stars(all_stars[i]);

            //console.log(selected_stars);

            if(selected_stars.length>1){

                clear_selected();

                return true;

            }

        }

        setTimeout(

            function(){

                clear_star();

                if(stage_target>score){

                    box.innerHTML = "game over!";

                    return false;

                }

                init();

            },

            2000

        );

    }

    //

    function clear_star(){

        box.innerHTML = '';

    }

}(window);

</script>

</body>

</html>

js&html5实现消星星游戏的更多相关文章

  1. 用HTML5+原生js实现的推箱子游戏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. WebGL实现HTML5贪吃蛇3D游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  3. HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）

    HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...

  4. video.js html5 视频播放器

    我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...

  5. Chart.js | HTML5 Charts for your website.

    Chart.js | HTML5 Charts for your website. Chart.js

  6. cocos2d-x 消类游戏，类似Diamond dash 设计

    前几天刚刚在学习cocos2d-x,无聊之下自己做了一个类似Diamond dash的消类游戏,今天放到网上来和大家分享一下.我相信Diamond dash这个游戏大家都玩过,游戏的规则是这样的,有一 ...

  7. <!--[if IE]><script type="text/javascript" src="matrix/js/html5.js"></script><![endif]-->代码解释

    块注释例子 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->2. <!--[if IE]> 所有的I ...

  8. 原生JS实现的h5小游戏-植物大战僵尸

    代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...

  9. js实现表格配对小游戏

    js实现表格配对小游戏 一.总结 一句话总结: 二.js实现表格配对 1.配对游戏案例说明 实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜 案例008采用了大家常见的小游 ...

随机推荐

  1. 使用 Bumblebee 控制 NVIDIA 双显卡

    简介 Nvidia的双显卡切换技术叫Optimus(擎天柱),可惜只能在win7.vista下实现.Linux下没有对应的技术,当然苹果也没有.这导致独立显卡一直在启用,显卡发热升温,风扇狂转,却没有 ...

  2. [转]ubuntu 下minicom超级终端的使用方法

    [转]ubuntu 下minicom超级终端的使用方法 http://blog.chinaunix.net/uid-25909619-id-3184639.html 系统环境: Ubuntu 11.0 ...

  3. MySQL 存储过程学习笔记

    存储过程框架 DEMILITER $$ -- 重定义符 DROP PROCEDURE IF EXISTS store_procedure$$ -- 如果存在此名的存储过程,先删除 CREATE PRO ...

  4. 针对《来用》的NABC分析

    项目名:<来用> 特点:拥有以往win7在内的众多小游戏 NABC分析 N(need需求): 之所以有这个想法是因为,在WIN7,XP系统中往往有很多众所周知的小游戏(比如扫雷),但是在w ...

  5. 802.11 wireless 五

    802.11 wireless 5CSMA/CA,采用倒计时的方法,退避的时间(当年时间+duration 为发送时间,每一个帧会有一个duration,这个位叫做duration[n.持续]) PS ...

  6. Posix线程编程指南(4) 线程终止

    线程终止方式 一般来说,Posix的线程终止有两种情况:正常终止和非正常终止.线程主动调用pthread_exit()或者从线程函数中return都将使线程正常退出,这是可预见的退出方式:非正常终止是 ...

  7. BZOJ3874 codevs3361 宅男计划

    AC通道1:http://www.lydsy.com/JudgeOnline/problem.php?id=3874 AC通道2:http://codevs.cn/problem/3361/ [题目分 ...

  8. Auto Layout - 使用总结

    1.要开始使用AutoLayout,请先设置要约束的view的translatesAutoresizingMaskIntoConstraints属性为NO.在xib或者sb中勾选Use Auto La ...

  9. aspx文件、aspx.cs文件、aspx.designer.cs文件之讲解

    .aspx文件:(页面)书写页面代码.存储的是页面design代码.只是放各个控件的代码,处理代码一般放在.cs文件中. .aspx.cs文件:(代码隐藏页)书写类代码.存储的是程序代码.一般存放与数 ...

  10. Tomcat漏洞说明与安全加固

    Tomcat是Apache软件基金会的一个免费的.开放源码的WEB应用服务器,可以运行在Linux和Windows等多个平台上,由于其性能稳定.扩展性好.免费等特点深受广大用户的喜爱.目前,互联网上绝 ...