<!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"></h2>

    <div id="main">

        <div id="container"></div>

    </div>

</body>

</html>

<script>

    var clock = null; //定时器操作句柄

    var state = ; //0初始化，1进行中，2暂停，3失败

    var speed = ;

/*

创建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=;i<;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()*);

        arr[i] = 'cell black';

        return arr;

    }

/*

初始化，自动添加row

*/

    function init()

    {

        for(var i =; i<;i++)

        {

            crow();

        }

        //委托事件--点击

        $('main').onclick = function (ev)

        {

            judge(ev);

        }

    }

    function judge(ev)//判断输赢，加分

    {

        if(state == )

        {    alert('您失败了，请重新开始游戏！');

            return;

        }

        if(ev.target.className.indexOf('black') == -)

        {

            fail();

        }

        else

        {

            ev.target.className = 'cell';

            ev.target.parentNode.pass = ;

            score();

        }

    }

/*

动画

*/

    function move()

    {

        var con = $('container');

        var top = parseInt(window.getComputedStyle(con,null)['top']);

        if(speed + top > )

        {    top = ;} //top走过头，直接top=0

        else

        {

            top += speed; //调节每次下降的像素

        }

        con.style.top = top + 'px';

        if(top == )

        {

            crow();

            con.style.top = '-100px';

            drow();

        }

        else if(top == (- + speed))

        {

            var rows = con.childNodes;

            if((rows.length == ) && (rows[rows.length-].pass !== ))

            {

                fail();

            }

        }

    }

/*

失败，结束

*/

    function fail()

    {

        clearInterval(clock);

        state = ;

        alert('game over!');

    }

/*

start() 启动

*/

    function start()

    {

        clock = window.setInterval('move()',);

    }

/*

删除最后一行

*/

    function drow()

    {

        var con = $('container');

        if(con.childNodes.length == )

        {

            con.removeChild(con.lastChild);

        }

    }

/*

计分

*/

    function score()

    {

        var newscore = parseInt($('score').innerHTML)+;

        $('score').innerHTML = newscore;

        if(newscore %  == )

        {

            jiasu();

        }

    }

/*

加速函数

*/

    function jiasu()

    {

        speed += ;

        if(speed == )

        {    alert('加油哦！');}

        else if(speed == )

        {    alert('你太厉害了！');}

        else if(speed == )

        {    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  #;

    margin: auto;

    position:relative;

    overflow:hidden;

}

#container

{

    width:%;

    height:400px;

    position:relative;

    top:-100px;

    background:#FFF;

}

.row

{

    width:%;

    height:100px;

}

.cell

{

    width:100px;

    height:100px;

    float:left;

}

.black

{

    background:#;

}

#score

{

    text-align:center;

}

HTML--JS练习小游戏（别踩白块儿）的更多相关文章

  1. 手摸手带你实现 小游戏<别踩白块儿 -- 内有游戏链接>

    别踩白块儿 使用(白鹭引擎)Egret编写的游戏 游戏地址 准备工作 了解白鹭引擎 并安装编写工具 安装游戏引擎 安装Egret Wing3 创建项目 创建项目可以选择不同版本的引擎,创建成功之后还可 ...

  2. 用Canvas写一个简单的游戏--别踩白块儿

    第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用 ...

  3. 【cocos2d-x制作别踩白块儿】第一期：游戏介绍

    这一系类文章.我们将来分析时下最火的一款游戏 -- 别踩白块儿. 无图无真相,先上图 这就是我们终于要完毕项目的效果图. 游戏刚開始的最以下有一栏为黄色,紧接着上面每一行都是有一个黑色块,其余为白色块 ...

  4. 初学JS——利用JS制作的别踩白块儿（街机模式） 小游戏

    这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按 ...

  5. 别踩白块儿游戏源码Android版

    这个项目有带说明文档,大家可以看看源码附件的说明文档吧,“别踩白块儿”是目前非常火的一款游戏,游戏非常简单刺激.关于具体怎么火法怎么玩我就不多说了,相信看到本文的朋友们都非常地清楚. 什么游戏火,我们 ...

  6. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

  7. jQuery实践-别踩白块儿网页版

    ▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...

  8. JS写小游戏（一）：游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  9. three.js 微信小游戏

    最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识 把 three.js 弄到微信小游戏里,先随便跑一跑 ...

随机推荐

  1. 浅谈JSON.parse()、JSON.stringify()和eval()的作用

    (1)JSON.parse 函数 var json = '{"name":"GDT","age":23,"University&q ...

  2. 长按事件jquery mobile

    chat_enlarge.addEventListener('touchend', function(event) { if(fingers == 1){ event.preventDefault() ...

  3. 软考之PV操作（同步）

    这几天,陆续有那么三两个同学跟我讨论了一下关于软考上的PV操作的题,吾虽不才,但还是把同学们讲通了,在此,特分享一下自己的思路和想法,愿对大家有点帮助! 下面,我们就通过自己做过的试卷上两道题来分析: ...

  4. 玲珑杯1007-A 八进制大数加法（实现逻辑陷阱与题目套路）

    题目连接:http://www.ifrog.cc/acm/problem/1056 DESCRIPTION Two octal number integers a, b are given, and ...

  5. 如何修改 SQL Server 代理主作业 (Transact-SQL)

    本主题介绍了如何使用存储过程修改 Microsoft SQL Server 代理主作业. 更改作业定义计划的详细信息 1.       执行 sp_update_schedule. 在作业中添加.更改 ...

  6. minix3（一）安装以及编辑文件

    作为一条通信狗,最近开始自学操作系统.听说用MINIX3学操作系统很好,就决定跟UCSB的课程试试. 首先在虚拟机上安装MINIX3. 开始用的VM Station,按照百度文库里安装minix3的教 ...

  7. JavaScript 之 iframe自适应问题---可以用来实现网页局部刷新

    1.HTML <iframe src="index.html" id="iframepage" frameborder="0" scr ...

  8. DSP using MATLAB 示例 Example3.15

    上代码: subplot(1,1,1); b = 1; a = [1, -0.8]; n = [0:100]; x = cos(0.05*pi*n); y = filter(b,a,x); figur ...

  9. js 获取浏览器高度和宽度值(多浏览器)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  10. three.js右手坐标系， 显示和线条

    1.右手坐标系 Threejs使用的是右手坐标系,这源于opengl默认情况下,也是右手坐标系.下面是右手坐标系的图例,如果对这个概念不理解,可以百度一下,我保证你伸出手比划的那一瞬间你就明白了,如果 ...