前端模型--PC端的2048

来源：互联网发布：linux socket句柄取值编辑：程序博客网时间：2024/06/07 05:29

本文主要介绍如何通过js实现2048

1.html

<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>2048</title>    <link rel="stylesheet" type="text/css" href="2048.css" />    <script type="text/javascript" src="2048.js"></script></head><body><div id="div2048">    <a id="start">按键 W A S D 控制移动:-)</a></div></body></html>

2.2048.css

@charset "utf-8";/*外盒子样式*/#div2048{    width: 500px;    height: 500px;    background-color: #b8af9e;    margin: 0 auto;    position: relative;}/*开始按钮*/#start{    width: 500px;    height: 500px;    line-height: 500px;    display: block;    text-align: center;    font-size: 30px;    background: #f2b179;    color: #FFFFFF;}/*格子大小 100*100 margin20*/#div2048 div.tile{    margin: 20px 0px 0px 20px;    width: 100px;    height: 40px;    padding: 30px 0;    font-size: 40px;    line-height: 40px;    text-align: center;    float: left;}/*不同数字的样式title0-2048*/#div2048 div.tile0{    background: #ccc0b2;}#div2048 div.tile2{    color: #7c736a;    background: #eee4da;}#div2048 div.tile4{    color: #7c736a;    background: #ece0c8;}#div2048 div.tile8{    color: #fff7eb;    background: #f2b179;}#div2048 div.tile16{    color:#fff7eb;    background:#f59563;}#div2048 div.tile32{    color:#fff7eb;    background:#f57c5f;}#div2048 div.tile64{    color:#fff7eb;    background:#f65d3b;}#div2048 div.tile128{    color:#fff7eb;    background:#edce71;}#div2048 div.tile256{    color:#fff7eb;    background:#edcc61;}#div2048 div.tile512{    color:#fff7eb;    background:#ecc850;}#div2048 div.tile1024{    color:#fff7eb;    background:#edc53f;}#div2048 div.tile2048{    color:#fff7eb;    background:#eec22e;}

3.2048.js

function Game2048(container){    this.container = container;    this.tiles = new Array(16);}//prototype原型的方式 向对象添加属性和方法//此处是向对象添加方法Game2048.prototype = {    //初始化    init: function(){        for(var i = 0, len = this.tiles.length; i < len; i++){            var tile = this.newTile(0);            tile.setAttribute('index', i);            this.container.appendChild(tile);            this.tiles[i] = tile;        }        this.randomTile();        this.randomTile();    },    //动态创建DIV并传值    newTile: function(val){        var tile = document.createElement('div');        this.setTileVal(tile, val);        return tile;    },    //设置值，控制css样式、值的获取并输出    setTileVal: function(tile, val){        //prevTile currTile判断行列的位置        tile.className = 'tile tile' + val;        tile.setAttribute('val', val);        tile.innerHTML = val > 0 ? val : '';    },    //设置随机数的添加和概率    randomTile: function(){        var zeroTiles = [];        for(var i = 0, len = this.tiles.length; i < len; i++){            if(this.tiles[i].getAttribute('val') == 0){                zeroTiles.push(this.tiles[i]);            }        }        //控制 数字出现的位置        var rTile = zeroTiles[Math.floor(Math.random() * zeroTiles.length)];        //控制 2 4 出现的概率        this.setTileVal(rTile, Math.random() < 0.8 ? 2 : 4);    },    //通过控上右下左移动    move:function(direction){        var j;        switch(direction){            //上            case 'W':                //this.tiles.length=4*4                //4-16循环12次                //console.log(len);                for(var i = 4, len = this.tiles.length; i < len; i++){                    j = i;                    while(j >= 4){                        this.merge(this.tiles[j - 4], this.tiles[j]);                        //[0 4] [1 5] [2 6] [3 7]                        //[4 8]                        j -= 4;                    }                }                break;            //下            case 'S':                for(var i = 11; i >= 0; i--){                    j = i;                    while(j <= 11){                        this.merge(this.tiles[j + 4], this.tiles[j]);                        j += 4;                    }                }                break;            //左            case 'A':                for(var i = 1, len = this.tiles.length; i < len; i++){                    j = i;                    //排除4 8 12 16                    while(j % 4 != 0){                        this.merge(this.tiles[j - 1], this.tiles[j]);                        j -= 1;                    }                }                break;            //右            case 'D':                for(var i = 14; i >= 0; i--){                    j = i;                    //排除1 5 9 13                    while(j % 4 != 3){                        this.merge(this.tiles[j + 1], this.tiles[j]);                        j += 1;                    }                }                break;        }        this.randomTile();    },    //合并    merge: function(prevTile, currTile){        //getAttribute() 方法返回指定属性名的属性值。        //prevVal存储len0-11的值        //currVal存储len4-15的值        var prevVal = prevTile.getAttribute('val');//w 0-11上一个值（初始初始值）        var currVal = currTile.getAttribute('val');//w 4-15添加值（新增的值）        if(currVal != 0){            //如果传进的值为0则执行为0合并            if(prevVal == 0){                this.setTileVal(prevTile, currVal);//初始值为currVal                this.setTileVal(currTile, 0);//清空原来的值currVal            }            //如果传进的值为相同则执行相加合并            else if(prevVal == currVal){                this.setTileVal(prevTile, prevVal * 2);//初始值*2                this.setTileVal(currTile, 0);//清空原来的值currVal            }        }    },    //平等当行列值数量相同返回false    equal: function(tile1, tile2){        return tile1.getAttribute('val') == tile2.getAttribute('val');    },    //设定通关的条件    max: function(){        for(var i = 0, len = this.tiles.length; i < len; i++){            if(this.tiles[i].getAttribute('val') == 2048){                return true;            }        }    },    //结束条件    over: function(){        for(var i = 0, len = this.tiles.length; i < len; i++){            //判断数组的值是否有为0的            if(this.tiles[i].getAttribute('val') == 0){                return false;            }            //3 7 11 15            //判断前一个值与相邻后一个值是否相同            if(i % 4 != 3){                if(this.equal(this.tiles[i], this.tiles[i + 1])){                    return false;                }            }            //判断上一个值与相邻下一个值是否相同            if(i < 12){                if(this.equal(this.tiles[i], this.tiles[i + 4])){                    return false;                }            }        }        return true;    },    //重置游戏    clean: function(){        for(var i = 0, len = this.tiles.length; i < len; i++){            this.container.removeChild(this.tiles[i]);        }        this.tiles = new Array(16);    }};var game, startBtn;window.onload = function(){    var container = document.getElementById('div2048');    startBtn = document.getElementById('start');    startBtn.onclick = function(){        this.style.display = 'none';        game = game || new Game2048(container);        game.init();    }};//键盘事件控制window.onkeydown = function(e){    var keynum, keychar;    //兼容浏览器    //浏览器差异：Internet Explorer 使用 event.keyCode 取回被按下的字符，    //而 Netscape/Firefox/Opera 使用 event.which。    if(window.event){       // IE        keynum = e.keyCode;    }    else if(e.which){       // Netscape/Firefox/Opera        keynum = e.which;    }    //fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。    keychar = String.fromCharCode(keynum);    //indexOf(keychar) > -1 具有在输入非数字字符不回显的效果，即对非数字字符的输入不作反应    if(['W', 'S', 'A', 'D'].indexOf(keychar) > -1){        if(game.over()){            //清空            game.clean();            startBtn.style.display = 'block';            //提示重新开始            startBtn.innerHTML = 'game over, replay?';            return;        }        //键盘控制移动        game.move(keychar);    }};

阅读全文

0 0