JavaScript小项目——2048数字游戏

来源：互联网发布：身份证识别软件app 编辑：程序博客网时间：2024/06/06 15:42

1.本项目基于github项目
2.做了些许优化，练手用，代码共200多行
3.如侵权，请联系微信manyu_2017
4.外观如下

html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>2048小游戏</title><link rel="stylesheet" href="2048.css"><script src="http://code.jquery.com/jquery-latest.js"></script></head><body>    <div id="div2048">        <p id="score">score:0&nbsp;&nbsp;highest:0</p>        <a id="start" ><br><br><br><br><br>**，点击鼠标开始游戏<br>请使用方向键或WSAD操作</a>    </div>    <script type="text/javascript" src="2048.js"></script></body></html>

CSS

@CHARSET "UTF-8";#div2048{    width: 500px;    height: 600px;    background-color: #b8af9e;    margin: 0 auto;//中间不能加逗号    position: relative;}#score{    margin: 0 auto;    width: 500px;    height: 40px;    line-height: 40px;    padding: 30px 0;    font-size: 40px;    text-align: center;    color:pink;    background: #ccc0b2;    display:none;}#start{    width: 500px;    height: 600px;    line-height: 50px;    display: block;    text-align: center;    font-size: 25px;    background:url("合照.ico");    color: #FFFFFF;}#div2048 div.cell{    margin: 20px 0px 0px 20px;    width: 100px;    height: 40px;    line-height: 40px;    padding: 30px 0;    font-size: 40px;    text-align: center;    float: left;}#div2048 div.cell0{    background: #ccc0b2;}#div2048 div.cell2{    color: #7c736a;    background: #eee4da;}#div2048 div.cell4{    color: #7c736a;    background: #ece0c8;}#div2048 div.cell8{    color: #fff7eb;    background: #f2b179;}#div2048 div.cell16{    color:#fff7eb;    background:#f59563;}#div2048 div.cell32{    color:#fff7eb;    background:#f57c5f;}#div2048 div.cell64{    color:#fff7eb;    background:#f65d3b;}#div2048 div.cell128{    color:#fff7eb;    background:#edce71;}#div2048 div.cell256{    color:#fff7eb;    background:#edcc61;}#div2048 div.cell512{    color:#fff7eb;    background:#ecc850;}#div2048 div.celle1024{    color:#fff7eb;    background:#edc53f;}#div2048 div.cell2048{    color:#fff7eb;    background:#eec22e;}

JavaScript

(function(){    function game2048(container) {        this.container=container;        this.cells=new Array(16);    }    game2048.prototype={                    init:function(){                for ( var i=0;i<this.cells.length;i++) {                    var cell = this.newCell(0);                    this.container.appendChild(cell);                    this.cells[i]=cell;                }                this.randomCell();                this.randomCell();            },            newCell:function(num){                var cell=document.createElement('div');                this.setCellNum(cell,num);                return cell;            },            setCellNum:function(cell,num){                cell.className='cell cell'+num;                cell.num=num;                cell.innerHTML=num>0?num:'';            },            randomCell:function(){                var rm=[];                for ( var i=0;i<16;i++) {                    if (this.cells[i].num==0) {                        rm.push(this.cells[i]);                    }                }                var rmCell =  rm[Math.floor(Math.random()*rm.length)];                this.setCellNum(rmCell,Math.random()>0.8?4:2);            },            //java在遍历集合时不方便改值，js可以            move:function(dir){                var index;                switch (dir) {                case 38:case 87://up                    for (var i = 4; i < 16; i++) {                        index=i;                        while (index>=4) {                            this.merge(this.cells[index-4],this.cells[index]);                            index=index-4;                        }                    }                    break;                case 40:case 83://down                    for (var i = 11; i >=0; i--) {                        index=i;                        while (index<12) {                            this.merge(this.cells[index+4],this.cells[index]);                            index=index+4;                        }                    }                    break;                case 37:case 65://left                    for (var i = 1; i < 16; i++) {                        index=i;                        while (index%4!=0) {                            this.merge(this.cells[index-1],this.cells[index]);                            index=index-1;                        }                    }                    break;                case 39:case 68://right                    for (var i = 14; i >= 0; i--) {                        index=i;                        while (index%4!=3) {                            this.merge(this.cells[index+1],this.cells[index]);                            index=index+1;                        }                    }                    break;                }                this.randomCell();            },            merge:function(cell1,cell2){                var cell1Num = cell1.num;                var cell2Num = cell2.num;                if(cell2Num!=0){                    if (cell1Num==0) {                        this.setCellNum(cell1, cell2Num);                        this.setCellNum(cell2, 0);                    } else if(cell1Num==cell2Num) {                        this.setCellNum(cell1, cell1Num*2)                        this.setCellNum(cell2, 0);                    }                }            },            over:function(){                for (var i = 0; i < this.cells.length; i++) {                    if (this.cells[i].num==0) {                        return false;                    }                    if (i%4!=3 && this.cells[i].num==this.cells[i+1].num) {                        return false;                    }                    if (i<12 && this.cells[i].num==this.cells[i+4].num) {                        return false;                    }                }                return true;            },            clean:function(){                for (var i = 0; i < this.cells.length; i++) {                    this.container.removeChild(this.cells[i]);                }            },            score:function(){                var scoreNum=0;                for(var x=0;x<16;x++){                    scoreNum=scoreNum+this.cells[x].num;                }                return scoreNum;            },        }    var game,startBtn,scoreHeader,score,highestScore;    window.onload=function(){        var container = document.getElementById('div2048');        startBtn=document.getElementById('start');        scoreHeader=document.getElementById('score');        highestScore=0;        startBtn.onclick=function(){            this.style.display='none';            scoreHeader.style.display='block';            game=new game2048(container);            game.init();        }    }    window.onkeydown=function(e){        var keynum;        if(window.event){            keynum=e.keyCode;        }        else if (e.which) {            keynum=e.which;        }        if ([37,38,39,40,87,65,83,68].indexOf(keynum)>-1) {            if (game.over()) {                game.clean();                startBtn.style.display='block';                scoreHeader.style.display='none';                if(score==highestScore){                    startBtn.innerHTML="<br><br><br><br><br>**大人创造了得分纪录："+score+"分<br>厉害的宝宝该去学习了";                }else {                    startBtn.innerHTML="<br><br><br><br><br>**大人最终得分"+score+"分<br>没有打破纪录的笨宝宝该去学习了呢";                }                scoreHeader.innerHTML="score:0&nbsp;&nbsp;highest:"+highestScore;                return;            }            game.move(keynum);            score=game.score();            highestScore=score>highestScore?score:highestScore;            scoreHeader.innerHTML="score:"+score+"&nbsp;&nbsp;highest:"+highestScore;        }    }})();

0 0