时间戳

首页 > 技术文章 > HTML--JS练习小游戏（别踩白块儿）

HTML--JS练习小游戏（别踩白块儿）

jiangshuai52511 2016-03-14 10:25 原文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>别踩白块儿</title>
<link href="baikuai.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1 style="text-align:center">总分</h1><h2 id="score">0</h2>
    <div id="main">
        <div id="container"></div>
    </div>
</body>
</html>
<script>
    var clock = null; //定时器操作句柄
    var state = 0; //0初始化，1进行中，2暂停，3失败
    var speed = 2;
/*
创建div,className是其类名
*/
    function cdiv(className)
    {
        var div = document.createElement('div');
        div.className = className;
        return div;
    }
/*
创建div.row
*/
    function crow()
    {
        var row = cdiv('row');
        var classes = createSn();
        var con = $('container');
        
        for(var i=0;i<4;i++)
        {
            row.appendChild(cdiv(classes[i]));
        }
        
        if(con.firstChild == null)
        {
            con.appendChild(row); //刚开始添加一行
        }
        else
        {
            con.insertBefore(row,con.firstChild);//以后从上往下添加行
        }
    }
/*
按id获取对象
*/
    function $(id)
    {
        return document.getElementById(id)
    }
/*
返回一个数组，随机其中1个单元值为‘cell black’，其他3个为cell
*/
    function createSn()
    {
        var arr = ['cell','cell','cell','cell'];
        var i = Math.floor(Math.random()*4);
        arr[i] = 'cell black';
        return arr;
    }
/*
初始化，自动添加row
*/
    function init()
    {
        for(var i =0; i<4;i++)
        {    
            crow();    
        }
        //委托事件--点击
        $('main').onclick = function (ev)
        {
            judge(ev);
        }
    }
    
    function judge(ev)//判断输赢，加分
    {
        if(state == 3)
        {    alert('您失败了，请重新开始游戏！');
            return;
        }
        if(ev.target.className.indexOf('black') == -1)
        {
            fail();
        }
        else
        {
            ev.target.className = 'cell';
            ev.target.parentNode.pass = 1;
            score();    
        }
    }
/*
动画
*/
    function move()
    {
        var con = $('container');
        var top = parseInt(window.getComputedStyle(con,null)['top']);
        if(speed + top > 0)
        {    top = 0;} //top走过头，直接top=0
        else
        {    
            top += speed; //调节每次下降的像素
        }
        con.style.top = top + 'px';
        
        if(top == 0)
        {    
            crow();
            con.style.top = '-100px';
            drow();
        }
        else if(top == (-100 + speed))
        {
            var rows = con.childNodes;
            if((rows.length == 5) && (rows[rows.length-1].pass !== 1))
            {
                fail();
            }    
        }
    }
/*
失败，结束
*/
    function fail()
    {
        clearInterval(clock);
        state = 3;
        alert('game over!');    
    }
/*
start() 启动
*/
    function start()
    {
        clock = window.setInterval('move()',30);    
    }
/*
删除最后一行
*/
    function drow()
    {
        var con = $('container');
        if(con.childNodes.length == 6)
        {
            con.removeChild(con.lastChild);
        }
    }    
/*
计分
*/    
    function score()
    {
        var newscore = parseInt($('score').innerHTML)+1;
        $('score').innerHTML = newscore;
        if(newscore % 10 == 0)
        {
            jiasu();
        }    
    }
/*
加速函数
*/    
    function jiasu()
    {
        speed += 2;
        if(speed == 6)
        {    alert('加油哦！');}
        else if(speed == 10)
        {    alert('你太厉害了！');}
        else if(speed == 20)
        {    alert('你快超神了！');}
    }
    
    
    init();
    start();
</script>

 css样式表代码：

@charset "utf-8";
/* CSS Document */
<style type="text/css">
*
{
    margin:0px;
    padding:0px;    
}
#main
{
    width:400px;
    height:400px;
    border: 2px solid  #000;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}
#container
{
    width:100%;
    height:400px;
    position:relative;
    top:-100px;
    background:#FFF;
}
.row
{
    width:100%;
    height:100px;
}
.cell
{
    width:100px;
    height:100px;
    float:left;
}
.black
{
    background:#000;
}
#score
{
    text-align:center;
}

 

推荐阅读