HTML--JS练习小游戏（别踩白块儿）
<!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练习小游戏（别踩白块儿）的更多相关文章
- 手摸手带你实现 小游戏<别踩白块儿 -- 内有游戏链接>
别踩白块儿 使用(白鹭引擎)Egret编写的游戏 游戏地址 准备工作 了解白鹭引擎 并安装编写工具 安装游戏引擎 安装Egret Wing3 创建项目 创建项目可以选择不同版本的引擎,创建成功之后还可 ...
- 用Canvas写一个简单的游戏--别踩白块儿
第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用 ...
- 【cocos2d-x制作别踩白块儿】第一期：游戏介绍
这一系类文章.我们将来分析时下最火的一款游戏 -- 别踩白块儿. 无图无真相,先上图 这就是我们终于要完毕项目的效果图. 游戏刚開始的最以下有一栏为黄色,紧接着上面每一行都是有一个黑色块,其余为白色块 ...
- 初学JS——利用JS制作的别踩白块儿（街机模式） 小游戏
这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按 ...
- 别踩白块儿游戏源码Android版
这个项目有带说明文档,大家可以看看源码附件的说明文档吧,“别踩白块儿”是目前非常火的一款游戏,游戏非常简单刺激.关于具体怎么火法怎么玩我就不多说了,相信看到本文的朋友们都非常地清楚. 什么游戏火,我们 ...
- pixi.js 微信小游戏 入手
pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...
- jQuery实践-别踩白块儿网页版
▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...
- JS写小游戏（一）：游戏框架
前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...
- three.js 微信小游戏
最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识 把 three.js 弄到微信小游戏里,先随便跑一跑 ...
随机推荐
- r0遍历系统进程方法总结
方法1: ZwQuerySystemInformation 这个方法网上一搜一大堆,不举例了 方法2:暴力枚举PID枚举进程,代码: NTSTATUS DriverEntry(PDRIVER_OBJE ...
- PHP学习之常量
1.常量是一个简单值的标识符,该值在脚本中不能改变: 2.一个常量由英文字母,下划线,和数字组成,但数字不能作为首字母出现:(常量名中不需要加$修饰符) 3.常量在整个脚本中都可以使用: 4.设置PH ...
- iOS10 UI教程视图的生命周期
iOS10 UI教程视图的生命周期 说到视图的生命周期一般都是指视图控制器的视图生命周期.在视图的声明周期中最主要的有8个方法,分别为loadView().viewDidLoad().viewWill ...
- 解决Genymotion无法创建新设备或无法显示设备列表问题
准备工作: 链接: https://pan.baidu.com/s/1i5v4IBN 密码: jc3m 用2.8的和最新VirtualBox-5.1.10-112026-Win 注意事项: 1.笔记本 ...
- Android一体式（沉浸式）状态栏的实现
注:公司开发任务适配是在4.4版本之上进行,所以此适配仅在4.4之上进行测试. 1.主要使用了第三方的开源项目SystemBarTint,github:https://github.com/jgilf ...
- html中frameset的详细使用方法
http://blog.csdn.net/csb5201314/article/details/5695417
- Storm TimeCacheMap RotatingMap源码分析
TimeCacheMap是Twitter Storm里面一个类, Storm使用它来保存那些最近活跃的对象,并且可以自动删除那些已经过期的对象. 不过在storm0.8之后TimeCacheMap被弃 ...
- Java类加载
类的生命周期是: 在一个类编译完成之后,下一步就需要开始使用类,如果要使用一个类,肯定离不开JVM.在程序执行中JVM通过装载,链接,初始化这3个步骤完成. 类的装载是通过类加载器完成的,加载器将.c ...
- React组件
React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...
- 80端口被占用，pid=4强制杀进程杀不掉
解决: http://www.cnblogs.com/myjavawork/articles/1867839.html 把SqlServer的该服务关闭.虽然他显示的进程号跟搜出来的不一样.