javascript一阶段(2)

已于 2023-03-20 22:55:15 修改
阅读量105 收藏
点赞数
分类专栏： javascript 文章标签： javascript css html 正则表达式 Powered by 金山文档
于 2023-03-20 22:38:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73287366/article/details/129660735
版权

1.2048游戏

html页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="2048.css"/>
        <script src="2048.js" ></script>
    </head>
    <body>
        <div class="box">
            <!-- 背景格 -->
            <div class="grid" id="g00"></div>
            <div class="grid" id="g01"></div>
            <div class="grid" id="g02"></div>
            <div class="grid" id="g03"></div>
            
            <div class="grid" id="g10"></div>
            <div class="grid" id="g11"></div>
            <div class="grid" id="g12"></div>
            <div class="grid" id="g13"></div>
            
            <div class="grid" id="g20"></div>
            <div class="grid" id="g21"></div>
            <div class="grid" id="g22"></div>
            <div class="grid" id="g23"></div>
            
            <div class="grid" id="g30"></div>
            <div class="grid" id="g31"></div>
            <div class="grid" id="g32"></div>
            <div class="grid" id="g33"></div>
            <!-- 前景格 -->
            <div class="cell" id="c00"></div>
            <div class="cell" id="c01"></div>
            <div class="cell" id="c02"></div>
            <div class="cell" id="c03"></div>
            
            <div class="cell" id="c10"></div>
            <div class="cell" id="c11"></div>
            <div class="cell" id="c12"></div>
            <div class="cell" id="c13"></div>
            
            <div class="cell" id="c20"></div>
            <div class="cell" id="c21"></div>
            <div class="cell" id="c22"></div>
            <div class="cell" id="c23"></div>
            
            <div class="cell" id="c30"></div>
            <div class="cell" id="c31"></div>
            <div class="cell" id="c32"></div>
            <div class="cell" id="c33"></div>
        </div>
    </body>
</html>

css页面

.box{
    width: 480px;
    height: 480px;
    background-color: #B9ADA0;
    margin: 0 auto;
    position: relative;
    border-radius: 6px;
}
.grid,.cell{
    width: 100px;
    height: 100px;
    border-radius: 6px;
}
.grid{
    float: left;
    background-color: #CAC1B4;
    margin: 16px 0 0 16px;
}

.cell{
    position: absolute;
    font-size: 50px;
    text-align: center;
    line-height: 100px;
    color: white;
}
#c00,#c01,#c02,#c03{top:16px}
#c10,#c11,#c12,#c13{top:132px}
#c20,#c21,#c22,#c23{top:248px}
#c30,#c31,#c32,#c33{top:364px}

#c00,#c10,#c20,#c30{left:16px}
#c01,#c11,#c21,#c31{left:132px}
#c02,#c12,#c22,#c32{left:248px}
#c03,#c13,#c23,#c33{left:364px}
/* 每个数字的样式 */
.n2{background-color: #eee3da;}
.n4{background-color: #ede0c8;}
.n8{background-color: #93c;}
.n16{background-color: #a6c;}
.n32{background-color: #09c;}
.n64{background-color: #9c0;}
.n128{background-color: #edcc61;}
.n256{background-color: #edcf72;}
.n512{background-color: #f65e3b;}
.n1024{background-color: #33b5e5;}
.n2048{background-color: #f67c5f;}
.n4096{background-color: #f59563;}
.n8192{background-color: #f2b179;}
.n2,.n4{color: #776e65;}
.n1024,.n2048,.n4096,.n8192{font-size: 40px;}

javascript页面

var game = {
    RN: 4,
    CN: 4,
    data: [],
    //1.开始游戏的方法
    start: function() {
        //初始化二维数组
        for (var r = 0; r < this.RN; r++) {
            this.data[r] = [] //每遍历一行就创建一个空的子数组对象
            for (var c = 0; c < this.CN; c++) {
                this.data[r][c] = 0
            }
        }
        //Math.random()*(max-min+1)+min
        //2.找一个随机的位置产生随机数
        this.randomNum()
        this.randomNum()
        this.updateView()
        console.log(this.data.join("\n"))
    },
    //2.找一个随机的位置产生随机数
    randomNum: function() {
        if(!this.isFull()){
            while (true) {
                //随机生成一个行下标，保存在r中 0-3
                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.1 ? 4 : 2
                    break
                }
            }
        }
    },
    //3.判断格子是否满员
    isFull: function() {
        for (var r = 0; r < this.data.length; r++) {
            for (var c = 0; c < this.data[r].length; c++) {
                if (this.data[r][c] == 0) {
                    return false
                }
            }
        }
        return true
    },
    //4.渲染数据到页面中
    updateView: function() {
        for (var r = 0; r < this.data.length; r++) {
            for (var c = 0; c < this.data[r].length; c++) {
                var div = document.getElementById("c" + r + c)
                //如果当前位置的元素值！=0，说明当前对应的元素中放有对应的数字
                if (this.data[r][c] != 0) {
                    div.innerHTML = this.data[r][c]
                    div.className = "cell n" + this.data[r][c]
                } else {
                    //重置样式
                    div.innerHTML = ""
                    div.className = "cell"
                }
            }
        }
    },
    //6.整体左移
    
    moveLeft: function() {
        //8.移动所有行之前先以字符串形式保存一个界面
        var before = this.data.toString()
        for (var r = 0; r < this.data.length; r++) {
            this.moveleftInrow(r)
        }
        var after = this.data.toString()
        if (before !=after) {
            //产生一个随机数
            this.randomNum()
            //渲染页面
            this.updateView()
        }
    },
    //5.左移（单行）
    moveleftInrow: function(r) {
        for (var c = 0; c < this.data[r].length - 1; c++) {
            //从c位置开始找下一个不为0的位置下标
            var next = this.getrightNext(r, c)
            if (next == -1) {
                //没找到就没有后续操作
                break
            } else {
                //如果自己为0
                //下一个位置的值替换自己，下一位置设为0
                if (this.data[r][c] == 0) {
                    this.data[r][c] = this.data[r][next]
                    this.data[r][next] = 0
                    c--
                }
                //如果自己不为0
                else if (this.data[r][c] == this.data[r][next]) {
                    this.data[r][c] *= 2
                    this.data[r][next] = 0
                }

            }

        }

    },
    //7.获取下一个不为0的元素的下标
    getrightNext: function(r, c) { //从当前r行c列开始往右找下一个不为0的值
        //从c+1开始遍历之后的所有元素
        for (var next = c + 1; next < this.data[r].length; next++) {
            if (this.data[r][next] != 0) {
                return next
            }
        }
        return -1
    },
    //整体右移
    moveRight:function(){
        var before=this.data.toString()
        for(var r=0;r<this.data.length;r++){
            this.moverightInrow(r)
        }
        var after=this.data.toString()
        if (before != after) {
            //产生一个随机数
            this.randomNum()
            //渲染页面
            this.updateView()
        }
    },
    //单行右移
    moverightInrow:function(r){
        for(var c=this.data[r].length-1;c>0;c--){
            var prev=this.getleftNext(r,c)
            if(prev==-1){
                break
            }else{
                if(this.data[r][c]==0){
                    this.data[r][c]=this.data[r][prev]
                    this.data[r][prev]=0
                    c++
                }else if(this.data[r][c]==this.data[r][prev]){
                    this.data[r][c]*=2
                    this.data[r][prev]=0
                }
            }
        }
    },
    //找上一个不为0的元素的下标
    getleftNext:function(r,c){
        //prev从c-1开始，到0结束每次递减1
        for(var prev=c-1;prev>=0;prev--){
            if(this.data[r][prev]!=0){
                return prev
            }
        }
        return -1
    },
    //上移
    moveUp:function(){
        var before=this.data.toString()
        for(var c=0;c<this.CN;c++){
            this.moveIncol(c)
        }
        var after=this.data.toString()
        if (before != after) {
            //产生一个随机数
            this.randomNum()
            //渲染页面
            this.updateView()
        }
    },
    moveIncol:function(c){
        for(var r=0;r<this.data.length-1;r++){
            var down=this.moveDown(r,c)
            if(down==-1){
                break
            }else{
                if(this.data[r][c]==0){
                    this.data[r][c]=this.data[down][c]
                    this.data[down][c]=0
                    r--
                }else if(this.data[r][c]==this.data[down][c]){
                    this.data[r][c]*=2
                    this.data[down][c]=0
                }
            }
        }
    },
    moveDown:function(r,c){
        for(var down=r+1;down<this.data.length;down++){
            if(this.data[down][c]!=0){
                return down
            }
        }
        return -1
    },
    //下移
    moveNext:function(){
        var before=this.data.toString()
        for(var c=0;c<this.CN;c++){
            this.movenextIncol(c)
        }
        var after=this.data.toString()
        if(before!=after){
            this.randomNum()
            this.updateView()
        }
    },
    movenextIncol:function(c){
        for(var r=this.data.length-1;r>0;r--){
            var up=this.getUp(r,c)
            if(up==-1){
                break
            }else{
                if(this.data[r][c]==0){
                    this.data[r][c]=this.data[up][c]
                    this.data[up][c]=0
                    r++
                }else if(this.data[r][c]==this.data[up][c]){
                    this.data[r][c]*=2
                    this.data[up][c]=0
                }
            }
        }
    },
    getUp:function(r,c){
        for(var up=r-1;up>=0;up--){
            if(this.data[up][c]!=0){
                return up
            }
        }
        return -1
    }
}
onload = function() {
    game.start()
    document.onkeydown = function() {
        var e = window.event || arguments[0]
        if (e.keyCode == 37) {
            game.moveLeft()
            
        }
        if(e.keyCode==39){
            game.moveRight()
        }
        if(e.keyCode==38){
            game.moveUp()
        }
        if(e.keyCode==40){
            game.moveNext()
        }
    }

}

2.4位随机验证码（正则表达式）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    //62个备选字符随机生成4位验证码
        var chars=[];//62个备选字符保存在chars中
        //unicode号从48号开始到58结束生成 0-9
        for(var u=48;u<58;u++){
            chars.push(String.fromCharCode(u))
        }
        //A-Z
        for(var u=65;u<91;u++){
            chars.push(String.fromCharCode(u))
        }
        //a-z
        for(var u=97;u<123;u++){
            chars.push(String.fromCharCode(u))
        }
        //声明一个函数专门获取随机4位字符的随机验证码
        function getCode(){
            var code=[];//将随机到的4位字符临时保存在code中
            /*反复随机chars数组中的下标，同时把对应的值压入到code中
            直到code.length<4退出循环*/ 
            while(code.length<4){
                var i=parseInt(Math.random()*62)//0-61
                code.push(chars[i])
            }
            return code.join("")//code返回到外部使用
        }
        var code=getCode()
        var input=""
        //请用户反复输入验证码，直到输入正确为止
        while((input=prompt("请输入验证码："+code)).toUpperCase()!=code.toUpperCase()){//prompt-输入框
            alert("验证码错误，请重新输入")//alert-警告框
            code=getCode()//输入错误后获取一个新的验证码
        }
        alert("验证通过")
    </script>
</head>
<body>

</body>
</html>
浪漫の收藏家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript-2
02-19
JavaScript-2可能是对ES4或更早期版本的一个非正式的引用，或者是一个教学序列中的第二个阶段，涵盖了一些基本概念的深入理解和进阶话题。 在JavaScript中，以下是一些重要的知识点： 1. **变量与数据类型**：...
6.0S2JavaScript阶段测试机试题
06-14
JavaScript是Web开发中不可或缺的一部分，尤其在Accp6.0S2的学习阶段，它占据了重要的地位。本测试机试题集正是为了检验学习者对JavaScript语言的理解和应用能力。以下是基于标题和描述所涵盖的一些关键JavaScript...
javascript中级阶段测试
weixin_47591145的博客
12-06 4406
一、选择题(每题2分) 1、写“Hello World ”的正确 javascript语法是？(A) A. document.write(“Hello World”) B. “Hello World” C. response.write(“Hello World”) D. (“Hello World”) 2、在JavaScript表达式中13+“13”+"5"的结果是：（D） A. 29 B. 1217 C. 126 D. 131
18 JavaScript学习：错误
热门推荐
百锦再的博客
04-26 8万+
try…catch语句用于捕获可能出现的错误，并在出错时执行相应的错误处理代码。在JavaScript中，try块中的代码是被监视的，如果其中的代码出现了错误，就会立即跳到catch块中执行错误处理代码。try {// 可能会抛出错误的代码throw new Error('这是一个自定义错误！');// 处理错误的代码在这个例子中，try块中的代码是被监视的，如果条件condition为true，就会抛出一个自定义错误对象。
Javascript入门阶段——if语句
YWX_KB的博客
11-11 3347
1.课程大纲 if语句的基本用法 判断真假 ==表示是否相等 2.1 if语句 if语句：用来做条件判断。 if语句的语法结构，如下所示： if(①){ ② } if关键字后面有一对小括号，小括号后面是一对大括号，①处放置判断条件，②处放置的是条件成立后执行的代码。 执行流程：当①处的判断条件为真( true )时，执行②处大括号里的代码；当①处的判断条件为假( false )时，不执行②处大括号里的代码，if语句结束。 使用if语句，判断是否为true。如果isFit为true，则
JavaScript语法基础（一）
qq_45359288的博客
03-21 5443
写目录1、输入输入语句2、变量变量语法扩展变量命名规范 1、输入输入语句 2、变量 变量语法扩展 变量命名规范
Javascript入门阶段——了解JS
YWX_KB的博客
10-18 2427
1.1 JavaScript的定义 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。 它是未来5到10年主流的编程语言，并且对于编程的结果能有很好的展现。 对于初学者，尤其是中小学生来说是首选的编程语言。 1.2 使用的软件 市面上有许多软件 比如WebStorm 或 Intellij IDEA 小编喜欢用aptana studio3 点这里下载软件 当然使用其他的软件不影响运行 1.3 创建Html文件 我们的代码需要在html文件里编译 首先打开我们的aptana软件 创建文件夹
JavaScript阶段二之Web APIs
国内一线红队，擅长攻防渗透，APT
08-11 4144
目录 前言 API WebAPI DOM 获取页面元素 事件 前言 在之前我们已经了解js的组成：https://blog.csdn.net/qq_44159028/article/details/119454230 之前，我们学的是js的基础语法，即ECMAscript标准规定的基本语法，要求我们掌渥Js 基础语法。但是只学习基本语法，做不了常用的网页交互效果，所以需要学习Web APIs。 web APIs是w3c组织的标准。web APIs 我们主要学习DOM和BOM。w.
Javascript入门阶段——else if语句
YWX_KB的博客
11-25 5708
1. 课程大纲 if-else语句的复习 逻辑运算符（！） else if语句在飞机大战中的运用 2.1 逻辑运算符！（非） ！：代表相反的意思 逻辑运算符！会把本来的运算结果转变成相反的结果。 根据下列代码，判断结果（true / false) 2.2 回顾if-else语句 if(判断条件){ A }else{ B } 判断条件为真（true),执行A处的代码 判定条件为假（false),执行B处代码 如果明天不下雨，在警告框中显示去动物园，否则显示在家写作业。代码如下： var i
JavaScript 快速入门手册
Java.慈祥
08-17 1万+
JavaScript是一门解释型语言，所谓解释型指语言是指不需要被编译为机器码在执行，而是直接浏览器|node中执行。JavaScript中每一个函数对象都存在一个隐藏的对象属性:prototype原型对象函数以普通函数调用，prototype没有任何作用函数以构造函数调用，new 构造函数(...);
JavaScript简介
lh11223326的博客
04-03 1901
HTML用来定义网页的内容，如图片，文本。CSS用来控制网页的外观，如颜色，字体，背景等等JavaScript用来实时更新网页中的内容，如从服务获取数据并更新到网页中，修改某些标签的演示或中的内容等，可以让网页更加生动。
JavaScript基础（超详细全文约一万字）
bguihiub的博客
02-10 8546
回顾整个JavaScript的发展历程, 实际上就是Web发展的历程从最开始的拨号上网方式到现在的100M光纤, 4G/5G移动Web的发展在近20年, 上网的方式发生了翻天复地的变化, 可以说是科技大爆炸.人们在享受越来越便捷的上网的同时, 对Web产品的需求越来越高从单纯的对访问速度的需求, 越来越多的转移到视觉美感, 智能操作交互, 沉浸式虚拟现实, 这些需求又反过来推动了技术的不断创新与进步.
Javascript_zero2Advance
02-14
"Javascript_zero2Advance" 指的可能是一个学习资源或者课程，旨在帮助初学者从零基础逐步提升到高级水平。在这个过程中，我们将探讨JavaScript的核心概念、语法、以及更高级的技术。 JavaScript的基础部分包括数据...
彩虹守卫游戏，使用cocos2d-x和JavaScript开发
03-23
Cocos2d-x是一款跨平台的游戏开发框架，广泛应用于2D游戏的制作，而JavaScript作为前端语言的主力军，其灵活性和便捷性在游戏开发中也得到了广泛应用。本文将深入探讨“彩虹守卫”这款游戏是如何利用这两者进行开发...
Javascript学习笔记2 函数
10-29
在JavaScript中，函数（function）是该语言的核心部分之一，它拥有“第一型”（First-class）的特性，意味着在JavaScript中，函数可以被视为任何其他值一样，可以被赋值给变量，作为参数传递给其他函数，也可以作为...
nodejs安装
a1241436267的博客
08-19 367
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 313
npm。
2024前端面试题-js篇
FormAda的博客
08-22 678
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 562
【代码】springboot网上商品订单转手系统bootpf
JavaScript基础教程：第一阶段
"JavaScript教学阶段1" 在JavaScript教学阶段1中，主要涵盖了JavaScript的基本概念、语法和核心功能。首先，JavaScript是一种广泛应用于网页和互联网应用的脚本语言，由网景公司的Brendan Eich在1995年发明，并在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值