2048简单游戏网页版

Posted 2023-03-24 巅峰蜗牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2048简单游戏网页版相关的知识，希望对你有一定的参考价值。
失业在家，做几个小游戏看看

玩法：按键盘的上下左右操作
2048.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2048小游戏</title>
</head>
<style>
    html,body
        width: 100%;
        height: 100%;
        overflow: hidden;
        color: #776e65;
        font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
    
    #game
        display: flex;
        flex-wrap: wrap;
        width: 400px;
        background: #bbada0;
        padding: 10px;
        border-radius:10px;
        justify-content: space-between;
    
    .item
        background: rgba(238, 228, 218, 0.35);
        width: 90px;
        height: 90px;
        display: block;
        text-align: center;
        line-height: 90px;
        font-size: 35px;
        margin-bottom: 10px;
    
    .item.active
        background: #eee4da;
    
</style>
<body>
<div id="game">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

</body>
<script>

    const rect=new Array(16).fill(0);

    function getRandomNum()
        return Math.random()>0.7?4:2
    
    function getRandomIndex()
        const emptyArr=[]
        for(let i=0;i<16;i++)
            if(!rect[i])
                emptyArr.push(i)
            
        
        const n1=0|Math.random()*emptyArr.length
        const n2=getRandomNum()
        rect[emptyArr[n1]]=n2
        console.log(emptyArr[n1],n2)
    
    const childNodes=document.querySelectorAll("#game .item")
    function render()
        for(let i=0;i<16;i++)
            const num=rect[i]
            if(num)
                childNodes[i].textContent=num
                childNodes[i].classList.add(\'active\')
            else
                childNodes[i].textContent=\'\'
                childNodes[i].classList.remove(\'active\')
            
        
    
    getRandomIndex()
    getRandomIndex()
    render()
    document.addEventListener(\'keydown\',function (event)
        if(event.keyCode===38)
            up()
        
        if(event.keyCode===40)
            down()
        
        if(event.keyCode===37)
            left()
        
        if(event.keyCode===39)
            right()
        
    )
    function up()
        let has=false
        //移动
        for(let x=0;x<4;x++)
            const prelist=[]
            const list=[]
            let preV=0
            for(let y=0;y<4;y++)
                const v=rect[y*4+x]
                prelist.push(v)
                if(v)
                    if(preV===v)
                        list[list.length-1]=2*v
                        preV=0
                    else
                        list.push(v)
                        preV=v
                    
                
            
            for(let y=0;y<4;y++)
                if(!list[y])
                    list[y]=0
                
                rect[y*4+x]=list[y]
            
            console.log(prelist,list)
            if(prelist.join(\',\')!==list.join(\',\'))
                has=true
            
        
        if(has)
            getRandomIndex()
            render()
        

    
    function down()
        let has=false
        for(let x=0;x<4;x++)
            const prelist=[]
            const list=[]
            let preV=0
            for(let y=3;y>=0;y--)
                const v=rect[y*4+x]
                prelist.push(v)
                if(v)
                    if(preV===v)
                        list[list.length-1]=2*v
                        preV=0
                    else
                        list.push(v)
                        preV=v
                    
                
            
            for(let i=0;i<4;i++)
                if(!list[i])
                    list[i]=0
                
                rect[(3-i)*4+x]=list[i]
            
            if(prelist.join(\',\')!==list.join(\',\'))
                has=true
            
        
        if(has)
            getRandomIndex()
            render()
        
    
    function left()
        let has=false
        for(let y=0;y<4;y++)
            const prelist=[]
            const list=[]
            let preV=0
            for(let x=0;x<4;x++)
                const v=rect[y*4+x]
                prelist.push(v)
                if(v)
                    if(preV===v)
                        list[list.length-1]=2*v
                        preV=0
                    else
                        list.push(v)
                        preV=v
                    
                
            
            for(let i=0;i<4;i++)
                if(!list[i])
                    list[i]=0
                
                rect[y*4+i]=list[i]
            
            if(prelist.join(\',\')!==list.join(\',\'))
                has=true
            
        
        if(has)
            getRandomIndex()
            render()
        
    
    function right()
        let has=false
        for(let y=0;y<4;y++)
            const prelist=[]
            const list=[]
            let preV=0
            for(let x=3;x>=0;x--)
                const v=rect[y*4+x]
                prelist.push(v)
                if(v)
                    if(preV===v)
                        list[list.length-1]=2*v
                        preV=0
                    else
                        list.push(v)
                        preV=v
                    
                
            
            for(let i=0;i<4;i++)
                if(!list[i])
                    list[i]=0
                
                rect[y*4+3-i]=list[i]
            
            if(prelist.join(\',\')!==list.join(\',\'))
                has=true
            
        
        if(has)
            getRandomIndex()
            render()
        
    
</script>
</html>
以上是关于2048简单游戏网页版的主要内容，如果未能解决你的问题，请参考以下文章
html5 | 前端小游戏 | 2048 益智游戏
不敢想！不敢想！我用Python自动玩转2048游戏
2048小游戏竟然还有3D版？使用MATLAB制作一款3D版2048小游戏
JAVA版2048