JS 네 이 티 브 2048 미니 게임 소스 공유(인터넷 최신)

13216 단어 js2048작은 놀이
최근 알고리즘 을 배 우 는 지식 에서 알고리즘 이 주도 하 는 작은 게임 을 보 았 습 니 다.여기 서 코드 를 공유 하 겠 습 니 다.
효과:

코드:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=360px,user-scalable=no" />
    <title>2048   </title>
    <style>
        body,h1,div,table,tr,td{
            margin: 0px;
            padding: 0px;
        }
        body{
            background-color: rgb(0,0,0);
        }
        h1{
            margin: 36px auto;
            text-align: center;
            color: rgba(255,255,255,0.7);
            font-family: "  ";
            font-size: 48px;
            text-shadow: 1px 2px 3px rgb(134,134,134);
        }
        div{
            margin: 12px auto;
            line-height: 60px;
        }
        #box{
            margin-top: -24px;
            width: 240px;
            height: 60px;
            text-align: center;
            font-weight: bold;
            color: rgb(255,255,255);
        }
        #box input{
            border: 3px solid rgb(255,255,255);
            border-radius: 4px;
            box-shadow: 1px 2px 3px rgb(234,234,234);
        }
        #box input:focus{
            outline-style: none;
        }
        table{
            margin: 24px auto;
            border: 3px solid rgb(255,255,255);
            border-radius: 6px;
        }
        #random,td{
            width: 60px;
            height: 60px;
            border: 2px solid rgb(255,255,255);
            border-radius: 18px;
            text-align: center;
            font-weight: bold;
            color: rgb(255,255,255);
        }
        td:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>2 0 4 8</h1>
<!--            -->
<div id="box">
      : <span id="span">0</span>
             
    <input id="but" type="button" value="   " />
</div>
<!--       -->
<div id="random"></div>
<!--        -->
<table border="3px">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
<script type="text/javascript">
    var span = document.getElementById("span");
    var but = document.getElementById("but");
    var td = document.getElementsByTagName("td");
    //    
    var score = 0;
    //     
    var random = document.getElementById("random");
    var showNums = [2,4,8,16,32,64,128,256,512,1024];
    var showNum = 0;
    //       
    var colors = ["rgb(255, 169, 182)","rgb(108, 251, 104)","rgb(255, 150, 46)","rgb(255, 121, 46)","rgb(255, 217, 46)",
                "rgb(46, 200, 255)","rgb(46, 113, 255)","rgb(240, 46, 255)","rgb(46, 255, 175)","rgb(153, 134, 255)"];
    //     ,     
    /* start */
    function init(){
        var max = maxNum();
        var num = 0;
        for(var i=4;i > 0;i++){
            if(max < Math.pow(2,i+1)){
                num = parseInt(Math.random()*i);
                break;
            }else if(max < 2048){
                continue;
            }else{
                num = parseInt(Math.random()*showNums.length);
                break;
            }
        }
        random.innerHTML = showNums[num];
        color(random);
        showNum = showNums[num];
    }
    init();
    /* end */
     
    //         
    /* start */
    function maxNum(){
        var max = 0;
        for(var i=0;i<td.length;i++){
            if(td[i].innerHTML == ""){
                max = max;
            }else{
                if(parseInt(td[i].innerHTML) > max){
                    max = parseInt(td[i].innerHTML);
                }else{
                    max = max;
                }
            }
        }
        return max;
    }
    /* end */
     
    //          
    /* start */
    function color(obj){
        for(var i=0;i < colors.length;i++){
            if(obj.innerHTML == Math.pow(2,i+1)){
                obj.style = "background-color: "+colors[i]+";";
                break;
            }
        }
    }
    /* end */
     
    //    
    /* start */
    function offsetTop(obj,index){//   
        if(index > 3){
            if(td[(index-4)].innerHTML == obj.innerHTML){
                td[(index-4)].innerHTML = "";
                td[(index-4)].style = "background-color: rgba(0, 0, 0, 0);";
                return true;
            }
        }
        return false;
    }
    function offsetBottom(obj,index){//   
        if(index < 12){
            if(td[(index+4)].innerHTML == obj.innerHTML){
                td[(index+4)].innerHTML = "";
                td[(index+4)].style = "background-color: rgba(0, 0, 0, 0);";
                return true;
            }
        }
        return false;
    }
    function offsetLeft(obj,index){//   
        if(index!=0 && index!=4 && index!=8 && index!=12){
            if(td[(index-1)].innerHTML == obj.innerHTML){
                td[(index-1)].innerHTML = "";
                td[(index-1)].style = "background-color: rgba(0, 0, 0, 0);";
                    return true;
            }
        }
        return false;
    }
    function offsetRight(obj,index){//   
        if(index!=3 && index!=7 && index!=11 && index!=15){
            if(td[(index+1)].innerHTML == obj.innerHTML){
                td[(index+1)].innerHTML = "";
                td[(index+1)].style = "background-color: rgba(0, 0, 0, 0);";
                return true;
            }
        }
        return false;
    }
    /* end */
     
    //         
    /* start */
    function merge(obj,index){
        if(offsetTop(obj,index)){
            if(offsetBottom(obj,index)){
                if(offsetLeft(obj,index)){
                    if(offsetRight(obj,index)){
                        obj.innerHTML = parseInt(obj.innerHTML)*2;//   、 、 、 
                        score += 16;
                        merge(obj,index);
                    }else{
                        obj.innerHTML = parseInt(obj.innerHTML)*2;//    、 、 
                        score += 8;
                        merge(obj,index);
                    }
                }else if(offsetRight(obj,index)){
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//    、 、 
                    score += 8;
                    merge(obj,index);
                }else{
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//    、 
                    score += 4;
                    merge(obj,index);
                }
            }else if(offsetLeft(obj,index)){
                if(offsetRight(obj,index)){
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//    、 、 
                    score += 8;
                    merge(obj,index);
                }else{
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//    、 
                    score += 4;
                    merge(obj,index);
                }
            }else if(offsetRight(obj,index)){
                obj.innerHTML = parseInt(obj.innerHTML)*2;//    、 
                score += 4;
                merge(obj,index);
            }else{
                obj.innerHTML = parseInt(obj.innerHTML)*2;//    
                score += 2;
                merge(obj,index);
            }
        }else if(offsetBottom(obj,index)){
            if(offsetLeft(obj,index)){
                if(offsetRight(obj,index)){
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//    、 、 
                    score += 8;
                    merge(obj,index);
                }else{
                    obj.innerHTML = parseInt(obj.innerHTML)*2;//    、 
                    score += 4;
                    merge(obj,index);
                }
            }else if(offsetRight(obj,index)){
                obj.innerHTML = parseInt(obj.innerHTML)*2;//    、 
                score += 4;
                merge(obj,index);
            }else{
                obj.innerHTML = parseInt(obj.innerHTML)*2;//    
                score += 2;
                merge(obj,index);
            }
        }else if(offsetLeft(obj,index)){
            if(offsetRight(obj,index)){
                obj.innerHTML = parseInt(obj.innerHTML)*2;//    、 
                score += 4;
                merge(obj,index);
            }else{
                obj.innerHTML = parseInt(obj.innerHTML)*2;//    
                score += 2;
                merge(obj,index);
            }
        }else if(offsetRight(obj,index)){
            obj.innerHTML = parseInt(obj.innerHTML)*2;//    
            score += 2;
            merge(obj,index);
        }
    }
    /* end */
     
    //main
    /* start */
    function gameOver(){
        for(var i=0;i<td.length;i++){
            if(td[i].innerHTML == ""){
                break;
            }
            if(i == 15){
                alert("   !      。。。");
            }
        }
    }
    /* end */
     
    //main
    /* start */
    (function(){
        for(var i=0;i<td.length;i++){
            var choose = td[i];
            choose.index = i;
            choose.onclick = function(){
                if(this.innerHTML == ""){
                    this.innerHTML = showNum;
                    merge(this,this.index);
                    if(this.innerHTML >= 2048){
                        this.innerHTML = "";
                        this.style = "background-color: rgba(0, 0, 0, 0);";
                    }
                    color(this);
                    init();
                }
                updateScore();
                gameOver();
            }
        }
    })();
    /* end */
     
    //    
    /* start */
    function updateScore(){
        if(score > 500){
            span.style = "color: rgb(255,0,0)";
        }else if(score > 100){
            span.style = "color: rgb(255,0,255)";
        }else if(score > 50){
            span.style = "color: rgb(255,255,0)";
        }else if(score > 20){
            span.style = "color: rgb(0,0,255)";
        }else if(score > 10){
            span.style = "color: rgb(0,255,0)";
        }
        span.innerHTML = score;
    }
    /* end */
     
    //   
    /* start */
    but.onclick = function(){
        location.reload();
    }
    /* end */
     
</script>
</html>
JS 네 이 티 브 2048 미니 게임 소스 공유 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 js 2048 미니 게임 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!

좋은 웹페이지 즐겨찾기