javascript 好玩 javascript游戏源码

转载
笑傲江湖求败 2023-06-06 11:09:02
文章标签 i++ 数组 Math 文章分类 JavaScript 前端开发
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>2048</title>
    <style>
        *{margin: 0; padding: 0}
        #div1024{width: 600px; margin: 50px auto;overflow: hidden}
        .main{float: left;margin-right: 50px;}
        li{list-style:none}
        .main>li{width: 328px;overflow: hidden}
        .main>li ul li{border: 1px solid #6666ff;width: 80px;height: 80px;border-collapse:collapse; text-align: center;line-height: 80px;font-size: 36px;float: left
        }
    </style>
</head>
<body>
<div id="div1024">
<ul class="main">
    <li class="line0"><ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></li>
    <li class="line1"><ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></li>
    <li class="line2"><ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></li>
    <li class="line3"><ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></li>
</ul>
    <div style="float: left; margin-top: 120px;">
    <div>分数：<span id="score">0</span></div>
    <div>计数：<span id="step">0</span></div>
    <div>玩法：<span id="tips">用方向键操作</span></div>
    <div>提示：<span id="tip"></span></div>
    </div>
</div>
<script>
    window.onload=function(){
var game={
    // 随机产生的数字
    num:0,
    //剩余空格
    counts:0,
    score:0,
    step:0,
    //横向数组与纵向数组
    arr:[],
    arr1:[],
    init:function(){
        game.style()
        document.getElementById('tip').innerHTML='游戏开始啦...'
        this.add()
        this.add()
    },
    add:function(){
        var x=false,y=false
        Math.random() > 0.5 ? this.num=2 :this.num=4
        var Lindex=Math.floor(Math.random()*4),
                Rindex=Math.floor(Math.random()*4),
                dom=document.getElementsByClassName('line'+Lindex)[0].getElementsByTagName('li')[Rindex]
        if(dom.innerHTML=='') {
            dom.className='style'+this.num
            dom.innerHTML=this.num
        }
        else{
            this.count()
            if(this.counts==0){
                //判断横向是否有值相同
                outerloop0:
                for(var i=0;i<4;i++){
                    for(var j=0;j<this.arr[i].length-1;j++){
                        if(this.arr[i][j]==this.arr[i][j+1]){
                          x=true
                            break outerloop0;
                        }
                    }
                }
                //判断纵向是否有值相同
                outerloop1:
                for(var i=0;i<4;i++){
                    for(var j=0;j<this.arr1[i].length-1;j++){
                        if(this.arr1[i][j]==this.arr1[i][j+1]){
                          y=true
                            break outerloop1
                        }
                    }
                }
                if(!x && !y ){
                  alert('gameovar,你的分数是'+this.score)
                }else if(x){
                    if(arguments[0].keyCode==37 || arguments[0].keyCode==39){
                        this.step++
                    }
                }
                else if(y){
                    if(arguments[0].keyCode==38 || arguments[0].keyCode==40){
                        this.step++
                    }
                }
            }else{
                this.add()
            }
        }
    },
    left:function(){
        //数组值合并
        for(var i=0;i<4;i++){
            for(var j=0;j<this.arr[i].length-1;j++){
                if(this.arr[i][j]==this.arr[i][j+1]){
                    this.score+=this.arr[i][j]*2
                    this.arr[i][j]+=this.arr[i][j]
                    this.arr[i].splice(j+1,1)
                }
            }
        }
        //赋值给dom
        for(var i=0;i<4;i++){
            len=this.arr[i].length
            for(var m=0;m<4;m++){
                document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].className=''
                document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].innerHTML=''
            }
            for(var j=0;j<len;j++){
                document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[j].innerHTML=this.arr[i][j]
                document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[j].className='style'+this.arr[i][j]
            }
        }
        if(this.counts!=0) this.step++
    },
    right:function(){
        //数组值合并
        for(var i=0;i<4;i++){
            for(var j=this.arr[i].length-1;j>0;j--){
                if(this.arr[i][j]==this.arr[i][j-1]){
                    this.score+=this.arr[i][j-1]*2
                    this.arr[i][j]+=this.arr[i][j]
                    this.arr[i].splice(j-1,1)
                }
            }
        }
        //赋值给dom
        for(var i=0;i<4;i++){
            len=this.arr[i].length
            for(var m=0;m<4;m++){
                document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].className=''
                document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].innerHTML=''
            }
            for(var j=0;j<len;j++){
                document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[3-j].innerHTML=this.arr[i][len-1-j]
                document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[3-j].className='style'+this.arr[i][len-1-j]
            }
        }
        if(this.counts!=0) this.step++
        this.log(this.arr)
    },
    up:function(){
        //数组值合并
        for(var i=0;i<4;i++){
            for(var j=0;j<this.arr1[i].length-1;j++){
                if(this.arr1[i][j]==this.arr1[i][j+1]){
                    this.score+=this.arr1[i][j]*2
                    this.arr1[i][j]+=this.arr1[i][j]
                    this.arr1[i].splice(j+1,1)
                }
            }
        }
        //赋值给dom
        for(var i=0;i<4;i++){
            len=this.arr1[i].length
            for(var m=0;m<4;m++){
                document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].className=''
                document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].innerHTML=''
            }
            for(var j=0;j<len;j++){
                document.getElementsByClassName('line'+j)[0].getElementsByTagName('li')[i].innerHTML=this.arr1[i][j]
                document.getElementsByClassName('line'+j)[0].getElementsByTagName('li')[i].className='style'+this.arr1[i][j]
            }
        }
        if(this.counts!=0) this.step++
    },
    down:function(){
        //数组值合并
        for(var i=0;i<4;i++){
            for(var j=this.arr1[i].length-1;j>0;j--){
                if(this.arr1[i][j]==this.arr1[i][j-1]){
                    this.score+=this.arr1[i][j-1]*2
                    this.arr1[i][j]+=this.arr1[i][j]
                    this.arr1[i].splice(j-1,1)
                }
            }
        }
        //赋值给dom
        for(var i=0;i<4;i++){
            len=this.arr1[i].length
            for(var m=0;m<4;m++){
                document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].className=''
                document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].innerHTML=''
            }
            for(var j=0;j<len;j++){
                document.getElementsByClassName('line'+(4-len+j))[0].getElementsByTagName('li')[i].innerHTML=this.arr1[i][j]
                document.getElementsByClassName('line'+(4-len+j))[0].getElementsByTagName('li')[i].className='style'+this.arr1[i][j]
            }
        }
        if(this.counts!=0) this.step++
    },
    count:function(){
        var inner,
                inner1,
                m= 0,
                n=0
        this.counts=0
        //横向数组，用于左右操作
        for(var i=0;i<4;i++){
            this.arr[i]=[]
             m=0
            for(var j=0;j<4;j++){
               inner=document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[j].innerHTML
                if(inner){
                    this.arr[i][m]=Number(inner)
                    m++
                }
                    else{
                        this.counts++
                    }
                }
        }
        this.log(this.arr)
        //纵向数组用于上下操作
        for(var x=0;x<4;x++){
            this.arr1[x]=[]
        }
        for(var x=0;x<4;x++){
             n=0
            for(var y=0;y<4;y++){
                inner1=document.getElementsByClassName('line'+y)[0].getElementsByTagName('li')[x].innerHTML
                if(inner1){
                    this.arr1[x][n]=Number(inner1)
                    n++
                }
            }
        }
    },
    log:function(x){
        console.log(x)
    },
    update:function(){
        document.getElementById('score').innerHTML=this.score
        document.getElementById('step').innerHTML=this.step
        var tip=document.getElementById('tip')
        var max=this.arr.toString().split(',')
        function sort(a,b){return a-b}
       max=max.sort(sort)[max.length-1]
        if(max==512){tip.innerHTML='加油加油...'}
        if(max==1024){tip.innerHTML='唉哟，不错喔...'}
        if(max==2048){tip.innerHTML='恭喜你成功了，太厉害了...'}
        if(max==4096){tip.innerHTML='超神了...'}
        if(max==8192){tip.innerHTML='XX，出现bug了...'}
    },
    style:function(){
        var values=[2,4,8,16,32,64,128,256,512,1024,2048,4096,8192],
                add=0.075,
                styles=''
        for(var i=0;i<values.length;i++){
            styles+='.style'+values[i]+'{background-color:hsla(360,50%,50%,'+add+');}\r\n'
            add+=0.075
        }
        document.getElementsByTagName('style')[0].innerHTML+=styles
    }
}
game.init()
document.onkeydown=function(e){
    game.count()
    e=e || window.event
    switch (e.keyCode){
        case 37 :
            game.left()
            game.add(e)
            game.update()
            break
        case 38 :
            game.up()
            game.add(e)
            game.update()
            break
        case 39 :
            game.right()
            game.add(e)
            game.update()
            break
        case 40 :
            game.down()
            game.add(e)
            game.update()
            break
        default :
            break
    }
}
    }
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。