网页版2048-原型、原型链的应用

最新推荐文章于 2024-11-24 08:35:39 发布
原创 最新推荐文章于 2024-11-24 08:35:39 发布 · 618 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端

本文介绍了如何使用HTML、CSS和JavaScript实现一个网页版的2048游戏，通过实例展示了这三种技术在前端开发中的应用。

写了一个网页版本的2048。感兴趣的同学可以看一看。

HTML：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="2048.css"> 
    </head>
    <body>
        <!-- p>span#top+span#score -->
        <p>
            TOP:<span id="top">0</span><br>
            SCORE:<span id="score">0</span>
        </p>
    <!-- div#playground>div.grid*16+div#c.cell*16 -->
        <div id="playground">
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div class="grid"></div>
            <div id="c00" class="cell"></div>
            <div id="c01" class="cell"></div>
            <div id="c02" class="cell"></div>
            <div id="c03" class="cell"></div>

            <div id="c10" class="cell"></div>
            <div id="c11" class="cell"></div>
            <div id="c12" class="cell"></div>
            <div id="c13" class="cell"></div>

            <div id="c20" class="cell"></div>
            <div id="c21" class="cell"></div>
            <div id="c22" class="cell"></div>
            <div id="c23" class="cell"></div>

            <div id="c30" class="cell"></div>
            <div id="c31" class="cell"></div>
            <div id="c32" class="cell"></div>
            <div id="c33" class="cell"></div>
        </div>

<!--div#gameOver>div+p>br+span#final+br+a.btn -->
        <div id="gameOver"><!-- 半透明遮罩 -->
            <p>
                GAME OVER!<br>
                SCORE: <span id="final"></span><br>
                <a class="btn" onclick="game.start()">Try again!</a>
            </p>
        </div>
        <script src="2048.js"></script>
    </body>
</html>

css

#playground{
    width: 480px; height:480px;
    margin:0 auto;
    background:#bbada0;
    border-radius:10px;
    position:relative;
}
.grid,.cell{
    width:100px; height:100px; border-radius:6px;
}
.grid{
    background:#ccc0b3;
    float:left;
    margin:16px 0 0 16px;
}
.cell{
    position:absolute; 
    font-size:60px;
    text-align:center;
    line-height:100px;
    color:#fff;
}
[id^="c0"]{top:16px}
[id^="c1"]{top:132px}
[id^="c2"]{top:248px}
[id^="c3"]{top:364px}

[id$="0"]{left:16px}
[id$="1"]{left:132px}
[id$="2"]{left:248px}
[id$="3"]{left:364px}

.n2{background-color:#eee3da}
.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:#09c}
.n4096{background-color:#a6c}
.n8192{background-color:#93c}
.n2,.n4{color:#776e65}
.n1024,.n2048,.n4096,.n8192{font-size:40px}

p{
    width:480px;
    margin:0 auto;
    font-size:40px;
    font-family:Arial;
    font-weight:bold;
    padding-top:15px;
}
#gameOver{ display:none;
    position:fixed;
    top:0; right:0; bottom:0; left:0;
    background:rgba(55,55,55,.5);
}
#gameOver>p{
    width:300px; height:200px;
    background:#fff;
    position:absolute;
    top:50%; left:50%;
    margin-top:-100px; margin-left:-150px;

    text-align:center;
    line-height:1.5em;
    border-radius:10px;
    border:1px solid #edcf72;
}
#gameOver .btn{
    padding:10px;
    color:#fff; background-color:#9f8d77;
    border-radius:6px;
    cursor:pointer;
}

JavaScript

var game={
    data:null,//保存RN行，CN列的二维数组
    RN:4, CN:4,
    score:0,
    state:1,
    GAMEOVER:0,
    RUNNING:1,
    //强调:
    //1. 每个属性和方法结尾都用逗号分隔
    //2. 方法中使用自己的属性都必须前加this.
    start:function(){
        //重置游戏状态为RUNNING
        this.state=this.RUNNING;
        this.score=0;//将score重置为0
        //初始化RN*CN的二维数组，保存到data属性中
        //创建空数组保存在data属性中
        this.data=[];
        for(var r=0;r<this.RN;r++){
            this.data.push([]);//向data中压入一个空数组
            //c从0开始，到<CN结束
            for(var c=0;c<this.CN;c++){
                this.data[r].push(0);//向data中r行压入一个0
            }
        }//(遍历结束)
        this.randomNum();
        this.randomNum();
        this.updateView();
        //debugger;//F12: 鼠标放到任意关心的变量或属性
        //console.log(this.data.join("\n"));
        //为document绑定键盘按下事件
            //当键盘按下时自动执行该函数
        document.onkeydown=function(e){
            //事件处理函数中: this->.前的对象document
            //bind将this->game
            switch(e.keyCode){//判断e.keyCode
                case 37: //是37: 左移
                    this.moveLeft(); break;
                case 38: //是38: 上移
                    this.moveUp(); break;
                case 39://是39: 右移
                    this.moveRight(); break;
                case 40://是40: 下移
                    this.moveDown();
            }
        }.bind(this);
    },
    randomNum:function(){//在一个随机位置生成2或4
        while(true){//反复:
            //在0~RN-1之间取一个随机数r
            var r=Math.floor(Math.random()*this.RN);
            //在0~CN-1之间取一个随机数c
            var c=Math.floor(Math.random()*this.CN);
            if(this.data[r][c]===0){//如果data中r行c列为0
                //设置data中r行c列的值为:       
                    //随机生成一个小数,如果<0.5,就赋值2,否则赋值4
                this.data[r][c]=Math.random()<0.5?2:4;
                break;//退出循环
            }
        }
    },
    moveLeft:function(){//左移所有行
        //为data拍照保存在before中
        var before=String(this.data);
        //遍历data中每一行
        for(var r=0;r<this.RN;r++){
            this.moveLeftInRow(r);//调用moveLeftInRow(r)
        }//(遍历结束)
        //为data拍照保存在after中
        var after=String(this.data);
        //如果before不等于after
        if(after!==before){
            this.randomNum();//随机生成一个数
            //如果游戏结束，就修改游戏状态为GAMEOVER
            this.isGAMEOVER()&&
                (this.state=this.GAMEOVER)
            this.updateView();//更新页面
        }
    },
    isGAMEOVER:function(){
        for(var r=0;r<this.RN;r++){//遍历data
            for(var c=0;c<this.CN;c++){
                //如果当前元素是0或
                    //c<this.CN-1且当前元素等于右侧元素或
                    //r<this.RN-1且当前元素等于下方元素
                if(this.data[r][c]==0||
                        c<this.CN-1
                        &&this.data[r][c]==this.data[r][c+1]||
                        r<this.RN-1
                        &&this.data[r][c]==this.data[r+1][c]){  
                    return false;//就返回false
                }
            }
        }//(遍历结束)
        return true;//返回true
    },
    moveLeftInRow:function(r){//左移1行
        //c从0开始，遍历data中r行，到<CN-1结束
        for(var c=0;c<this.CN-1;c++){
            //找data中r行c列右侧下一个不为0的位置nextc
            var nextc=this.getNextInRow(r,c);
            //如果nextc是-1，就退出循环
            if(nextc==-1){break;}
            else{//否则
                if(this.data[r][c]==0){//如果r行c列为0
                    //将r行nextc列的值赋值给r行c列
                    this.data[r][c]=this.data[r][nextc];
                    //将r行nextc列的值置为0
                    this.data[r][nextc]=0;
                    c--;//c留在原地
                }else if(this.data[r][c]
                                    ==this.data[r][nextc]){
              //否则，如果r行c列等于r行nextc列
                    this.data[r][c]*=2;//将r行c列的值*2
                    //将r行c列的新值累加到score属性上
                    this.score+=this.data[r][c];
                    //将r行nextc列的值置为0 
                    this.data[r][nextc]=0;
                }
            }
        }
    },
    getNextInRow:function(r,c){
        //找r行c列右侧下一个不为0的位置
        //nextc从c+1开始，到<CN结束
        for(var nextc=c+1;nextc<this.CN;nextc++){
            //如果r行nextc位置不等于0
            if(this.data[r][nextc]!=0){
                return nextc;//返回nextc
            }
        }//(遍历结束)
        return -1;//返回-1
    },
    updateView:function(){
        //将data中的每个元素值更新到页面对应的div上
        for(var r=0;r<this.RN;r++){//遍历data
            for(var c=0;c<this.CN;c++){
                //找到和r行c列位置对应的div
                var div=document.getElementById("c"+r+c);
                //如果data中当前元素的值不等于0
                if(this.data[r][c]!==0){
                    //设置div的内容为data中当前元素的值
                    div.innerHTML=this.data[r][c];
                    //设置div的class为"cell n"+当前元素值
                    div.className="cell n"+this.data[r][c];
                }else{//否则
                    div.innerHTML="";//清除div的内容
                    //设置div的class为"cell"
                    div.className="cell";
                }
            }
        }
        //将score属性的值，放入id为score的div中
        document.getElementById("score")
                  .innerHTML=this.score;
        //设置id为gameOver的display为: 
            //如果游戏结束就显示，否则就隐藏
        document.getElementById("gameOver")
                  .style.display=
                                    this.state===this.GAMEOVER?
                                                                    "block":"none";
        //如果游戏结束,就设置id为final的span的内容为score属性
        this.state===this.GAMEOVER&&(
            document.getElementById("final")
                    .innerHTML=this.score
        );
    },
    moveRight:function(){//右移所有行
        //为data拍照保存在before中
        var before=String(this.data);
        //遍历data中每一行
        for(var r=0;r<this.RN;r++){
            //调用moveRightInRow(r)
            this.moveRightInRow(r);
        }//(遍历结束)
        //为data拍照保存在after中
        var after=String(this.data);
        if(after!==before){//如果before不等于after
            this.randomNum();//随机生成一个数
            //如果游戏结束，就修改游戏状态为GAMEOVER
            this.isGAMEOVER()&&
                (this.state=this.GAMEOVER)
            this.updateView();//更新页面
        }
    },
    moveRightInRow:function(r){//右移第r行
        //c从CN-1开始,反向遍历r行，到>0结束
        for(var c=this.CN-1;c>0;c--){
            //找r行c列前一个不为0的位置prevc
            var prevc=this.getPrevInRow(r,c);
            //如果prevc是-1，就退出循环
            if(prevc==-1){break;}
            else{//否则
                if(this.data[r][c]==0){//如果r行c列是0
                    //将r行prevc列的值赋值给r行c列
                    this.data[r][c]=this.data[r][prevc];
                    //将r行prevc列置为0
                    this.data[r][prevc]=0;
                    c++;//c留在原地
                }else if(this.data[r][c]
                                    ==this.data[r][prevc]){
                //否则，如果r行c列的值等于r行prevc列的值
                    this.data[r][c]*=2;//将r行c列的值*2
                    //将r行c列的新值累加到score属性上
                    this.score+=this.data[r][c];
                    //将r行prevc列的值置为0
                    this.data[r][prevc]=0;
                }
            }
        }
    },
    getPrevInRow:function(r,c){
        //查找r行c列左侧前一个不为0的位置
        //prevc从c-1开始，反向遍历，到>=0结束
        for(var prevc=c-1;prevc>=0;prevc--){
            //如果r行prevc列不等于0
            if(this.data[r][prevc]!=0){
                return prevc;//返回prevc
            }
        }//(遍历结束)
        return -1;//返回-1
    },
    moveUp:function(){
        //为data拍照保存在before中
        var before=String(this.data);
        //遍历data中每一列
        for(var c=0;c<this.CN;c++){
            //调用moveUpInCol上移第c列
            this.moveUpInCol(c);
        }
        //为data拍照保存在after中
        var after=String(this.data);
        //如果before不等于after
        if(before!=after){
            this.randomNum();//随机生成数
            //如果游戏结束，就修改游戏状态为GAMEOVER
            this.isGAMEOVER()&&
                (this.state=this.GAMEOVER)
            this.updateView();//更新页面
        }
    },
    moveUpInCol:function(c){
            //r从0开始,到r<RN-1结束，r每次递增1
        for(var r=0;r<this.RN-1;r++){
                //查找r行c列下方下一个不为0的位置nextr
            var nextr=this.getNextInCol(r,c);
                //如果没找到,就退出循环
            if(nextr==-1){break;}
            else{//否则  
                    //如果r位置c列的值为0
                if(this.data[r][c]==0){
                        //将nextr位置c列的值赋值给r位置
                    this.data[r][c]=this.data[nextr][c];
                        //将nextr位置c列置为0
                    this.data[nextr][c]=0;
                    r--;//r留在原地
                }else if(this.data[r][c]
                                ==this.data[nextr][c]){
                //否则，如果r位置c列的值等于nextr位置的  
                    this.data[r][c]*=2;//将r位置c列的值*2
                    //将r行c列的新值累加到score属性上
                    this.score+=this.data[r][c];
                        //将nextr位置c列的值置为0
                    this.data[nextr][c]=0;
                }
            }
        }
    },
    getNextInCol:function(r,c){
        r++;//r+1
        //循环，到<RN结束，r每次递增1
        for(;r<this.RN;r++){
            //如果r位置c列不等于0
            if(this.data[r][c]!=0){
                return r;//返回r
            }
        }//(遍历结束)
        return -1//返回-1
    },
    moveDown:function(){
        //为data拍照保存在before中
        var before=String(this.data);
        //遍历data中每一列
        for(var c=0;c<this.CN;c++){
            //调用moveDownInCol下移第c列
            this.moveDownInCol(c);
        }
        //为data拍照保存在after中
        var after=String(this.data);
        //如果before不等于after
        if(before!=after){
            this.randomNum();//随机生成数
            //如果游戏结束，就修改游戏状态为GAMEOVER
            this.isGAMEOVER()&&
                (this.state=this.GAMEOVER)
            this.updateView();//更新页面
        }
    },
    moveDownInCol:function(c){
            //r从RN-1开始，到r>0结束，r每次递减1
        for(var r=this.RN-1;r>0;r--){
                //查找r位置c列上方前一个不为0的位置prevr
            var prevr=this.getPrevInCol(r,c);
                //如果没找到,就退出循环
            if(prevr==-1){break;}
            else{//否则  
                    //如果r位置c列的值为0
                if(this.data[r][c]==0){
                        //将prevr位置c列的值赋值给r位置
                    this.data[r][c]=this.data[prevr][c]
                        //将prevr位置c列置为0
                    this.data[prevr][c]=0;
                    r++;//r留在原地
                }else if(this.data[r][c]
                                    ==this.data[prevr][c]){
                //否则，如果r位置c列的值等于prevr位置的值
                    this.data[r][c]*=2;//将r位置c列的值*2
                    //将r行c列的新值累加到score属性上
                    this.score+=this.data[r][c];
                    //将prevr位置c列置为0
                    this.data[prevr][c]=0;
                }
            }
        }
    },
    getPrevInCol:function(r,c){
            r--;//r-1
            //循环，r到>=0结束，每次递减1
            for(;r>=0;r--){
                //如果r位置c列不等于0
                if(this.data[r][c]!=0){
                    return r;//返回r
                }
            }//(遍历结束)
            return -1;//返回-1
    },
}
game.start();
muyphycx
关注
Adobe XD：原型制作与链接创建教程_2024-07-21_21-01-33.Tex
11-13 9010
在预览窗口下方，你可以看到“链接设置”选项。这里可以设置链接的权限，包括谁可以查看、谁可以评论等。你还可以选择是否要启用“设计规范”，这将允许开发人员直接从链接中查看和下载设计资源。Adobe XD允许用户自定义快捷键，以提高工作效率。通过设置个性化的快捷键，你可以快速访问常用的工具和命令，减少鼠标操作，专注于设计。打开快捷键设置：在菜单栏中选择“编辑”>“快捷键”，或者使用默认快捷键Ctrl+K（Windows）或Cmd+K（Mac）打开快捷键设置面板。查看默认快捷键。
1.19---链上 vs 链下：状态数据存储策略全景图
最新发布
鄙人kunzhi96，感恩遇见！
07-16 1万+
【摘要】本文将系统解析Web3开发中的链上与链下存储策略。区块链适合存储高价值、可验证的状态型数据（如代币余额、NFT所有权），但因其高昂成本和容量限制，不适合直接存储大文件。Web3项目通常采用链上存哈希+链下存内容的混合架构，通过IPFS、Arweave等去中心化存储方案保存文件，并在链上记录其内容哈希进行验证。文章对比分析了EVM storage、IPFS、Arweave、Filecoin等技术特性，帮助开发者在成本、安全性和用户体验间取得平衡，构建完整的区块链存储认知体系。
Js 原型对象与原型链(转)
weixin_30271335的博客
02-01 325
原文出处 原创作者: abruzzi 原文图文并茂，很好的说明了原型链的原理，在这里感谢原文作者把文章写的那么通俗易懂。 原型对象 　　每个javascript对象都有一个原型对象，这个对象在不同的解释器下的实现不同。比如在firefox下，每个对象都有一个隐藏的__proto__属性，这个属性就是“原型对象”的引用。 原型链 　　由于原型对象本身也是对象，根据上边的定义，它也有自己的原型...
原型链的应用
weixin_43992935的博客
06-18 983
15.3. 原型链的应用 15.3.1. 数组求最值 15.3.1.1. 基本实现 已经能够工作，比如数组对象的方法：arr.sort()，我们希望达到如下的调用方式： 15.3.1.2. 把方法加在构造器的原型上 由于给构造器Array添加一个属性getMax，所以呢，所有的由Array所产生的对象都可以访问这个属性。 还有一个问题：getMax()中的参数。 对比arr.sort()，我们如...
javascript 原型与原型链的理解及应用实例分析
11-21
本文实例讲述了javascript 原型与原型链的理解及应用。分享给大家供大家参考，具体如下： javascript中一切皆对象，但是由于没有Class类的概念，所以就无法很好的表达对象与对象之间的关系了。 比如对象A与对象B之间，它们两个是相对独立的个体，互不干扰，对象A修改自身的属性不会影响到对象B。 虽然这很好，但是有一个问题，如果对象A与对象B都有一个方法 run() ，并且代码也一样，那对象A与对象B各自都独立拥有一份 run() 方法的完整代码，这是需要资源去保存的。 一旦我们程序中应用的对象过多，那这种资源消耗会是巨大的。那有没有一种方法可以让对象A与对象B拥有一些公共的属性和方
JS三座大山之原型链 (附原型链的应用)
weixin_57320268的博客
03-09 935
面向对象的三个特征： 1 封装 把代码放到对象的方法中 2 继承 一个对象 拥有另一个对象的所有成员 3 多态 一个对象在不同情况下不同状态 原型继承： 继承 : 一个对象 拥有 另一个对象 所有的 成员 原型继承 把父元素 作为子对象构造函数 的原型 原型链： 什么是原型链? 每一个函数都有原型,而原型也是对象,也会有自己的原型,依次类推形成链式结构,称之为原型链 对象访问原型链的规则: 就近原则 对象先访问自己的，自己没有就找原型的，原型没有就找原型的原型，一直..
浅析js中的原型和原型链及其使用场景
铁锤妹妹的博客
02-27 4289
最近浏览网站学习的时候，看到了这个话题，感觉面试里也经常会被问到；所以查阅了不少文章，想总结一下，方便以后翻看。理解的会比较浅显，希望能多多交流，以后理解更深层的也会持续在这里更新。
Axure-0.6.2-chrome插件-打开原型图
04-08
通过Axure，设计师可以快速构建高保真或低保真的交互模型，模拟网页或应用程序的动态行为，从而在项目早期就获得反馈，减少后期修改的成本。 Axure 0.6.2 Chrome插件的出现，使得用户无需安装完整的Axure软件，在...
深入解析JavaScript原型链与构造函数的实例应用
JavaScript的原型和原型链是其独特的继承机制，与传统的面向对象编程中的类和实例概念有所不同。尽管JavaScript最初设计时以一种简单的方式支持网页与浏览器交互，但作为一门基于对象的语言，对象之间的关联性使得...
红黑风格网页figma原型模板.zip
12-28
在红黑风格的网页原型中，"红黑"指的是设计中使用的主色调。红色通常代表活力、激情与注意力吸引，而黑色则象征专业、简洁和高级感。这种色彩组合在网页设计中常用于创造出强烈视觉冲击力和现代感，适合那些希望吸引...
2048（网页版）
11-24
网页版本2048 包含2048游戏的基本功能 界面经过优化
原型链的基础结构和使用
swoly2894265391的博客
04-09 565
一首先先简单解释一下三个单词的意思 1. prototype : 属于构造函数，指向原型对象 作用：解决资源浪费+变量污染 2.__proto__ : 属于实例对象，指向原型对象 作用： 可以让实例对象访问原型中的成员 3.constructor: 属于原型对象，指向构造函数 作用： 可以让实例对象 知道自己被哪一个构造函数创建的 二构造函数 原型对象 实例对象 三者之间存在三条线,通过两行代码来检测三者的关系是否成立 //检查原型 : (1)先通过实例对象找构造函数 ...
多角度理解+原型+原型链+继承+及相关应用场景
m0_51244077的博客
10-16 977
js 原型，原型应用场景，对象，继承
简述原型链是什么，有什么用处？若想访问一个对象的原型，应该使用什么方法？
天心天地生的博客
11-11 625
原型链是什么 ECMAScript中 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。 基本的实现是利用构造函数，原型和实例的关系。 即是每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针proto.由于构造函数，原型和实例存在这样的关系，如果我们让一个原型对象等于另一个构造函数的实例，那么此时这个原型对象将包含一个指...
原型是什么，原型链的作用？看了这篇文章后你就知道了，原来是这么回事
weixin_48179599的博客
06-21 2848
原型的概念及使用 原型是什么： 每个函数和类都有一个显式原型prototype，里面存放一些公用的属性和方法，这些方法和属性，每一个实例都能访问到。而且每一个实例的对象都有一个隐式的原型__proto__，对象的隐式原型都指向构造这个对象的函数或类的显示原型。 看到这里可能会有点晕，请看下面代码演示 function Person(name,age){ this.name = name; this.age = age; } Person.prototy
什么是原型链？它在JavaScript中有什么作用？
破损的天堂鸟博客
11-24 919
原型链（Prototype Chain）是JavaScript中实现对象继承的一种机制。在JavaScript中，每个对象都有一个内部属性，这个属性指向它的原型对象。当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到相应的属性或方法，或者到达原型链的顶端（即null）为止。具体来说，原型链的形成过程如下：每个对象都有一个指向其原型对象的链接，而这个原型对象本身也是一个对象，并且也有自己的原型对象，如此层层嵌套，形成了一个链式结构。
原型链，什么是原型链？原型链的作用
qq_51486722的博客
02-10 5726
原型链 什么是原型链？ 为什么要使用原型链呢？ 使用原型链有什么作用？ 原型链的特点 __proto__和prototype的区别 示例代码 控制台测试详解图 话说回来，原型链既然是一个链条，那肯定是存在一个开头的吧，那它是从哪开始的呢？我们如何才能知道？ 什么是原型链？ 原型链通俗易懂的理解就是可以把它想象成一个链条，互相连接构成一整串链子！ 而原型链中就是实例对象和原型对象之间的链接。每个函数都有一个prototype属性，这个prototype属性就是我们的原型对象，我们拿这个.
2048和多地址入口_我的名片能运行Linux和Python，还能玩2048小游戏，成本只要20元...
热门推荐
weixin_39975744的博客
11-12 1万+
晓查 发自 凹非寺 量子位 报道 | 公众号 QbitAI猜猜它是什么？印着姓名、职位和邮箱，看起来是个名片。可是右下角有芯片，看起来又像是个PCB电路板。其实它是一台超迷你的ARM计算机，不仅能够运行Linux系统，有Python解释器，连上电脑还能玩2048小游戏。而且只需6秒就能快速启动操作系统。当然，它也是一个电子名片，系统中可以存入你的简历信息、照片。这是一位嵌入式工程师George H...
js prototype、__proto__的区别及使用场景及原型链的说明
qq_34009923的博客
12-21 2587
一：区别 __proto__是所有对象（包括函数都有的）； prototype只有函数有； 二：原型链是什么？ 原型链是针对构造函数的。通过new 创建函数，new出来的函数就会继承创建他的函数的属性。如果访问new函数的某个未在当前函数中定义的变量，他就会往上查找（像创建他的函数），这个查找的过程就教做原型链； 例： var Person=function(){ Person.pr
网页版2048实战--简介及构建页面
知世俗而不世俗
08-04 3544
引言       《2048》是比较流行的一款数字游戏。原版2048首先在GitHub上发布，原作者是Gabriele Cirulli。它是基于《1024》和《小3传奇》的玩法开发而成的新型数字游戏 简介        1、此次实战主要用的技术有：HTML、CSS、JavaScript、JQuery
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值