前端入门小游戏---踩砖块

最新推荐文章于 2024-07-30 16:49:30 发布

Reginald(*•̀ᴗ•́*)و ̑

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量769

点赞数 15

文章标签：前端

本文链接：https://blog.csdn.net/weixin_42064557/article/details/139884923

版权

前端入门小游戏—踩砖块

挖出来自己多年前还是小白的时候写的代码。不过应该没关系吧，记录一下。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>踩砖块</title>
<style>
    body{
        margin:0;
        background: url("image/6421482_154553076000_2.jpg") no-repeat center/cover;
    }
    #frame{
        width:416px;
        height:406px;
        border-top:4px solid blue;
        border-bottom:2px dashed blue;
        margin:-210px auto auto auto;
        overflow:hidden;
    }
    #moveblock{
        position:relative;
        top:-100px;
        width:416px;
        height:416px;
    }
    .row{
        width:416px;
        height:104px;
    }
    .row div{
        width:100px;
        height:100px;
        float:left;
        border:2px solid gray;
    }
    .black{
        background-color: black;
    }
    #lefttop{
        width:200px;
        height:200px;
        margin:0px 350px;
    }
    .defen{
        font-size:30px;
    }
    #grade{
        font-size:30px;
        padding:50px;
    }
    .aqua{
        background-color: aqua;
    }
    .yellow{
        background-color: yellow;
    }
    .red{
        background-color: red;
    }
    .blue{
        background-color: blue;
    }
    #instruction{
        width:50px;
        height:50px;
        margin:60px 10px 10px 500px;
    }
</style>
</head>
<body>
<div id="instruction" class="red"></div>
<div id="lefttop">
    <p class="defen">得分：</p>
    <p id="grade">0</p>
</div>
<div id="frame">
    <div id="moveblock">
        <div class="row">
            <div class="yellow"></div>
            <div class="black"></div>
            <div class="red"></div>
            <div class="aqua"></div>
        </div>
        <div class="row">
            <div class="aqua"></div>
            <div class="yellow"></div>
            <div class="red"></div>
            <div class="black"></div>
        </div>
        <div class="row">
            <div class="black"></div>
            <div class="red"></div>
            <div class="yellow"></div>
            <div class="aqua"></div>
        </div>
        <div class="row">
            <div class="aqua"></div>
            <div class="black"></div>
            <div class="yellow"></div>
            <div class="red"></div>
        </div>
    </div>
</div>
<script>
var instruction=document.getElementById("instruction");
var moveblock=document.getElementById("moveblock");
var grade=document.getElementById("grade");
var count=0;
var pxs=1;
var block_colors=["yellow","aqua","red","blue","black"];
var index_color=[];
var times=0;
var grades=0;

var randon_func=function(){
    var rf=Math.floor(Math.random()*5);
    return block_colors[rf];
}
var move=setInterval(function(){
    var movetop=getComputedStyle(moveblock).top;
    var movetop_int=parseInt(movetop);
    if(movetop_int>=0) {
        var divrow = document.createElement("div");
        divrow.className = "row";
        var random_data = Math.floor(Math.random() * 4);
        for (var i = 0; i < 4; i++) {
            var div = document.createElement("div");
            if (i == random_data) {
                div.className = "black";
            }else{
                var ran=Math.floor(Math.random() * 4);
                for(var j=0;j<index_color.length;j++) {
                    while(ran==index_color[j]||ran==random_data) {
                        ran=Math.floor(Math.random() * 4);
                    }
                }
                index_color[times]=ran;
                console.log(index_color)
                times++;
                div.className=block_colors[ran];
            }
            divrow.appendChild(div);//div作为divrow的孩子
        }
        times=0;
        //   divrow[random_data].className="black";
        //将新增的divrow作为moveblock的第一个孩子（放在最顶端）
        moveblock.insertBefore(divrow, moveblock.firstChild);
        movetop_int = -100;
    }
    moveblock.style.top=movetop_int+pxs+"px";
    grade.innerHTML=grades;
},30)

moveblock.onclick=function(ev){
    var catch_target=ev.target;
    if(catch_target.className!=instruction.className){ //catch_target.hasAttribute("class")判断是否含有class选择器
            clearInterval(move);
            alert("总得分："+grades+"分，游戏结束！")// grade.innerHTML=count;
    }else{
        catch_target.style.backgroundColor="white"
        count++;
        if(count!=0&&count%5==0){
            pxs+=2;
            if(pxs>=30){
                pxs=30;    //持续时间越长，div块下拉速度越快
            }
        }
        if(instruction.className=="black"){
            grades+=20;
        }else if(instruction.className=="aqua"){
            grades+=5;
        }else if(instruction.className=="blue"){
            grades+=10;
        }else if(instruction.className=="yellow"){
            grades+=2;
        }else grades+=1;
        instruction.className=randon_func();
    }
}
</script>
</body>
</html>