js实现动漫拼图1.0版

已于 2024-01-28 16:53:41 修改
阅读量1k 收藏 18
点赞数 9
分类专栏： 前端三件套 文章标签： javascript 开发语言 前端
于 2024-01-28 11:32:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58730471/article/details/135891948
版权

文章目录

1 实现效果视频

在这里插入图片描述

拼图1.0

2 功能实现思路

布局忽略（小白学前端，不献丑了）

左侧拼图格
左侧4*4的拼图小格子

利用表格实现，规划好td的大小，给每个格子加上背景图片（将完整的图片裁剪为16张，命名规则为数字.png（1-16），利用二维数组存放四行四列的值从1-16，在遍历数组时，给他动态加上背景图片即可）item就是二维数组存的值，动态拼接上；photo是文件夹的名字images_1(或2,3,4)实现动态切换拼图图片
在这里插入图片描述

  let print = [
            [1, 2, 3, 4],
            [5, 6, 7, 8],
            [9, 10, 11, 12],
            [13, 14, 15, 16]
        ]
function updateUI() {
            print.forEach((subArr, i) => {
                subArr.forEach((item, j) => {
                    tds[i * 4 + j].style.backgroundImage = "url(./images/" + photo + "/" + item +".png)";
                    if (isStart && i == x0 && j == y0) {
                        tds[i * 4 + j].style.border = "3px solid red";
                    } else {
                        tds[i * 4 + j].style.border = "";
                    }
                })
            })

更换拼图图片

先获取元素，给其绑定单击事件。产生随机[1-4]的索引值（我当前有image_x文件四个，命名从_1到_4所以我需要的索引是1-4），获取当前展示的拼图的_x,确保产生的随机值与上次不同，不同之后就动态拼接新的src，在调用上面实现的ui函数，实现切换背景。

changeBtn.onclick = function () {
            isStart = false;
            print = [
                [1, 2, 3, 4],
                [5, 6, 7, 8],
                [9, 10, 11, 12],
                [13, 14, 15, 16]
            ]
            step=0;
            let index = parseInt(Math.random() * 4) + 1;
            let photo_id = look.src.split('/')[look.src.split('/').length - 2].split('_')[1];
            while (index == photo_id) {
                index = parseInt(Math.random() * 4) + 1;
            }
            photo = 'images_' + index;
            look.src = "./images/" + photo + "/canzhaotu.png";
            updateUI();
        }

重置功能（开始游戏或者打乱拼图）
随机交换打乱顺序（1.0版）

随机索引，实现随机的交换，调用自实现ui函数动态拼接，达到背景的更换，实现打乱拼图效果。
获取对应元素，绑定点击事件，点击调用之后，完成相应的初始化，此时给求助按钮绑定点击事件，开始播放背景音乐。

let restBtn = document.getElementById('rest');
        restBtn.onclick = function () {
            step = 0;
            isStart = true;
            shuffle();
            updateUI();
            initEvent();
            helpBtn.onclick = helpBake;
            bgMusic.play();
        }
// 打乱图片
        function shuffle() {
            print.forEach((subArr, i) => {
                subArr.forEach((item, j) => {
                    let x = parseInt(Math.random() * 4);
                    let y = parseInt(Math.random() * 4);
                    let temp = print[i][j];
                    print[i][j] = print[x][y];
                    print[x][y] = temp;
                })
            })
        }

initEvent函数（给每一个td加点击事件）
1.0版本玩法不同，可以任意更换原始块（想要控制移动的块）

给每一个td也帮上点击事件，在点击时计算出对应的二维数组的i（行）和j（列）。tds是一维数组索引值从0-16，print二维数组，行索引0-3，列索引0-3。可以根据二维行列推出对应的移位tds中的索引位置，也可以反过来。
例如：
如果 是二维的第三行第三列（对应的行列索引是2,2），此时对应的td索引应该是10=2×4+2；index=i*(每一行的长度)+j；反过来就是i=向下取整[index/每行的长度]，j=[index%每行的长度]

// 选择初始化位置
        function initEvent() {
            tds.forEach((td, index) => {
                td.onclick = function () {
                    let x = parseInt(index / 4);
                    let y = parseInt(index % 4);
                    x0 = x;
                    y0 = y;
                    updateUI();
                }
            })
        }

给移动按钮加点击事件
当然，也加了键盘监听事件，监听上下左右键

 leftBtn.onclick = function () {
            if (isStart) {
                direction = 'left';
                move(direction);
            }
        }
        rightBtn.onclick = function () {
            if (isStart) {
                direction = 'right';
                move(direction);
            }
        }
        upBtn.onclick = function () {
            if (isStart) {
                direction = 'up';
                move(direction);
            }
        }
        downBtn.onclick = function () {
            if (isStart) {
                direction = 'down';
                move(direction);
            }
        }
         window.onkeyup = function (e) {
            if (isStart) {
                if (e.keyCode == 37) {
                    direction = 'left';
                    move(direction);
                } else if (e.keyCode == 38) {
                    direction = 'up';
                    move(direction);
                } else if (e.keyCode == 39) {
                    direction = 'right';
                    move(direction);
                } else if (e.keyCode == 40) {
                    direction = 'down';
                    move(direction);
                }
            }
        }

move函数

定义一个direction全局变量，记录方向，判断向那个方向移动，在边界位置时需要注意越界，下一步如果是越界的情况，就直接return，不进行交换了（也就是不移动），也不执行step++（此时不算步数）。step记录移动步数，而一直出现的x0，y0是为了记录原始块（正在操控移动的块，在updateUi中给其加个边框，与其他做区分）
在这里插入图片描述

 // 移动交换图片
        function move(direction) {
            let x, y;
            if (direction == 'left') {
                if (y0 - 1 < 0) {
                    console.log("左边到边界了");
                    return;
                } else {
                    x = x0;
                    y = y0 - 1;
                }
            } else if (direction == 'right') {
                if (y0 + 1 > 3) {
                    console.log("右边到边界了");
                    return;
                } else {
                    x = x0;
                    y = y0 + 1;
                }
            } else if (direction == 'up') {
                if (x0 - 1 < 0) {
                    console.log("上边到边界了");
                    return;
                } else {
                    x = x0 - 1;
                    y = y0;
                }
            } else if (direction == 'down') {
                if (x0 + 1 > 3) {
                    console.log("下边到边界了");
                    return;
                } else {
                    x = x0 + 1;
                    y = y0;
                }
            }
            step++;
            let temp = print[x][y];
            print[x][y] = print[x0][y0];
            print[x0][y0] = temp;
            // 更新坐标位置
            x0 = x;
            y0 = y;
            updateUI();
        }

判断输赢

同时定义一个victory二维数组，记录下正确顺序，当移动到最后print数组的元素重新排序正确时，就游戏结束了。

let print = [
            [1, 2, 3, 4],
            [5, 6, 7, 8],
            [9, 10, 11, 12],
            [13, 14, 15, 16]
        ]
let victory = [
            [1, 2, 3, 4],
            [5, 6, 7, 8],
            [9, 10, 11, 12],
            [13, 14, 15, 16]
        ];
// 判断是否胜利
        function judgeVictory() {
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    if (print[i][j] != victory[i][j]) {
                        return false;
                    }
                }
            }
            return true;
        }

重点(难点)

求助按钮（实现提示）

思路：首先我们知道二维数组正确的顺序是1-16按序的，在打乱之后（其实就是这些值被打乱了），我们要还原，【在这个版本里是可以任意更换原始块的（我们移动操作的块）】，所以应该遍历这个print二维数组。去挨个检查里面存放的值的顺序，第一个位置的值应该是1，不是1就是需要被还原，那么再去遍历找寻那个块上的值是1，找到之后，让其和第一个位置的块实现交换，但是不能直接交换，那样就是显得很突兀，直接翻山越海了，应该让其有依据的一步一步归位。那就是找到num，根据num在找到对应的块的i和j，将i，j分别赋值给x0和y0，调用ui实现找到应该归位的那个原始块。
在这里插入图片描述

这个时候就用到了print二维数组的行列，利用destX记录绿色块的行坐标（i），利用destY记录绿色块的列坐标（j），用x0和y0记录原始块（红色块）的行和列坐标 （规定先横向移动，在纵向移动，这样就不会影响前面已经正确归位的块【当前num值之前的块】）

比较红色块和绿色块的横坐标（若y0<destY）,说明红色块在绿色快的左边，那么应该右移；
比较红色块和绿色块的横坐标（若y0>destY）,说明红色块在绿色快的右边，那么应该左移；
当y0=destY时，说明二者在同一列上，此时开始上移或下移（同理）
比较红色块和绿色块的纵坐标（若x0<destX）,说明红色块在绿色快的上边，那么应该下移；
比较红色块和绿色块的纵坐标（若x0>destX）,说明红色块在绿色快的下边，那么应该上移；
最后，当x0=destX时，说明这个红色块已经移动到了正确位置（绿色块的地方）。
清楚定时器（用定时器实现的循环，for循环太快，体现不出归位的过程）
在这里插入图片描述

 // 求助按钮
        function helpBake() {
            let destX;
            let destY;
            let num;
            //遍历寻找那个块的位置不对，找到不对的那个，返回这个位置正确的值应该是那个num
            wc: for (let i = 0; i < print.length; i++) {
                for (let j = 0; j < print[i].length; j++) {
                    let index = i * 4 + j;
                    if (print[i][j] != index + 1) {
                        destX = i;
                        destY = j;
                        num = index + 1;
                        break wc;
                    }
                }
            }
            let bakeX;
            let bakeY;
            //遍历数组，去看当前那个块身上的值是num
            wc: for (let i = 0; i < print.length; i++) {
                for (let j = 0; j < print[i].length; j++) {
                    if (print[i][j] == num) {
                        bakeX = i;
                        bakeY = j;
                        break wc;
                    }
                }
            }
            x0 = bakeX;
            y0 = bakeY;
            updateUI();
            // 开启自动巡航
            // 先横向移动，在纵向移动（必须得这样，不然就是bug）
            helpBtn.onclick = 'none';
            let timeId = setInterval(() => {
                // 先比较y0和destY
                if (y0 < destY) {
                    direction = "right";
                    move(direction);
                } else if (y0 > destY) {
                    direction = "left";
                    move(direction);
                } else {
                    if (x0 > destX) {
                        direction = "up";
                        move(direction);
                    } else if (x0 < destX) {
                        direction = "down";
                        move(direction);
                    } else {
                        // 归位了
                        clearInterval(timeId);
                        if (isStart) {
                            helpBtn.onclick = helpBake;
                        }
                    }
                }
            }, 800)
        }

剩余的就是各种测试，找bug，改逻辑。

3代码实现

代码下载：https://www.alipan.com/s/WrkusEaP8Uq

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url('./images/background.png');
        }

        .first {
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        td {
            width: 100px;
            height: 100px;
            background-image: url('./images/1.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .second {
            width: 60%;
            margin: 0 auto;
            display: flex;
        }

        .second_right {
            margin-left: 200px;
        }

        .third {
            margin-top: 20px;
            text-align: center;
        }

        #step {
            font-size: 30px;
            color: red;
            display: inline-block;
            width: 80px;
            box-sizing: border-box;
            text-align: center;
        }

        .change {
            width: 100px;
            height: 40px;
            font-size: 20px;
            background-color: #da3c24;
            border-radius: 10px;
            color: #fedcdc;
        }

        #look {
            width: 200px;
            height: 200px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border: 4px solid white;
        }
    </style>
</head>

<body>
    <audio src="./audio/bg.mp3" id="bgMusic"></audio>
    <div class="first">
        <button class="change">更换图片</button>
        <img src="./images/title.png" alt="">
    </div>
    <div class="second">
        <div class="second_left">
            <table>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div class="second_right">
            <div style="margin-bottom: 40px;">
                <img src="" id="look">
            </div>
            <div style="margin-bottom: 30px; font-size: 25px; color:aliceblue">
                已经走了
                <span id="step">0</span>
                步
            </div>
            <div>
                <div style="text-align: center;">
                    <img src="./images/shang.png" id="up">
                </div>
                <div style="text-align: center;">
                    <img src="./images/zuo.png" id="left">
                    <img src="./images/xia.png" id="down">
                    <img src="./images/you.png" id="right">
                </div>
            </div>
        </div>
    </div>
    <div class="third">
        <img src="./images/chongzhi.png" id="rest">
        <img src="./images/qiuzhu.png" id="help">
        <div style="color: aliceblue;">点击重置按钮（开始游戏或者重新打乱顺序）</div>
    </div>
    <script>
        let print = [
            [1, 2, 3, 4],
            [5, 6, 7, 8],
            [9, 10, 11, 12],
            [13, 14, 15, 16]
        ]
        let victory = [
            [1, 2, 3, 4],
            [5, 6, 7, 8],
            [9, 10, 11, 12],
            [13, 14, 15, 16]
        ];
        let tds = document.querySelectorAll('td');
        let isStart = false;
        let x0 = 0;
        let y0 = 0;
        let direction = '';
        let step = 0;
        let photo = 'images_1';
        let leftBtn = document.getElementById('left');
        let rightBtn = document.getElementById('right');
        let upBtn = document.getElementById('up');
        let downBtn = document.getElementById('down');
        let stepSpan = document.getElementById('step');
        let helpBtn = document.getElementById('help');
        let changeBtn = document.querySelector('.change');
        let look = document.getElementById('look');
        look.src = './images/images_1/canzhaotu.png';
        let bgMusic = document.getElementById('bgMusic');
        window.onkeyup = function (e) {
            if (isStart) {
                if (e.keyCode == 37) {
                    direction = 'left';
                    move(direction);
                } else if (e.keyCode == 38) {
                    direction = 'up';
                    move(direction);
                } else if (e.keyCode == 39) {
                    direction = 'right';
                    move(direction);
                } else if (e.keyCode == 40) {
                    direction = 'down';
                    move(direction);
                }
            }
        }
        let restBtn = document.getElementById('rest');
        restBtn.onclick = function () {
            step = 0;
            isStart = true;
            shuffle();
            updateUI();
            initEvent();
            helpBtn.onclick = helpBake;
            bgMusic.play();
        }
        leftBtn.onclick = function () {
            if (isStart) {
                direction = 'left';
                move(direction);
            }
        }
        rightBtn.onclick = function () {
            if (isStart) {
                direction = 'right';
                move(direction);
            }
        }
        upBtn.onclick = function () {
            if (isStart) {
                direction = 'up';
                move(direction);
            }
        }
        downBtn.onclick = function () {
            if (isStart) {
                direction = 'down';
                move(direction);
            }
        }

        changeBtn.onclick = function () {
            isStart = false;
            print = [
                [1, 2, 3, 4],
                [5, 6, 7, 8],
                [9, 10, 11, 12],
                [13, 14, 15, 16]
            ]
            step=0;
            let index = parseInt(Math.random() * 4) + 1;
            let photo_id = look.src.split('/')[look.src.split('/').length - 2].split('_')[1];
            while (index == photo_id) {
                index = parseInt(Math.random() * 4) + 1;
            }
            photo = 'images_' + index;
            look.src = "./images/" + photo + "/canzhaotu.png";
            updateUI();
        }
        updateUI();
        // 更新UI
        function updateUI() {
            print.forEach((subArr, i) => {
                subArr.forEach((item, j) => {
                    tds[i * 4 + j].style.backgroundImage = "url(./images/" + photo + "/" + item +
                        ".png)";
                    if (isStart && i == x0 && j == y0) {
                        tds[i * 4 + j].style.border = "3px solid red";
                    } else {
                        tds[i * 4 + j].style.border = "";
                    }
                })
            })
            stepSpan.innerHTML = step;
            if (isStart) {
                let flag = judgeVictory();
                if (flag) {
                    alert("恭喜你，成功通关！");
                    isStart = false;
                }
            }
        }
        // 打乱图片
        function shuffle() {
            print.forEach((subArr, i) => {
                subArr.forEach((item, j) => {
                    let x = parseInt(Math.random() * 4);
                    let y = parseInt(Math.random() * 4);
                    let temp = print[i][j];
                    print[i][j] = print[x][y];
                    print[x][y] = temp;
                })
            })
        }
        // 选择初始化位置
        function initEvent() {
            tds.forEach((td, index) => {
                td.onclick = function () {
                    let x = parseInt(index / 4);
                    let y = parseInt(index % 4);
                    x0 = x;
                    y0 = y;
                    updateUI();
                }
            })
        }
        // 移动交换图片
        function move(direction) {
            let x, y;
            if (direction == 'left') {
                if (y0 - 1 < 0) {
                    console.log("左边到边界了");
                    return;
                } else {
                    x = x0;
                    y = y0 - 1;
                }
            } else if (direction == 'right') {
                if (y0 + 1 > 3) {
                    console.log("右边到边界了");
                    return;
                } else {
                    x = x0;
                    y = y0 + 1;
                }
            } else if (direction == 'up') {
                if (x0 - 1 < 0) {
                    console.log("上边到边界了");
                    return;
                } else {
                    x = x0 - 1;
                    y = y0;
                }
            } else if (direction == 'down') {
                if (x0 + 1 > 3) {
                    console.log("下边到边界了");
                    return;
                } else {
                    x = x0 + 1;
                    y = y0;
                }
            }
            step++;
            let temp = print[x][y];
            print[x][y] = print[x0][y0];
            print[x0][y0] = temp;
            // 更新坐标位置
            x0 = x;
            y0 = y;
            updateUI();
        }
        // 判断是否胜利
        function judgeVictory() {
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    if (print[i][j] != victory[i][j]) {
                        return false;
                    }
                }
            }
            return true;
        }
        // 求助按钮
        function helpBake() {
            let destX;
            let destY;
            let num;
            wc: for (let i = 0; i < print.length; i++) {
                for (let j = 0; j < print[i].length; j++) {
                    let index = i * 4 + j;
                    if (print[i][j] != index + 1) {
                        destX = i;
                        destY = j;
                        num = index + 1;
                        break wc;
                    }
                }
            }
            let bakeX;
            let bakeY;
            wc: for (let i = 0; i < print.length; i++) {
                for (let j = 0; j < print[i].length; j++) {
                    if (print[i][j] == num) {
                        bakeX = i;
                        bakeY = j;
                        break wc;
                    }
                }
            }
            x0 = bakeX;
            y0 = bakeY;
            updateUI();
            // 开启自动巡航
            // 先横向移动，在纵向移动（必须得这样，不然就是bug）
            helpBtn.onclick = 'none';
            let timeId = setInterval(() => {
                // 先比较y0和destY
                if (y0 < destY) {
                    direction = "right";
                    move(direction);
                } else if (y0 > destY) {
                    direction = "left";
                    move(direction);
                } else {
                    if (x0 > destX) {
                        direction = "up";
                        move(direction);
                    } else if (x0 < destX) {
                        direction = "down";
                        move(direction);
                    } else {
                        // 归位了
                        clearInterval(timeId);
                        if (isStart) {
                            helpBtn.onclick = helpBake;
                        }
                    }
                }
            }, 800)
        }
    </script>
</body>

</html>
想要登顶的菜鸟
关注
  • 9
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现的拼图算法分析
10-17
主要介绍了JavaScript实现的拼图算法,结合实例形式分析了javascript图形拼接与判定算法相关操作技巧及注意事项,需要的朋友可以参考下
用js动画实现随机拼图
qq_44467976的博客
03-15 708
01 - javascript的小实例（随机拼图动画效果） 实现的效果 当刷新网页时，在一个div盒子里,由100个小div盒子随机飞入组成一张完整的图片； 用到的知识点有 1.css positon的相对定位（relative）和绝对定位（absolute）； background属性； 2.js 动态获取标签和静态获取标签 静态获取标签的方法只有三种： 1.let div ...
js实现动漫拼图2.0版
m0_58730471的博客
01-28 652
js实现动漫拼图
web前端期末大作业--HTML+CSS+JS实现美女拼图游戏
BYGFJ的博客
12-11 3531
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页...
js实现贪吃蛇
m0_58730471的博客
01-28 801
贪吃蛇
利用原生的JavaScript实现简单拼图游戏
10-17
拼图游戏是我们大家都玩过的一款小游戏，下面这篇文章主要给大家介绍了关于如何利用原生的JavaScript实现简单拼图游戏的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
html+css+js实现的拼图游戏结课作业.rar
06-11
html+css+js实现的拼图游戏结课作业，大二写的网页设计结课作业，内容是一个拼图小游戏，欢迎大家下载使用。
JS快速实现移动端拼图游戏
10-21
最近开发一个有关手机端拼图游戏，是基于js实现的。今天小编抽时间把具体实现代码分享到脚本之家平台供大家参考，对js移动端拼图游戏感兴趣的朋友参考下吧
JS实现滑动拼图验证功能完整示例
10-15
主要介绍了JS实现滑动拼图验证功能,结合完整实例形式分析了JS滑动拼图验证相关原理、实现步骤与操作注意事项,需要的朋友可以参考下
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 623
步骤很详细，直接上教程……
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 10
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 755
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
[email protected]使用懒加载
weixin_44072254的博客
04-25 198
【代码】[email protected]使用懒加载。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 141
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
CSR、SSR与同构渲染全方位解析
Allen-
04-26 1444
现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。接下来我们将通过对比它们的原理、应用场景、优缺点及实际案例，深入了解如何根据项目需求选择合适的渲染策略。
macOS asdf 工具版本管理器
Winsom1的博客
04-30 358
如果您只想在当前项目中指定特定的 Node.js 版本，而不影响全局环境，可以使用 asdf local 命令来设置项目的本地 Node.js 版本。3、如果开发者本地没有使用asdf，.tool-versions不影响项目任何内容，可当作提示使用，如果使用了asdf工具，本地没有当前所需node版本会提示安装，如果有会自动将当前文件作用域下的node切换为.tool-versions 指定的版本。要在特定的 Node.js 版本下运行项目，可以使用 asdf 管理器来管理 Node.js 版本。
redux快速入门
qq_73270720的博客
04-29 243
简单的加减案例,学会redux快速入门
Vue.js中Object.defineProperty实现数据劫持、数据代理和计算属性
javaThinker的专栏
04-26 305
在Vue.js中，数据劫持、数据代理和计算属性都是重要的概念，它们都与这个方法密切相关。下面我会逐一解释它们的原理，并给出相应的代码示例。
js实现滑动拼图验证功能完整示例
01-16
下面是一个使用JavaScript实现滑动拼图验证码的完整示例: ``` <!DOCTYPE html> 滑动拼图验证 /* 拼图滑块样式 */ #slider { position: relative; width: 400px; height: 200px; background-color: #f2f...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值