網頁版遊戲

網頁版<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" οnclick="init();">
        <input type="button" value="重新開始" class="btn btn-primary" οnclick="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。");
}

以上代碼,均屬個人愛好,如有侵權,多多包含,還請速速告知!交流郵箱：[email protected]

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

【2024-05-21】以茶會友

網頁版遊戲

javascript

mysql忘記密碼，怎麼辦？

javascript實現計時器

javascript 實現圖片預覽（未上傳到服務器端）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結