JavaScript 别踩白块

TingXiao-Ul

已于 2022-04-01 08:08:25 修改

阅读量746

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

于 2017-10-14 14:33:01 首次发布

本文链接：https://blog.youkuaiyun.com/qingtianhaoshuai/article/details/78234159

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的网页版“别踩白块”游戏的实现方法。通过HTML、CSS和JavaScript构建游戏界面，并实现了游戏逻辑，包括计分、速度调整等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <title>别踩白块</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #eee;
        }
        #main{
            width: 408px;
            height: 408px;
            border: 4px solid #000;
            margin: 0 auto;
            position: relative;
            top: 10px;
            overflow: hidden;
            background: url(image/bg.jpg) no-repeat;
            background-size: 200px 200px;
            background-color: #fff;
            background-position: 105px 40px;
        }
        #container{
            position: relative;
            left: 0px;
            top: -306px;
            width: 100%;
            height: auto;
        }
        .row{
            width: 100%;
            height: 102px;
            position: relative;
            left: 0px;
        }
        .cell{
            width: 100px;
            height: 100px;
            float: left;
            border: 1px solid #000;
            background-color: white;
        }
        .black{
            background-color: black;
            cursor:pointer;
        }
        .red{
            background-color: red;
        }
        #score{
            text-align: center;
        }
        #control{
            width: 408px;
            height: 45px;
            margin: 0 auto;
            position: relative;
            top: 10px;
            border: 4px solid #000;
        }
        .command{
            width: 132px;
            height: 41px;
            text-align: center;
            line-height: 41px;
            border: 2px solid #000;
            font-weight: 900;
            float: left;
            font-size: 24px;
            color: #000;
            background-color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 id="score">分数:0</h1>
<div id="main">
    <div id="container"></div>
</div>
<div id="control">
    <div class="command" id="restart">开始</div>
    <div class="command" id="pause">暂停</div>
    <div class="command" id="end">结束</div>
</div> 

<audio src="music/钢琴曲-The Ture That You Leave.mp3" autoplay="true" loop="" volume="60"></audio>
</body>
<script src='js/js.js'></script>
</html>
<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <title>别踩白块</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #eee;
        }
        #main{
            width: 408px;
            height: 408px;
            border: 4px solid #000;
            margin: 0 auto;
            position: relative;
            top: 10px;
            overflow: hidden;
            background: url(image/bg.jpg) no-repeat;
            background-size: 200px 200px;
            background-color: #fff;
            background-position: 105px 40px;
        }
        #container{
            position: relative;
            left: 0px;
            top: -306px;
            width: 100%;
            height: auto;
        }
        .row{
            width: 100%;
            height: 102px;
            position: relative;
            left: 0px;
        }
        .cell{
            width: 100px;
            height: 100px;
            float: left;
            border: 1px solid #000;
            background-color: white;
        }
        .black{
            background-color: black;
            cursor:pointer;
        }
        .red{
            background-color: red;
        }
        #score{
            text-align: center;
        }
        #control{
            width: 408px;
            height: 45px;
            margin: 0 auto;
            position: relative;
            top: 10px;
            border: 4px solid #000;
        }
        .command{
            width: 132px;
            height: 41px;
            text-align: center;
            line-height: 41px;
            border: 2px solid #000;
            font-weight: 900;
            float: left;
            font-size: 24px;
            color: #000;
            background-color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 id="score">分数:0</h1>
<div id="main">
    <div id="container"></div>
</div>
<div id="control">
    <div class="command" id="restart">开始</div>
    <div class="command" id="pause">暂停</div>
    <div class="command" id="end">结束</div>
</div> 

<audio src="music/钢琴曲-The Ture That You Leave.mp3" autoplay="true" loop="" volume="60"></audio>
</body>
<script src='js/js.js'></script>
</html>

var speed = 2;//速度
var count = 0;
var clock = null;
var timer = null;
var state = 0;//0:初始化,1:暂停,2:结束
var onOff = false;
var classBase = {
    cGet:function(cid){
        return document.getElementById(cid);
    },
    cCreate:function(celement){
        return document.createElement(celement);
    },
    cTagname:function(tagname){
        return document.getElementsByTagName(tagname);
    }
}
function $(cid){
    return document.getElementById(cid);
}
function cdiv(className){//创建div+类名
    var div = classBase.cCreate('div');
    div.className = className;
    return div;
}
function caname(){//随机黑块
    var arr = ['cell','cell','cell','cell'];
    var i = Math.floor(Math.random()*4);
    arr[i] = 'cell black';    
    return arr;
}
function crow(){//绘制方块
        var row = cdiv('row');
        var className = caname();
        for(var j=0;j<4;j++){
            // row.appendChild(cdiv(arr[j]));//'cell'/'cell black'
            row.appendChild(cdiv(className[j]));//'cell'/'cell black'
        }
        var con = $('container');
        if(con.firstChild==null){//确保child插在con的第一个而不是最后一个
            con.appendChild(row);           
        }else{
            con.insertBefore(row,con.firstChild);
        }
}

function removeRow(){
    var con = $('container');
    con.removeChild(con.lastChild);
}

function move(){
    var con = $('container');
    // var top = parseInt(window.getComputedStyle(con,null)['top']);
    var top = con.offsetTop;
    if((top+speed)>0){//判断如果top+speed>0即top!=0,则不执行if(top==0){}语句
        top = 0;
    }else{
        top += speed;
    }
    con.style.top = top+'px';  
    document.title = 'top='+top+'/speed='+speed+'/state'+state;  
    if(top == 0){ 
        crow();
        con.style.top = '-102px';         
        removeRow();
    }else if(top > -102){
        var rows = con.children;
        // document.title = rows[[rows.length-1].pass;
        if(rows[rows.length-1].pass!==1){
            fail();
        }
    }

}
function init(){//初始化
    count=0;
    speed=2;
    window.clearInterval(clock);
    clock=null;
    $('score').innerText = '分数:'+count;
    var rows = $('container').children;
    for(var i=rows.length-1;i>-1;i--){
        $('container').removeChild(rows[i]);
    }
    $('container').style.top = '-306px';  

    for(var i=0;i<5;i++){
        crow();
    }
    $('main').onclick = function(ev){
        var ev = ev||window.event;
        judge(ev);
        // console.log(ev.target);
    }
}
function accelerate(){       
    if(speed==2){
        speed=4;
    }else if(speed==4){
        speed=8;
    }else if(speed ==8){
        speed=10;
    }
}
function judge(ev){
    if(state!=2&&state!=3){
        if(ev.target.className=='cell black'){//ev.target.className.indexOf('black')==0; //如果要检索的字符串值没有出现，则该方法返回 -1
            ev.target.className = 'cell';
            count++;
            if(count>=20){
                accelerate();
            }
            $('score').innerText = '分数:'+count;
            music();
            ev.target.parentNode.pass = 1;//pass:自设属性
        }else if(ev.target.className=='cell'){
            fail();
            ev.target.className = 'cell red';
            // var i = 0;
            // ev.target.style.display = i++%2?'none':'block';
            // console.log(ev.target.style.display);
            // document.removeEventListener("click", judge, false);
        } 
    }else{
        alert('false');
        // return;
    }  

}
function fail(){
    state = 2;
    music();
    $('restart').innerHTML = '重新开始';
    window.clearInterval(clock);
}
function music(){
    var au = document.createElement('audio');
    au.preload = 'auto';
    if(state==0){
        au.src = 'music/4133.wav';  
        au.volume = 0.1;     
        au.play();//破碎声       
    }else if(state==2){
        au.src = 'music/false.wav';
        au.volume = 0.6;     
        au.play();//声 
    }
       
}
$('restart').onclick=function(){
    if(state==0){       
        init();
        start();
        $('restart').innerHTML = '重新开始';
    }else if(state==2){
        state=0;
        // while(div.hasChildNodes()) //当div下还存在子节点时 循环继续  
        // {  
        //     div.removeChild(div.firstChild);  
        // }         
        init();
        start();        
    }
}
$('end').onclick=function(){
    if(clock!=null){
        $('container').style.top = '-306px';     
        var rows = $('container').children;
        for(var i=rows.length-1;i>-1;i--){
            $('container').removeChild(rows[i]);
        }
        window.clearInterval(clock);        
        clock = null;
        state=2;
    }

}
$('pause').onclick=function(){
    if(onOff==false&&state==0){
        speed=0;
        state=3;//3:暂停状态
        $('pause').innerHTML='继续';
        onOff=true;        
    }else if(onOff&&state!=2){
        state = 0;
        speed=2;
        $('pause').innerHTML='暂停';
        onOff = false;
    }
}
function start(){
    clock = window.setInterval('move()',30);

}