<!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. cocos2dx游戏开发——微信打飞机学习笔记（三）——WelcomeScene的搭建

    一.场景与层的关系: cocos2dx的框架可以说主要由导演,场景,层,精灵来构成: 1.其中导演,意如其名,就是操控整个游戏的一个单例,管理着整个游戏. 2.场景就像电影的一幕剧情,所以说,懂得如何 ...

  2. 62个Android Studio小技巧合集

    1书签(Bookmarks) 描述:这是一个很有用的功能,让你可以在某处做个标记(书签),方便后面再跳转到此处. 调用:Menu → Navigate → Bookmarks 快捷键: 添加/移除书签 ...

  3. 【MongoDB】3.详细命令集合

    [注意:MongoDB自动将_id字段设置为主键] -------------------------------------------------------------------------- ...

  4. Android常用控件之GridView与ExpandableListView的用法

    概述 1.GridView:与ListView相比,可以显示多列,xml布局时其属性numColumns可以设置显示的列数. 2.ExpandableListView:与ListView相比,可以让每 ...

  5. 587A

    #include<iostream> #include<algorithm> #include<stdio.h> #include<stdlib.h> ...

  6. jQuery方法注意事项

    1.关于选择器中含有特殊符号 选择器中含有".","#","(","]"等特殊字符,根据W3C的规定,属性值中是不能含有 ...

  7. 为什么网页通常把JS调用放在底部？

    JS是单线程,浏览器是多线程.当我们在浏览器的地址栏里输入一个url地址,访问新页面时,页面展示的快慢是由一个单线程控制,这个线程叫做UI线程.UI线程会根据页面里资源(资源是html文件.图片.cs ...

  8. 简单的jQuery扩展函数-让函数缓冲执行

    $.fn.retarder = function(delay, method) { var node = this; if (node.length) { if (node[0]._timer_) c ...

  9. dl dt dd定义

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. phpstorm 10 修改背景图片和字体

    修改menu:File ~ Settings ~ Appearance & Behavior ~ Appearance ~ Theme 改成 Darcula即成黑色背景 menu字体大小: 编 ...