JS——利用面向对象的思想实现2048

最新推荐文章于 2022-07-01 11:13:37 发布
最新推荐文章于 2022-07-01 11:13:37 发布
阅读量211 收藏
点赞数
文章标签： javascript 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fancy_vae/article/details/108435944
版权

html部分代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048</title>
    <link rel="stylesheet" href="css/2048.css">
</head>

<body>
    <header>
        <div class="container">
            <h1><span>2</span><span>0</span><span>4</span><span>8</span></h1>
            <p class="inspired">2048</p>
        </div>
    </header>
    <div class="container">
        <div class="directions">
            <p><strong>如何玩：</strong> 使用你的箭头键移动瓷砖。两个瓷砖相互滑动时，它们合并成一个！</p>
        </div>
        <div class="scores">
            <div class="score-container">
                分数:
                <div class="score">
                    <div id="score">0</div>
                    <div class="add" id="add"></div>
                </div>
            </div>
        </div>
        <div class="game">
            <div class="main_box">
                <div class="min_box" id="number00"></div>
                <div class="min_box" id="number01"></div>
                <div class="min_box" id="number02"></div>
                <div class="min_box" id="number03"></div>
                <div class="min_box" id="number10"></div>
                <div class="min_box" id="number11"></div>
                <div class="min_box" id="number12"></div>
                <div class="min_box" id="number13"></div>
                <div class="min_box" id="number20"></div>
                <div class="min_box" id="number21"></div>
                <div class="min_box" id="number22"></div>
                <div class="min_box" id="number23"></div>
                <div class="min_box" id="number30"></div>
                <div class="min_box" id="number31"></div>
                <div class="min_box" id="number32"></div>
                <div class="min_box" id="number33"></div>
            </div>
            <div class="end" id="end">游戏结束
                <div class="monkey"></div>
                <button class="btn not-recommended__item js-restart-btn" id="try-again">再来一次</button>
            </div>
        </div>
        <div class="not-recommended">
            <button class="btn not-recommended__item js-restart-btn" id="restart">重新开始游戏</button>
        </div>
        <script src="js/2048.js"></script>
</body>

</html>

css部分

* {
    margin: 0px;
    padding: 0px;
}

.case {
    width: 450px;
    height: 600px;
    margin: 20px auto;
    position: relative;
}

.above_box {
    width: 450px;
    height: 150px;
    margin: 0px auto;
}

.logo {
    width: 350px;
    height: 150px;
    float: left;
}

.logo_num {
    color: #766f67;
    font-size: 60px;
    font-family: '微软雅黑';
    font-weight: bold;
}

.logo_font {
    color: #9B988F;
    float: left;
    font-size: 16px;
}

.above_box button {
    width: 100px;
    height: 50px;
    color: white;
    font-size: 15px;
    background-color: #8b7c65;
    border: none;
    margin-top: 10px;
    float: right;
}

.countScore {
    width: 100px;
    height: 70px;
    background-color: #8b7c65;
    color: white;
    float: right;
    margin-top: 10px;
}

.countScore p {
    line-height: 30px;
    text-align: center;
}

.countScore span {
    display: block;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.main_box {
    width: 450px;
    height: 450px;
    margin: 0px auto;
    background-color: #bbada0;
    border-radius: 10px;
}

.main_box2 {
    width: 450px;
    height: 450px;
    margin: 0px auto;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    font-size: 50px;
    color: white;
    text-align: center;
    line-height: 450px;
}

.main_box2 button {
    width: 101px;
    height: 50px;
    color: white;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    position: absolute;
    top: 260px;
    left: 165px;
}

.game {
    z-index: 1;
}

.min_box {
    width: 100px;
    height: 100px;
    background-color: #ccc0b2;
    float: left;
    margin: 10px 0 0 10px;
    border-radius: 5px;
    font-size: 35px;
    line-height: 100px;
    text-align: center;
    color: #796f65;
}

.n2 {
    background-color: #aae3da
}

.n4 {
    background-color: #ede0c8
}

.n8 {
    background-color: #f2b179
}

.n16 {
    background-color: #f59563
}

.n32 {
    background-color: #f67c5f
}

.n64 {
    background-color: #f65e3b
}

.n128 {
    background-color: #edcf72
}

.n256 {
    background-color: #edcc61
}

.n512 {
    background-color: #9c0
}

.n1024 {
    background-color: #33b5e5
}

.n2048 {
    background-color: #09c9c0
}

.n4096 {
    background-color: #a6c
}

.n8192 {
    background-color: #93c
}

.n2,
.n4 {
    color: #776e65
}

.n1024,
.n2048,
.n4096,
.n8192 {
    font-size: 40px
}

.btn {
    font-family: inherit;
    font-size: 1rem;
    border: none;
    background: #1B9AAA;
    letter-spacing: 1px;
    color: white;
    font-weight: 300;
    padding: 0.9em 1.5em;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn:hover {
    background-color: #14727e;
}

.btn:active {
    background-color: #0d4a52;
}

.btn:focus {
    box-shadow: 0 0 10px #0d4a52 inset;
    outline: none;
}

.not-recommended {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 3rem;
}

body,
html {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: "Arvo", Helvetica, sans-serif;
    font-family: 12px;
    color: #555;
    background: #F8FFE5;
}

strong {
    font-weight: bold;
}

p {
    line-height: 1.6;
}

.inspired {
    height: 20px;
    font-size: 0.9rem;
    color: #9a9a95;
}

header {
    height: 120px;
    color: #F8FFE5;
    text-align: center;
}

header span {
    display: inline-block;
    box-sizing: border-box;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    margin: 0 0.4rem;
    background: #FFC43D;
}

header span:nth-of-type(2) {
    background: #EF476F;
}

header span:nth-of-type(3) {
    background: #1B9AAA;
}

header span:nth-of-type(4) {
    background: #06D6A0;
}

h1 {
    font-size: 2.2rem;
}

.directions {
    padding: 1rem;
    border-top: 1px solid #9a9a95;
    border-bottom: 1px solid #9a9a95;
}

.container {
    margin: 0 auto;
    padding-bottom: 3.5rem;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    max-width: 550px;
    text-align: center;
}

header .container {
    padding: 0;
    padding: 2rem 4rem;
    max-width: 900px;
}

.scores {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.score-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 1.8rem;
    font-size: 1.2rem;
    line-height: 1;
    color: #555;
}

.score-container.best-score {
    color: #9a9a95;
}

.score {
    margin-left: 1rem;
    position: relative;
    font-weight: bold;
    font-size: 1.5rem;
    vertical-align: middle;
    text-align: right;
}

.game {
    position: relative;
    margin: 0 auto;
    background: #9a9a95;
    padding: 7px;
    display: inline-block;
    border-radius: 3px;
    box-sizing: border-box;
}

.tile-container {
    border-radius: 6px;
    position: relative;
    width: 400px;
    height: 400px;
}

.game {
    position: relative;
    margin: 0 auto;
    background: #9a9a95;
    padding: 7px;
    display: inline-block;
    border-radius: 3px;
    box-sizing: border-box;
}

.tile-container {
    border-radius: 6px;
    position: relative;
    width: 400px;
    height: 400px;
}

.tile,
.background {
    display: block;
    color: #F8FFE5;
    position: absolute;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    text-align: center;
}

.background {
    z-index: 1;
    text-align: center;
    border: 7px solid #9a9a95;
    background-color: #F8FFE5;
}

.tile {
    opacity: 0;
    z-index: 2;
    background: #FFC43D;
    color: #F8FFE5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.8rem;
    align-items: center;
    -webkit-transition: 110ms ease-in-out;
    transition: 110ms ease-in-out;
    border-radius: 3px;
    border: 7px solid #9a9a95;
    box-sizing: border-box;
}

.end {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(85, 85, 85, 0.4);
    color: white;
    font-size: 2rem;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.end .btn {
    margin-top: 1rem;
}

.end.active {
    opacity: 1;
    z-index: 1000;
}

JS部分

var game = {
    // 定义二维数组
    data: [],
    // 定义行数
    RN: 4,
    // 定义列数
    CN: 4,
    //记录分数
    score: 0,
    // 游戏结束
    gameover: 0,

    // 游戏开始
    start() {
        // 初始化数组
        this.data = [
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ];
        this.score = 0;
        var that = this;
        // 生成开始的二个随机位置的随机2或4
        this.randomNum();
        this.randomNum();
        // 渲染函数
        this.updataeView();
        // 定义4个键盘事件    
        document.onkeydown = function(e) {
            switch (e.keyCode) {
                case 37: //左移
                    that.moveLeft();
                    break;
                case 38: // 上移
                    that.moveUp();
                    break;
                case 39: // 右移
                    that.moveRight();
                    break;
                case 40: // 下移
                    that.moveDown();
                    break;
            }
        };
    },

    // 定义随机函数
    randomNum() {
        var r, c;
        // 判断数组中但前位置是否为空
        while (true) {
            r = parseInt(Math.random() * this.RN);
            c = parseInt(Math.random() * this.CN);
            if (this.data[r][c] == 0) {
                this.data[r][c] = Math.random() < 0.6 ? 2 : 4;
                break;
            } else if (this.isFull()) {
                break;
            }
        }
    },

    // 定义渲染函数
    updataeView() {
        for (var r = 0; r < this.RN; r++) {
            for (var c = 0; c < this.CN; c++) {
                if (this.data[r][c]) {
                    // 不为0 将值赋给div
                    document.getElementById("number" + r + c).innerHTML = this.data[r][c];
                    // 上色
                    document.getElementById("number" + r + c).className = "min_box n" + this.data[r][c];
                } else {
                    document.getElementById("number" + r + c).innerHTML = "";
                    document.getElementById("number" + r + c).className = "min_box n";
                }
            }
        }
        //更新分数
        document.getElementById("score").innerHTML = this.score;
    },

    // 左移前拍照
    moveLeft() {
        for (var r = 0; r < this.RN; r++) { //遍历data中的每一列
            this.moveLeftdown(r); //上移当前行
        }
        // 先判断是否是满格 
        //      不是满格 生成随机数
        // 是满格 判断游戏是否结束
        if (!this.isFull()) {
            this.randomNum();
            this.updataeView();
        } else if (this.gameOver()) {
            this.start = this.gameOver;
        }
    },
    // 左移事件
    moveLeftdown(r) {
        //c从0开始，遍历当前列中的元素，到<CN-1结束，每次+1
        for (var c = 0; c < this.CN; c++) {
            //找到r之后下一个不为0的值的位置，存在nextc中
            var nextc = this.moveLeftinrow(r, c);
            //找到c之后下一个不为0的值的位置，存在nextc中
            if (nextc == -1) {
                break; //如果nextr等于-1，退出循环
            } else {
                if (this.data[r][c] == 0) { //如果当前位置等于0
                    this.data[r][c] = this.data[r][nextc]; //将当前位置设为下一个位置的值
                    this.data[r][nextc] = 0; //将下一位置设为0
                    c--; //保证下次依然检查当前元素
                } else if (this.data[r][c] == this.data[r][nextc]) {
                    this.data[r][c] *= 2; //当前位置 = 当前位置值*2
                    this.data[r][nextc] = 0; // 将下一位置设为0
                    this.score += this.data[r][c]; // 增加分数
                }
            }
        }
    },
    // 找r行c列位置之后，不为0的下一个位置
    moveLeftinrow(r, c) {
        for (var i = c + 1; i < this.CN; i++) { //i+1开始，遍历r行剩余元素
            if (this.data[r][i] != 0) { //如果i不等于0
                return i;
            }
        }
        return -1; //循环结束，返回-1
    },

    // 上移前拍照
    moveUp() {
        // 判断是否移动
        for (var c = 0; c < this.CN; c++) { //遍历data中的每一列
            this.moveUpdown(c); //右移当前行
        }
        // 先判断是否是满格 
        //      不是满格 生成随机数
        // 是满格 判断游戏是否结束
        if (!this.isFull()) {
            this.randomNum();
            this.updataeView();
        } else if (this.gameOver()) {
            this.start = this.gameOver;
        }
    },
    //上移事件
    moveUpdown(c) {
        //r从0开始，遍历当前列中的元素，到<RN-1结束，每次+1
        for (var r = 0; r < this.RN - 1; r++) {
            //找到c之后下一个不为0的值的位置，存在next中
            var nextr = this.moveUpinrow(r, c);
            if (nextr == -1) {
                break; //如果nextr等于-1，退出循环
            } else {
                if (this.data[r][c] == 0) { //如果当前位置等于0
                    this.data[r][c] = this.data[nextr][c]; //将当前位置设为下一个位置的值
                    this.data[nextr][c] = 0; //将下一位置设为0
                    r--; //保证下次依然检查当前元素
                } else if (this.data[r][c] == this.data[nextr][c]) { //否则，如果当前位置等于下一位置
                    this.data[r][c] *= 2; //当前位置 = 当前位置值*2
                    this.score += this.data[r][c]; //增加分数
                    this.data[nextr][c] = 0; //将下一位置设为0
                }
            }
        }
    },
    //找r行c列位置之后，不为0的下一个位置
    moveUpinrow(r, c) {
        for (var i = r + 1; i < this.RN; i++) { //i+1开始，遍历c列剩余元素
            if (this.data[i][c] != 0) { //如果i不等于0
                return i;
            }
        }
        return -1; //循环结束，返回-1
    },

    //右移前拍照
    moveRight() {
        for (var r = 0; r < this.RN; r++) { //遍历data中的每一行
            this.moveRightdown(r); //右移当前行
        }
        // 先判断是否是满格 
        //      不是满格 生成随机数
        // 是满格 判断游戏是否结束
        if (!this.isFull()) {
            this.randomNum();
            this.updataeView();
        } else if (this.gameOver()) {
            this.start = this.gameOver;
        }
    },
    //右移事件
    moveRightdown(r) {
        //c从CN-1开始，到>0结束，每次-1
        for (var c = this.CN - 1; c > 0; c--) {
            //找到c之后下一个不为0的值的位置，存在nextc中
            var nextc = this.moveRightinrow(r, c);
            if (nextc == -1) {
                break; //如果nextc等于-1，退出循环
            } else {
                if (this.data[r][c] == 0) { //如果当前位置等于0
                    this.data[r][c] = this.data[r][nextc]; //将当前位置设为下一个位置的值
                    this.data[r][nextc] = 0; //将下一位置设为0
                    c++; //保证下次依然检查当前元素
                } else if (this.data[r][c] == this.data[r][nextc]) { //否则，如果当前位置等于下一位置
                    this.data[r][c] *= 2; //当前位置 = 当前位置值*2
                    this.score += this.data[r][c]; //增加分数
                    this.data[r][nextc] = 0; //将下一位置设为0
                }
            }
        }
    },
    //找r行c列位置之后，不为0的下一个位置
    moveRightinrow(r, c) {
        for (var i = c - 1; i >= 0; i--) { //i从c+1开始，遍历r行剩余元素
            if (this.data[r][i] != 0) { //如果i不等于0
                return i;
            }
        }
        return -1; //循环结束，返回-1
    },

    // 下移前拍照
    moveDown() {
        for (var c = 0; c < this.CN; c++) { //遍历data中的每一列
            this.moveDowndown(c); //下移当前行
        }
        // 先判断是否是满格 
        //      不是满格 生成随机数
        // 是满格 判断游戏是否结束
        if (!this.isFull()) {
            this.randomNum();
            this.updataeView();
        } else if (this.gameOver()) {
            this.start = this.gameOver;
        }
    },
    //下移事件
    moveDowndown(c) {
        //r从RN-1开始，遍历当前列中的元素，到>0结束，每次-1
        for (var r = this.RN - 1; r > 0; r--) {
            //找到c之后下一个不为0的值的位置，存在nextr中
            var nextr = this.moveDowninrow(r, c);
            if (nextr == -1) {
                break; //如果nextr等于-1，退出循环
            } else { //否则
                if (this.data[r][c] == 0) { //如果当前位置等于0
                    this.data[r][c] = this.data[nextr][c]; //将当前位置设为下一个位置的值
                    this.data[nextr][c] = 0; //将下一位置设为0
                    r++; //保证下次依然检查当前元素
                } else if (this.data[r][c] == this.data[nextr][c]) { //否则，如果当前位置等于下一位置
                    this.data[r][c] *= 2; //当前位置 = 当前位置值*2
                    this.score += this.data[r][c]; //增加分数
                    this.data[nextr][c] = 0; //将下一位置设为0
                }
            }
        }
    },
    //找r行c列位置之后，不为0的下一个位置
    moveDowninrow(r, c) {
        for (var i = r - 1; i >= 0; i--) { //i从r-1开始，遍历c列剩余元素
            if (this.data[i][c] != 0) { //如果i不等于0
                return i;
            }
        }
        return -1; //循环结束，返回-1
    },
    //判断游戏状态为结束
    gameOver() {
        //如果没有满,则返回false
        if (!this.isFull()) {
            return false;
        } else {
            //从左上角第一个元素开始，遍历二维数组
            for (var r = 0; r < this.RN; r++) {
                for (var c = 0; c < this.CN; c++) {
                    //如果当前元素不是最右侧元素
                    if (c < this.CN - 1) {
                        // 如果当前元素==右侧元素
                        if (this.data[r][c] == this.data[r][c + 1]) {
                            return false;
                        }
                    }
                    //如果当前元素不是最下方元素
                    if (r < this.RN - 1) {
                        // 如果当前元素==下方元素
                        if (this.data[r][c] == this.data[r + 1][c]) {
                            return false;
                        }
                    }
                }
            }
            return this.gameoverupdate();
        }
    },
    //判断是否满格
    isFull() {
        for (var r = 0; r < this.RN; r++) {
            for (var c = 0; c < this.CN; c++) {
                if (this.data[r][c] == 0) { //如果当前元素等于0
                    return false; //返回false
                }
            }
        }
        return true; //遍历结束，返回true
    },
    gameoverupdate() {
        var end = document.getElementById("end");
        end.classList.add("active")
    },

}

game.start();

var btn = document.getElementsByClassName("btn")[0];
var btn2 = document.getElementsByClassName("btn")[1];
btn.onclick = function() {
    game.start();
    end.classList.remove("active");
    game.score = 0;
}
btn2.onclick = function() {
    game.start();
    game.score = 0;
}
Fancy_夏沫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2048小游戏编写思路
conniesarah的博客
06-22 8737
有点难 关键知识点 下面请各位读者先学习一下该游戏中涉及到的几个关键知识点，有了这些必备条件，我们才好讲解 2048 游戏的设计思路。 1) 改变文本颜色 2048 游戏设置的格子边框颜色为湖蓝色，其中的数字颜色设有淡绿色、绿色等，所有的这些设置都涉及到如何改变文本的输出颜色，请大家猛击《彩色版的C语言，让文字更漂亮》了解详情。 2) 键盘监听 在2048 游戏中，玩家可通过 W\A\S\D 或者方向键来控制数字的移动方向，具体实现方法请大家猛击《C语言非阻塞式键盘监听》了解详情。 3) 获取随机数 204
用javascript制作2048游戏的思路（原创若 转载请附上本链接）
anruanba4181的博客
11-28 177
一、项目已上传至github，地址：https://github.com/forjuan/2048game 二、学习了javascript基础后，想要捣鼓点东西做，做了一个自己以前很爱玩的2048游戏。经过初期的思路设计手工画了设计思路图。手工图有空在用图画出来。 实现2048的功能：1、核心：上下左右移动。 2、...
【总结篇】js编写的2048小游戏开发（下：算法实现）
SuperZZQ_的博客
12-21 2163
在上一篇展现了js编写2048小游戏的思路以及编程框架搭建，本篇将基于上篇的结构来讲解游戏关键操作方法的具体算法实现。适合已经阅读完上一篇文章https://blog.csdn.net/SuperZZQ_/article/details/82662732，这篇的文章在编辑过程中侧重于讲解如何将我们熟悉的、可见的操作通过对产生条件、触发效果、细分步骤方面进行解构，转化成编程思维，并利用前端语言写成代...
小游戏2048设计思路超简单
lhh2333的博客
07-01 3864
2048作为一个经典的小游戏，对于C语言的逻辑练习是一个比较好的案例了，看似很复杂，但是如果掌握了设计思路，那么就不会觉得难了，而且会了这个之后对今后编程的也会有很大的帮助。
java基础面试题-易错,模糊,不熟悉.（附详细解析）
那就这样吧
08-06 947
1.下面两个代码块能正常编译和执行吗? //代码块1 short s1 = 1; s1 = s1 + 1; //代码块2 short s1 = 1; s1 += 1; 答:代码块1编译报错,错误原因是:不兼容的类型:从int转换到short可能会有损失… 代码块2正常编译和执行. 其实,s1 += 1相当于s1 = (short)(s1+1). 2.基础考察,指出下题的输出结果 Integer a = 128, b = 128, c = 127, d = 127; System.out.println(a
js面向对象之实现淘宝放大镜
01-19
JS面向对象——淘宝放大镜实现 图片的引用是一个大图，一个小图 传输用的ajax，记得改成自己的ip地址，js和html都改一下 效果： 实现： js文件： LoadMethod.js class LoadMethod{ static get LOAD_IMG_FINISH(){...
JS基于面向对象实现的选项卡效果示例
10-20
主要介绍了JS基于面向对象实现的选项卡效果,结合实例形式分析了javascript基于面向对象技术动态操作页面元素的流程与相关注意事项,需要的朋友可以参考下
javascript 面向对象实战思想分享
10-19
万物皆对象，所以，任何事物都是有特征(属性)和动作(方法)的，一般拿到一份需求分档，或者你浏览一个网页看到一个画面的时候，脑子里就要有提炼出来的属性和方法的能力，那你才是合格的
JS基于面向对象实现的放烟花效果
10-24
主要介绍了JS基于面向对象实现的放烟花效果,涉及javascript面向对象技术的使用技巧,需要的朋友可以参考下
JS面向对象编程实现的拖拽功能案例详解
10-15
主要介绍了JS面向对象编程实现的拖拽功能,结合具体案例形式详细对比分析了JS面向过程与面向对象实现的拖拽功能相关操作技巧,需要的朋友可以参考下
vs2010 面向对象 c++版 2048小游戏 控制台
06-16
算法复杂可优化
2048游戏 Java面向对象课程设计
06-21
2048游戏Java版，课程设计，界面美观，包含项目文件和报告文档，即下即用
用面向对象（mvc）的原生JavaScript实现2048（附源码）
qq_41509696的博客
07-19 209
总体思路如下： 第一步，从各个方面分析游戏实现思路 打开手机应用商店，搜索2048游戏并下载 查看游戏面板在手机上的布局（包括大小，配色，字体等） 了解游戏规则以及计分规则 在大脑想一下实现顺序，及设计思路 第二步，在明确设计思路以后，把静态的游戏面板画出来 整个区域主要有3层，第一层为最底层的底板区域，第二层为（本文及以下内容均用4代替，4*4=16）自定义游戏大小个方块格子，第三层为方块格子上的数字 初始化游戏数据，创建一个4*4的全空数组 在随机两个无数字位置生成初始数据2 为三层区域添加样式
2048游戏（面向对象版）
weixin_40809507的博客
03-19 4361
文章目录主要思想GameCoreController.pymodel.pyusl.pymain.py 主要思想 1、将2048核心算法定义到核心类中GameCoreController，作为实例成员 2、产生新数字 –随机2（90%）或者4（10%） 3、判定游戏是否结束 –如果有空位置，游戏不能结束 –如果横向可以移动，游戏不能结束 –纵向 –以上条件不满足，游戏结束 4、创建控制台游戏视图GameConsoleView –游戏开始时，产生2个新数字，绘制界面 –游戏逻辑，获取玩家输入wsad移动地图，产
【总结篇】js编写的2048小游戏开发（上：思路）
SuperZZQ_的博客
09-13 7122
2048是大家都熟悉的一款魔性小游戏，其操作简单，却极其有效地杀时间。本篇将详细讲解如何构建这款小游戏的开发思路、如何根据玩法进一步分析设计编程结构，适合有一定html、css、js、jquery语言基础的读者阅读。   一.游戏试玩       游戏玩法大家都很熟悉，每次可以选择上下左右中的一个方向滑动一次，所有数字方块都会向滑动的方向靠拢，每次滑动后空白的地方随机出现一个数字方块2或...
python-2048游戏面向对象编程
JanLEE
07-01 226
""" 游戏入口 """ from usl import GameView if __name__ == '__main__': view = GameView() view.main() """ 业务逻辑层 """ class GameController: """ 游戏控制器:负责游戏逻辑 """ def __init__(self): self.__list_merge = None sel
JavaScript前端 制作2048游戏
weixin_44593658的博客
11-20 963
2048是非常经典的数字游戏 今天给大家带来JavaScript版本 下面直接上代码重点位置在单独拿出来说 ， 一共分为三部分 HTML部分 <div class = 'contain'> <div class = 'hearder'> <h1 class = 'title'> <a href="#">2048</a>...
Web版2048游戏制作
LCore的专栏
11-07 7038
写在前面         工作之余参与了《慕课网2048游戏制作》的学习视频,视频断断续续看完了,游戏也制作成功了。因为其他的事情也没来的及总结,一拖时间也就过去了,整理磁盘的时候发现了2048源码,思考一下还是将之push到github上了(后面贴出),也顺便写篇总结,回顾一下,同时也谢谢liuyubobobo老师的授课。      不过源码在手,不运行下玩玩,怎么说的过去呢,哈哈!下面是游
JS实现2048小游戏
呀呀呀
11-10 530
js实现2048小游戏 开始时的页面 当游戏结束时会显示得分情况并可以再试一次 HTML部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2048小游戏</title> <link rel="stylesheet" href="st...
javascript怎么实现面向对象
最新发布
05-31
JavaScript 是一种基于原型的语言，它使用原型链来实现面向对象编程。以下是实现 JavaScript 面向对象编程的步骤： 1. 创建一个构造函数 使用 `function` 关键字创建一个构造函数，构造函数的名称通常以大写字母...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值