网页版<2048>游戏

来源：互联网发布：godaddy域名绑定ip 编辑：程序博客网时间：2024/04/29 08:53

网页版<2048>游戏,对2048游戏感兴趣。于是花了一天的功夫,自己写出一个类似于<2048>的游戏。

↑(W)/↓(S)/←(A)/→(D)控制方向

上源代码:
html页面代码:game.html在根目录

<!DOCTYPE html><html><head><title>模拟的2048小游戏</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=UTF-8"><!-- 引用css文件 --><link rel="stylesheet" type="text/css" href="http://blog.163.com/qiuyg_yc_it/blog/css/styles.css"><!-- 引用jQuery文件 --><script type="text/javascript" src="http://blog.163.com/qiuyg_yc_it/blog/js/jquery-2.0.3.js"></script><!-- 引用js文件 --><script type="text/javascript" src="http://blog.163.com/qiuyg_yc_it/blog/js/new2048.js"></script></head><body><div class="div-round" id="tips">↑(W)/↓(S)/←(A)/→(D)控制方向</div><div id="game-panel">    <div class="div-round" id="box-main">        <div class="div-round box-lm" id="box0"></div>        <div class="div-round box-lm" id="box1"></div>        <div class="div-round box-lm" id="box2"></div>        <div class="div-round box-lm" id="box3"></div>        <div class="div-round box-lm" id="box4"></div>        <div class="div-round box-lm" id="box5"></div>        <div class="div-round box-lm" id="box6"></div>        <div class="div-round box-lm" id="box7"></div>        <div class="div-round box-lm" id="box8"></div>        <div class="div-round box-lm" id="box9"></div>        <div class="div-round box-lm" id="boxa"></div>        <div class="div-round box-lm" id="boxb"></div>        <div class="div-round box-lm" id="boxc"></div>        <div class="div-round box-lm" id="boxd"></div>        <div class="div-round box-lm" id="boxe"></div>        <div class="div-round box-lm" id="boxf"></div>    </div></div>    <!--  提示点击的方向 -->    <div id="keys"> </div>    <!-- 点击按钮重新开始  -->    <div style="width:200px;margin: 50px auto;">        <input type="button" value="开始" class="btn btn-primary" onclick="init();">        <input type="button" value="重新开始" class="btn btn-primary" onclick="if(window.confirm('您确定重新开始吗?')){init();}">    </div>    <div id="score">        总分数:00    </div>    <div id="max">        当前最大数:    </div>    <div id="time">        当前用时: 0s。    </div>    <!-- 提示快结束 -->    <div id="danger">    </div></body></html>

css代码,
styles.css(在css目录下)

.div-round {    display: inline-block;    margin-bottom: 0;    font-size: 14px;    font-weight: normal;    line-height: 1.428571429;    font-family: "黑体";    text-align: left;    white-space: nowrap;    vertical-align: middle;    background-image: none;    border: 1px solid transparent;    border-radius: 4px;    margin-bottom: 0;}#box-main {    width: 420px;    height: 420px;    padding: 5px;    border: 2px solid red;}#box0,#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8,#box9,#boxa,#boxb,#boxc,#boxd,#boxe,#boxf{    height: 68px;    width: 93px;    border: 1px solid red;    float: left;    margin: 5px;    padding-top: 25px;    font-size: 30px;    text-align: center;    background: pink;    font-size: 30px;}#game-panel,#score,#max {    width: 630px;    position: relative;    left: 550px;    top: 20px;}#keys,#tips,#time,#danger {    width: 200px;    margin: 20px auto;}#tips{    width:420px;    float:left;    padding:10px;    border:1px solid red;    background: pink;}#keys {    font-size: 84px;    color: #bbbbbb;}#danger {    color: #440044;}.btn {    display: inline-block;    padding: 6px 12px;    margin-bottom: 0;    font-size: 14px;    font-weight: normal;    line-height: 1.428571429;    text-align: center;    white-space: nowrap;    vertical-align: middle;    cursor: pointer;    background-image: none;    border: 1px solid transparent;    border-radius: 6px;}.btn:hover,.btn:focus {    color: #333333;    text-decoration: none;}.btn-primary {    color: #ffffff;    background-color: #428bca;    border-color: #357ebd;    z-index: 99;}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary    {    color: #ffffff;    background-color: #3276b1;    border-color: #285e8e;}.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary    {    background-image: none;}

js代码:

new2048.js(在js目录下)

var locations;var keys = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c",        "d", "e", "f" ];// 不同的数字对于不同的颜色,// colors是颜色的数组var colors = [ "#FFF", "PINK", "GRAY", "#ABCDEF", "#0FF0FF", "#FF0", "#CDF0AB",        "#FEDCBA", "#F0F", "#BBBBBB", "#00F", "#00FF00" ]; var score;// 总分数var max;// 最大数var time;// 计时var t;// // $(function() {// init();// }); // 初始化function init() {    t = setInterval(showtime, 1000);    score = 0;    max = 0;    time = 0;    locations = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];    locations[createLocation()] = createFixedNum();    locations[createLocation()] = createFixedNum();    paint();     // 按键控制方向    window.onkeydown = function(e) {        var keyCode;        if (!e)            e = window.event;        if (document.all) {            keyCode = e.keyCode;        } else {            keyCode = e.which;        }        // ← 或 A        if (keyCode == 37 || keyCode == 65) {            $("#keys").text("←");            toLeft();            isEnd();        }        // ↑ 或 W        if (keyCode == 38 || keyCode == 87) {            $("#keys").text("↑");            toUp();            isEnd();        }        // → 或 D        if (keyCode == 39 || keyCode == 68) {            $("#keys").text("→");            toRight();            isEnd();        }        // ↓ 或 S        if (keyCode == 40 || keyCode == 83) {            $("#keys").text("↓");            toDown();            isEnd();        }    };} function isEnd() {    var f = false;    // 判断是否结束    if (locations.indexOf(0) == -1) {// 如果数组中不包含0    // 判断相邻的数是否为相等    // alert("注意了哦~");        $("#danger").text("注意了哦~");        // if(isEndX()){        if (isEndX() && isEndY()) {            clearTimeout(t);            if (window.confirm("结束了!\n当前分数: " + score + ";\n用时: " + time                    + "S;\n最大数是: " + max + "。\n是否开始新的游戏?")) {                init();            } else {                window.close();            }        }    } else {        $("#danger").text("");    }    return f;} function isEndX() {    // 判断横向的数组    // 如果相邻位置的数不相同,就结束    var f = false;    var w = new Array();    for (var j = 0; j < 4; j++) {        for (var i = 0; i < 4; i++) {            w[i] = locations[4 * j + i];        }        // alert(w);        f = (w[0] != w[1] && w[1] != w[2] && w[2] != w[3]);// 如果为真,表示相邻的两个数不相等        if (!f) {            break;        }    }     return f;} function isEndY() {    // 判断纵向的数组    // 如果相邻位置的数不相同,就结束    var f = false;    var w = new Array();    for (var j = 0; j < 4; j++) {        for (var i = 0; i < 4; i++) {            w[i] = locations[4 * i + j];        }        // alert(w);        f = (w[0] != w[1] && w[1] != w[2] && w[2] != w[3]);// 如果为真,表示相邻的两个数不相等        if (!f) {            break;        }    }     return f;} function toDown() {    // 向下    for (var i = 0; i < 4; i++) {        // 判断每一行        var row = [ locations[i + 12], locations[i + 8], locations[i + 4],                locations[i] ];        configurationD(i, row);    }    locations[createLocation()] = createFixedNum();    paint();} function toRight() {    // 向右    for (var i = 0; i < 4; i++) {        // 判断每一行        var row = [ locations[i * 4 + 3], locations[i * 4 + 2],                locations[i * 4 + 1], locations[i * 4] ];        // alert(i+"\t"+row);        configurationR(i, row);    }    locations[createLocation()] = createFixedNum();    paint();} function toLeft() {    // 向左    for (var i = 0; i < 4; i++) {        // 判断每一行        var row = [ locations[i * 4], locations[i * 4 + 1],                locations[i * 4 + 2], locations[i * 4 + 3] ];        configurationL(i, row);    }    locations[createLocation()] = createFixedNum();    paint();} function toUp() {    // 向上    for (var i = 0; i < 4; i++) {        var row = [ locations[i + 0], locations[i + 4], locations[i + 8],                locations[i + 12] ];        configurationU(i, row);    }    locations[createLocation()] = createFixedNum();    paint();} function configurationD(i, r) {    makeArray(r);     for (var j = 0; j < 4; j++) {        locations[4 * (3 - j) + i] = r[j];    }} function configurationR(i, r) {    // 向右    makeArray(r);     for (var j = 0; j < 4; j++) {        locations[3 + 4 * i - j] = r[j];    }} function configurationU(i, r) {    makeArray(r);     for (var j = 0; j < 4; j++) {        locations[4 * j + i] = r[j];    }} function configurationL(i, r) {    makeArray(r);     for (var j = 0; j < 4; j++) {        locations[4 * i + j] = r[j];    }} function makeArray(r) {    if (!isZero(r)) {        // 把数组中是0往后移动        for (var m = 0; m < 4; m++) {            for (var n = 0; n < 3; n++) {                if (r[n] == 0) {                    r[n] = r[n + 1];                    r[n + 1] = 0;                }            }        }    }     for (var m = 0; m < 3; m++) {        if (r[m] == r[m + 1]) {            var k = m;            r[k] += r[k + 1];            score += r[k];            while (++k < 3) {                r[k] = r[k + 1];            }            r[3] = 0;        }    }     return r;} // 绘制点的位置function paint() {    for (var i = 0; i < 16; i++) {        $("#box" + keys[i]).text((locations[i] == 0) ? "" : locations[i]);        var index = (locations[i] == 0) ? 0                : (locations[i].toString(2).length - 1);        $("#box" + keys[i]).css("background", colors[index]);        // 选出最大数        if (locations[i] > max) {            max = locations[i];        }    }    $("#score").text("总分为 : " + score);    $("#max").text("当前最大数 : " + max);} // 随机生成两个数function createFixedNum() {    // 生成2/4;    // 生成2的概率是0.8    return Math.random() < 0.8 ? 2 : 4;}// 生成位置function createLocation() {    // 在空位置中随机生成    var num = Math.floor(Math.random() * 16);    // 如果该位置有值,就返回重新生成    while (locations[num] != 0) {        num = Math.floor(Math.random() * 16);    }    return num;} function isZero(m) {    return m[0] == 0 && m[1] == 0 && m[2] == 0 && m[3] == 0;} // 计时function showtime() {    $("#time").text("当前用时 :" + (++time) + " s。");}

以上代码,均属个人爱好,如有侵权,多多包含,还请速速告知!交流邮箱：qiuyg_yc@163.com

0 0