2048简单游戏网页版

做几个小游戏看看

玩法：按键盘的上下左右操作

 

 

demo：https://caoke90.gitee.io/suiplugin/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;
    }
    .btns{
        padding-top: 10px;
        position: relative;
    }
    .btn{
        position: absolute;
        display: inline-block;
        box-sizing: border-box;
        background: #fff;
        height: 44px;
        width: 100px;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 44px;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
        transition: opacity 0.2s;
        -webkit-appearance: none;
        border: 1px solid #07c160;
    }
    .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;

    }
    .item.fadeIn{
        animation: fadeIn;
        animation-duration: 1s; /* don't forget to set a duration! */
    }
    @-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
</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>
<div class="btns">
    <div class="btn" style="left: 150px;" onclick="keyDown('up')">上</div>
    <div class="btn" style="left: 150px;top: 55px;"  onclick="keyDown('down')">下</div>
    <div class="btn" style="left: 50px;top: 55px;" onclick="keyDown('left')">左</div>
    <div class="btn" style="left: 250px;top: 55px;" onclick="keyDown('right')">右</div>
</div>
</body>
<script>
    const childNodes=document.querySelectorAll("#game .item")
    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
        const dom=childNodes[emptyArr[n1]]
        dom.classList.add('fadeIn')
        dom.addEventListener('animationend', function (){
            dom.classList.remove('fadeIn');
        });
    }

    function render(){
        for(let i=0;i<16;i++){
            const num=rect[i]
            if(num){
                const dom=childNodes[i]
                dom.textContent=num
                dom.classList.add('active')


            }else{
                childNodes[i].textContent=''
                childNodes[i].classList.remove('active')
            }
        }
    }
    getRandomIndex()
    getRandomIndex()
    render()
    document.addEventListener('keydown',function (event){
        if(event.keyCode===38){
            keyDown('up')
        }
        if(event.keyCode===40){
            keyDown('down')
        }
        if(event.keyCode===37){
            keyDown('left')
        }
        if(event.keyCode===39){
            keyDown('right')
        }
    })
    function keyDown(type){
        let has=false
        //移动
        for(let x=0;x<4;x++){
            const prelist=[]
            const list=[]
            let preV=0
            for(let y=0;y<4;y++){
                let v
                if(type==='up'){
                    v=rect[y*4+x]
                }else if(type==='down'){
                    v=rect[(3-y)*4+x]
                }else if(type==='left'){
                    v=rect[x*4+y]
                }else if(type==='right'){
                    v=rect[x*4+(3-y)]
                }
                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
                }
                if(type==='up'){
                    rect[i*4+x]=list[i]
                }else if(type==='down'){
                    rect[(3-i)*4+x]=list[i]
                }else if(type==='left'){
                    rect[x*4+i]=list[i]
                }else if(type==='right'){
                    rect[x*4+(3-i)]=list[i]
                }


            }
            if(prelist.join(',')!==list.join(',')){
                has=true
            }
        }
        if(has){
            getRandomIndex()
            render()
        }

    }

</script>
</html>
View Code
复制代码

 

posted @   无工时代  阅读(492)  评论(0)  编辑  收藏  举报
相关博文：
·  俄罗斯方块游戏的算法实现
·  跑的快扑克游戏技术方案设计
·  2048小游戏
·  21.2048小游戏
·  我的简易2048小游戏记录整理
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· 字符编码：从基础到乱码解决
· SpringCloud带你走进微服务的世界
历史上的今天：
2019-03-23 数学类与图形类
点击右上角即可分享
微信分享提示
AI IDE Trae