别踩白块
操作说明：点击下落的黑块，点白为输，黑块落到底为输。
分步解析
游戏思路：1 四行div，每行div有四小div并排，每四个必有一个黑块
html,body内部
<div id="main">
<div id="container"></div>
</div>script
<span style="white-space:pre"> </span>// 1 输入class名 就创建了这个名的div
function creatediv(className){
// 这里还没创建，要和appendChild混合使用
var div=document.createElement('div');
// xx.className后面.+属性，赋值过去的是parm
div.className=className;
return div;
}
// 2创造一行，放四个进去;判断当有第一个子元素就用insert插在第一个后面，子元素就是行
function createrow(){
var row=creatediv('row');
var classes=createSn();
var con=$('container');
//四行
for (var i=0;i<4;i++){
// 在row里创造celldiv，循环4次，就有4个
row.appendChild(creatediv(classes[i]));
// 要放黑块白块数组进去,classes[i]这里i是循环的i
}
}
// 3创造黑块
function createSn(){
var arr=['cell','cell','cell','cell'];
//i为[0-4)区间里的整数
var i=Math.floor(Math.random()*4);
// cell black为classname
arr[i]='cell black';
return arr;
}
// 简写获取id元素
// id需要''
function $(id){
return document.getElementById(id);
}createrow是改进后
<span style="white-space:pre"> </span>// 2创造一行，放四个进去;判断当有第一个子元素就用insert插在第一个后面，子元素就是行
function createrow(){
var row=creatediv('row');
var classes=createSn();
var con=$('container');
//四行
for (var i=0;i<4;i++){
// 在row里创造celldiv，循环4次，就有4个
row.appendChild(creatediv(classes[i]));
// 要放黑块白块数组进去,classes[i]这里i是循环的i
}
if (con.firstChild==null) {
con.appendChild(row);
}else{
// 在最上面出现,在第一个孩子前面
con.insertBefore(row,con.firstChild);
}
}
<span style="white-space:pre"> </span>// 5每次往下移动2px
function move(){
var con=$('container');
// 要获得实时的top用这,得到字符串要parseInt
var top=parseInt(window.getComputedStyle(con,null)['top']);
top+=speed;
con.style.top=top+'px';
//在上方添加新方块行；top现在是-100到0就要创建新的
if(top==0){
createrow();
// 数字要和px紧接着不要有空格
con.style.top='-100px';
//创新行同时删旧行
drop();
}
}
}
// 6定时器,30毫秒，move一下
function start(){
clock=window.setInterval('move()',30);
}
// 7删节点
function drop(){
var con=$('container');
if (con.childNodes.length==6) {
con.removeChild(con.lastChild);
}
}<span style="white-space:pre"> </span>/*4 init*/
function init(){
//造4行
for(var i=0;i<3;i++){
createrow();
}
//8 点击事件
$('main').οnclick=function(ev){
judge(ev);
}
}
// 9计分
function score(){
// $('score').innerHTML是html里显示的，应该是文本；而要改数字就要转化为数字用
var note=parseInt($('score').innerHTML)+1;
$('score').innerHTML=note;
}
<span style="white-space:pre"> </span>// 10点击事件里的判断游戏失败
function judge(ev){
if(state==3){
alert('f5游戏重来');
return;
}
//ev.className.indexOf('black')返回black的位置==-1没点到黑块，而且点了白块
if(ev.target.className.indexOf('black')==-1){
clearInterval(clock);
state=3;
alert('GAME OVER');
}else{
//黑改白
ev.target.className='cell';
score();
}
}4判断游戏失败，加速功能
<span style="white-space:pre"> </span>// 11失败
function fail(){
clearInterval(clock);
state=3;
alert('GAME OVER');
}
// 12加速
function jiasu(){
speed+=2;
if (speed==16) {
clearInterval(clock);
alert('通关');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>别踩白块游戏</title>
</head>
<style type="text/css">
/*q1为啥main container relative*/
#main{
width: 400px;
height: 400px;
background-color: gray;
border: 2px solid black;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/*top -100因为要在上面准备一个要落下来的方块*/
#container{
width: 100%;
height: 400px;
top: -100px;
position: relative;
}
.row{
width: 100%;
height: 100px;
}
.cell{
width: 100px;
height: 100px;
float: left;
}
.black{
background-color: black;
}
</style>
<body>
<h1>score</h1>
<h2 id="score">0</h2>
<!-- 四行，每行四块，其中有块黑，点击为白，黑落到底为输 -->
<!-- 先造div,main为框架，container整体往下移 -->
<div id="main">
<div id="container"></div>
</div>
<!-- div: row为每行，cell为每行的每块 -->
</body>
<script type="text/javascript">
var clock=null;//定时器操作句柄
var state=0;//游戏状态0初始化 1进行中 2暂停 3失败
var speed=2;//初始速度
/*4 init*/
function init(){
//造4行
for(var i=0;i<3;i++){
createrow();
}
//8 点击事件
$('main').οnclick=function(ev){
judge(ev);
}
}
// 5每次往下移动2px
function move(){
var con=$('container');
// 要获得实时的top用这,得到字符串要parseInt
var top=parseInt(window.getComputedStyle(con,null)['top']);
//判断是否超出0，超出就无法执行下面的if了；没超就往下2px
if (top+speed>0) {
top=0;
}else{
top+=speed;
con.style.top=top+'px';
}
//在上方添加新方块行；top现在是-100到0就要创建新的
if(top==0){
createrow();
// 数字要和px紧接着不要有空格
con.style.top='-100px';
//创新行同时删旧行
drop();
}else if(top==-98){
var rows=con.childNodes;
// rows.length有几行，五行时就是黑块到底部的行数；==rows[4]
if((rows.length==5)&&(rows[rows.length-1].pass!==1)){
fail();
}
}
}
// 10点击事件里的判断游戏失败
function judge(ev){
if(state==3){
alert('f5游戏重来');
return;
}
//ev.className.indexOf('black')返回black的位置==-1没点到黑块，而且点了白块
if(ev.target.className.indexOf('black')==-1){
fail();
}else{
//黑改白
ev.target.className='cell';
/*判断是否黑块到底部
ev.target.parentNode父节点,也就是点击过的那一行标记为1；没点击过的行到底部就失败*/
ev.target.parentNode.pass=1;
//计分
score();
}
}
// 11失败
function fail(){
clearInterval(clock);
state=3;
alert('GAME OVER');
}
// 6定时器,30毫秒，move一下
function start(){
clock=window.setInterval('move()',30);
}
// 7删节点
function drop(){
var con=$('container');
if (con.childNodes.length==6) {
con.removeChild(con.lastChild);
}
}
// 9计分
function score(){
// $('score').innerHTML是html里显示的，应该是文本；而要改数字就要转化为数字用
var note=parseInt($('score').innerHTML)+1;
$('score').innerHTML=note;
//当分数整除20就 加速
if (note%20==0) {
jiasu();
}
}
// 12加速
function jiasu(){
speed+=2;
if (speed==16) {
clearInterval(clock);
alert('通关');
}
}
// 1 输入class名 就创建了这个名的div
function creatediv(className){
// 这里还没创建，要和appendChild混合使用
var div=document.createElement('div');
// xx.className后面.+属性，赋值过去的是parm
div.className=className;
// 返回的是document.createElement('div');这个吧
return div;
}
// 2创造一行，放四个进去;判断当有第一个子元素就用insert插在第一个后面，子元素就是行
function createrow(){
var row=creatediv('row');
var classes=createSn();
var con=$('container');
//四行
for (var i=0;i<4;i++){
// 在row里创造celldiv，循环4次，就有4个
row.appendChild(creatediv(classes[i]));
// 要放黑块白块数组进去,classes[i]这里i是循环的i
}
if (con.firstChild==null) {
con.appendChild(row);
}else{
// 在最上面出现,在第一个孩子前面
con.insertBefore(row,con.firstChild);
}
}
// 3创造黑块
function createSn(){
var arr=['cell','cell','cell','cell'];
//i为[0-4)区间里的整数
var i=Math.floor(Math.random()*4);
// cell black为classname
arr[i]='cell black';
return arr;
}
// 简写获取id元素
// id需要''
function $(id){
return document.getElementById(id);
}
init();
start();
</script>
</html>
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
