前端起步

飞机大战小游戏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
        
        canvas {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <canvas id="canvas" height="700px" width="400">
    </canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var game = canvas.getContext("2d");

        //定义游戏状态
        // 第一阶段：游戏欢迎状态   0
        // 第二阶段：游戏加载状态   1	
        // 第三阶段：游戏运行状态   2	
        // 第四阶段：游戏暂停阶段   3
        // 第五阶段：游戏结束阶段   4
        const START = 0,
            LOADING = 1,
            RUNNING = 2,
            PASUE = 3,
            GAMEOVER = 4;
        var score = 0; //游戏得分
        var life = 10; //我的生命值
        var start_up = START; //游戏开关
        //加载游戏背景
        var w = 400,
            h = 700;
        //第一阶段开始：游戏欢迎阶段
        var Img = new Image();
        Img.src = "../images/06.png";
        //定义游戏背景
        var obj = {
                height: 771,
                width: 400,
                imgs: Img,
            }
            //定义背景对象的构造器
        function Bg(ppt) {
            this.imgs = ppt.imgs;
            this.width = ppt.width;
            this.height = ppt.height
            this.x1 = 0;
            this.x2 = 0;
            this.y1 = 0;
            this.y2 = -this.height
            this.draw = function() {
                game.drawImage(ppt.imgs, this.x1, this.y1);
                game.drawImage(ppt.imgs, this.x2, this.y2);
            }
            this.sport = function() {
                this.y1++;
                this.y2++;
                if (this.y1 == this.height) {
                    this.y1 = -(this.height)
                }
                if (this.y2 == this.height) {
                    this.y2 = -this.height;
                }
            }
        }
        var _bg = new Bg(obj);
        var logo = new Image();
        logo.src = "../images/07.png"

        // 第二阶段开始
        var lodings = [];
        lodings[0] = new Image();
        lodings[0].src = "../images/12.png";
        lodings[1] = new Image();
        lodings[1].src = "../images/13.png";
        lodings[2] = new Image();
        lodings[2].src = "../images/14.png";
        lodings[3] = new Image();
        lodings[3].src = "../images/15.png";

        var enter = {
            imgs: lodings,
            width: 196,
            height: 176,
            length: lodings.length
        }

        function ENTER(ppd) {
            this.startIndex = 0;
            this.paint = function() {
                    game.drawImage(ppd.imgs[this.startIndex], (w - ppd.width) / 2, (h - ppd.height) / 2);
                }
                //定义速度
            this.time = 0;
            //定义动画
            this.step = function() {
                this.time++
                    if (this.time % 25 == 0) {
                        this.startIndex++;
                    }
                if (this.startIndex == ppd.length) {
                    start_up = RUNNING;
                }
            }
            
        }
        var loding = new ENTER(enter);
        // 第三阶段游戏运行阶段       


        //我方飞机数据
        var plane = [];
        plane[0] = new Image();
        plane[0].src = "../images/2.png";
        plane[1] = new Image();
        plane[1].src = "../images/boom1.png";
        plane[2] = new Image();
        plane[2].src = "../images/boom2.png";
        plane[3] = new Image();
        plane[3].src = "../images/boom3.png";
        plane[4] = new Image();
        plane[4].src = "../images/boom4.png";

        var PLANE = {
            imgs: plane,
            length: plane.length,
            width: 84,
            height: 104,
            frame: 2
        }

        function PLANES(pdd) {
            this.width = pdd.width;
            this.length = pdd.length;
            this.height = pdd.height;
            this.x = (w - pdd.width) / 2 //              定义我方飞机的位置
            this.y = h - pdd.height;
            this.frame = pdd.frame;
            this.imgs = pdd.imgs;
            this.down = false; //用来判断飞机是否被撞击
            this.candel = false; // 定义飞机是否爆破完成,表示飞机还没有完全爆炸
            this.startIndex = 0;
            this.paint = function() {
                game.drawImage(this.imgs[this.startIndex], this.x, this.y);
            }
            this.step = function() {
                    //                  我方飞机的运动状态:（所以在此处要判断状态）
                    //                  1.正常状态
                    //                  2.爆破状态
                    if (!this.down) {
                        this.startIndex = 0;
                    } else { //被撞击了
                        this.startIndex++;
                        this.LIFE = 0;
                        if (this.startIndex == this.length) {
                            this.LIET++;
                            if (this.LIFE % 6 == 0) {
                                //生命减少了
                                life--;
                                if (life == 0) {
                                    start_up = GAMEOVER;
                                    //虽然游戏结束了但是还停留在最后一张图的状态
                                    this.startIndex = this.length - 1;
                                } else {
                                    PLANES1 = new PLANES(PLANE);
                                }
                            }
                        }
                    }
                }
                // 定义我方飞机碰撞的方法
            this.bang = function() {
                    this.down = true;
                }
                // 增加我方飞机射击的方法
                //定义射击速度初始值为0
            this.time = 0;
            this.shoot = function() {
                this.time++;
                if (this.time % 7 == 0) {
                    bullets.push(new BULLETS(BULLET));
                }
            }
        }
        //3.1.4创建我方飞机的对象实例
        var PLANES1 = new PLANES(PLANE);
        //飞机移动事件
        canvas.onmousemove = function(event) {
            if (start_up == RUNNING) {
                var x = event.offsetX;
                var y = event.offsetY;
                PLANES1.x = x - PLANES1.width / 2;
                PLANES1.y = y - PLANES1.height / 2;

            }
        }

        //制作子弹
        var bullet = new Image();
        bullet.src = "../images/011.png";
        var BULLET = {
                imgs: bullet,
                width: 127,
                height: 127
            }
            //创建子弹的构造器
        function BULLETS(pdd) {
            this.imgs = pdd.imgs;
            this.width = pdd.width;
            this.height = pdd.height;
            //子弹绘制的坐标
            this.x = PLANES1.x + PLANES1.width * 0.5 - this.width * 0.5;
            this.y = PLANES1.y * 1.1 - this.height * 1.1;
            this.paint = function() {
                game.drawImage(this.imgs, this.x, this.y);
                game.drawImage(this.imgs, this.x + 40, this.y + 20);
                game.drawImage(this.imgs, this.x - 40, this.y + 20);
            }
            this.step = function() {
                    this.y -= 10;
                }
                // 定义子弹碰撞属性    ，false表示没有碰撞  
            this.candel = false;
            this.bang = function() {
                this.candel = true;
            }
        }
        //创建存储子弹的数组
        var bullets = [];

        // 3.2.5 创建函数,用于绘制所有子弹
        function bulletpaint() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].paint();
            }
        }
        // 3.2.6 创建函数,用于控制所有子弹运动
        function bulletsStep() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].step();
            }
        }
        // 3.2.7 当子弹移动到画布之外时,删除该子弹
        function bulletsDel() {
            for (var i = 0; i < bullets.length; i++) {
                if (bullets[i].y < -bullets[i].height) {
                    bullets.splice(i, 1);
                }
            }
        }


        //制作敌方飞机，(三种)
        var enemy1 = [];
        enemy1[0] = new Image();
        enemy1[0].src = "../images/enemy1.png";
        enemy1[1] = new Image();
        enemy1[1].src = "../images/enemy1_down1.png";
        enemy1[2] = new Image();
        enemy1[2].src = "../images/enemy1_down2.png";
        enemy1[3] = new Image();
        enemy1[3].src = "../images/enemy1_down3.png";
        enemy1[4] = new Image();
        enemy1[4].src = "../images/enemy1_down4.png";

        var enemy1s = {
                imgs: enemy1,
                width: 57,
                height: 51,
                length: enemy1.length,
                type: 1,
                frame: 1,
                life: 50,
                score: 1
            }
            //第二种飞机
        var enemy2 = [];
        enemy2[0] = new Image();
        enemy2[0].src = "../images/enemy2.png";
        enemy2[1] = new Image();
        enemy2[1].src = "../images/enemy2_down1.png";
        enemy2[2] = new Image();
        enemy2[2].src = "../images/enemy2_down2.png";
        enemy2[3] = new Image();
        enemy2[3].src = "../images/enemy2_down3.png";
        enemy2[4] = new Image();
        enemy2[4].src = "../images/enemy2_down4.png";

        var enemy2s = {
            imgs: enemy2,
            width: 69,
            height: 95,
            length: enemy2.length,
            type: 2,
            frame: 1,
            life: 200,
            score: 5
        }

        //第三种飞机
        var enemy3 = [];
        enemy3[0] = new Image();
        enemy3[0].src = "../images/enemy3_hit.png";
        enemy3[1] = new Image();
        enemy3[1].src = "../images/enemy3_n1.png";
        enemy3[2] = new Image();
        enemy3[2].src = "../images/enemy3_n2.png";
        enemy3[3] = new Image();
        enemy3[3].src = "../images/enemy3_down1.png";
        enemy3[4] = new Image();
        enemy3[4].src = "../images/enemy3_down2.png";
        enemy3[5] = new Image();
        enemy3[5].src = "../images/enemy3_down3.png";
        enemy3[6] = new Image();
        enemy3[6].src = "../images/enemy3_down4.png";
        var enemy3s = {
                imgs: enemy3,
                width: 169,
                height: 260,
                length: enemy3.length,
                type: 3,
                frame: 2,
                life: 300,
                score: 20
            }
            //敌方飞机的构造函数
        function Enemy(config) {
            this.imgs = config.imgs;
            this.length = config.length;
            this.width = config.width;
            this.height = config.height;
            this.type = config.type;
            this.frame = config.frame;
            this.life = config.life;
            this.score = config.score;
            //              定义敌方飞机的坐标
            this.x = Math.random() * (w - this.width);
            this.y = -this.height;
            // 定义数组角标
            this.startIndex = 0;
            // 新增属性 - 表示当前绘制的图片
            //this.img = this.imgs[this.startIndex];
            // 新增状态 - 表示敌机是否被撞击
            this.down = false;
            // 新增状态 - 表示敌机是否被删除
            this.candel = false;
            this.paint = function() {
                game.drawImage(this.imgs[this.startIndex], this.x, this.y);
            }

            this.step = function() {
                    if (!this.down) {
                        /*
                         * 小、中飞机(1) - 角标为0
                         * 大飞机(2) - 角标在0和1之间切换
                         */

                        this.startIndex++;
                        this.startIndex = this.startIndex % this.frame;
                        this.y += 2;

                    } else {
                        // 爆破
                        /*
                         * 小和中飞机 - 1
                         * 大飞机 - 2
                         */
                        // 问题 - 刚进入爆破,只能执行一次                 
                        this.startIndex++;
                        if (this.startIndex == this.length) {
                            this.candel = true;
                            this.startIndex = this.length - 1;
                        }
                    }
                }
                //是否被碰撞的方法
            this.checkHit = function(wo) { //判断四个边
                    return wo.y + wo.height > this.y &&
                        wo.x + wo.width > this.x &&
                        wo.y < this.y + this.height &&
                        wo.x < this.x + this.width;
                }
                //敌方飞机碰撞以后的方法
            this.bang = function() {
                this.LIET = 0;
                this.LIET++;
                if (this.LIET % 1 == 0) {
                    console.log(123);
                    this.life--;
                    if (this.life == 0) {
                        this.down = true;
                        score += this.score;
                    }
                }
            }
        }

        //          3.3.4创建数组存放敌方飞机
        var enemise = [];
        //          3.3.5创建函数，往数组中添加数据
        function enterEnemise() {
            var rand = Math.floor(Math.random() * 100)
            if (rand < 10) {
                enemise.push(new Enemy(enemy1s));

            } else if (rand < 55 && rand > 50) {
                enemise.push(new Enemy(enemy2s));
            } else if (rand == 88) {
                //添加大飞机
                //大飞机尤其只有一个
                //并且把大飞机放在数组的第一位
                if (enemise[0].type != 3 && enemise.length > 0) {
                    enemise.splice(0, 0, new Enemy(enemy3s));
                }
            }
        }

        //函数绘制敌方飞机(因为敌方飞机在数组中，所以要循环遍历画出)
        function enemyPaint() {
            for (var i = 0; i < enemise.length; i++) {
                enemise[i].paint();
            }
        }
        //          3.3.7创建函数敌方飞机的运动    
        function enemyStep() {
            for (var i = 0; i < enemise.length; i++) {
                enemise[i].step();
            }
        }
        //          3.3.8创建函数删除敌方飞机
        function delenemy() {
            for (var i = 0; i < enemise.length; i++) {
                //                  console.log(enemise[i].candel)
                if (enemise[i].y > h || enemise[i].candel) {
                    enemise.splice(i, 1)
                        //                      arrayObject.splice(index,howmany,item1,.....,itemX)参数 描述 
                        //                      index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 
                        //                      howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 
                        //                      item1, ..., itemX 可选。向数组添加的新项目。 
                }
            }
        }

        //          3.3.9绘制碰撞以后的函数
        //          (在上面3.3.3敌方飞机的对象中定义了一个检测{我方飞机wo}是否碰撞的方法)
        //          (那个wo作为形参)(那么下面的hero作为我方飞机的实参传进去)(子弹的数组中的元素对象{bullets[j]}作为实参传进去)

        function hitEnemise() {
            for (var i = 0; i < enemise.length; i++) {
                //                  如果我方飞机撞到了敌方飞机以后
                if (enemise[i].checkHit(PLANES1)) {
                    //                      处理敌方飞机碰撞以后的逻辑
                    enemise[i].bang();
                    //                      处理我方飞机碰撞以后的逻辑
                    PLANES1.bang()
                }

                //                  子弹如果碰到敌方飞机以后
                for (var j = 0; j < bullets.length; j++) {
                    if (enemise[i].checkHit(bullets[j])) {
                        enemise[i].bang();
                        //                          子弹的碰撞逻辑
                        bullets[j].bang();
                    }
                }
            }
        }

        //          3.4绘制分数和生命值
        function scoreText() {
            game.font = "bold 24px 微软雅黑"
            game.fillText("score:" + score, 10, 30)
            game.fillText("life:" + life, 300, 30)
                // game.fillText("fill",red);
            var ziti = game.createLinearGradient(150, 0, 0, 150)
                //			2.设置渐变颜色及偏移度
            ziti.addColorStop(0, "blue");
            ziti.addColorStop(0.5, "pink");
            ziti.addColorStop(1, "red");
            game.fillStyle = ziti;

        }

        //游戏第四阶段游戏暂停
        canvas.onmouseout = function(event) {
            if (start_up == RUNNING) {
                start_up = PASUE;
                //创建暂停
            }
        }
        canvas.onmouseover = function(event) {
            if (start_up == PASUE) {
                start_up = RUNNING;
            }
        }
        var pauseimg = new Image();
        pauseimg.src = "../images/16.png";
        var suspend = {
                imgs: pauseimg,
                width: 187,
                height: 107
            }
            //绘制GAMEOVER文本
        function paintGO() {
            game.font = "bold 48px 微软雅黑";
            game.fillText("GAME OVER", (h / 2 * 0.15), (w / 2 * 1.6));
            var ziti = game.createLinearGradient(150, 0, 0, 150)
                //			2.设置渐变颜色及偏移度
            ziti.addColorStop(0, "blue");
            ziti.addColorStop(0.5, "pink");
            ziti.addColorStop(1, "red");
            game.fillStyle = ziti;
        }

        //创建暂停构造器
        function SUSPEND(pdd) {
            this.width = pdd.width;
            this.height = pdd.height;
            this.imgs = pdd.imgs;
            this.paint = function() {
                game.drawImage(pdd.imgs, (w - pdd.width * 1.5), (h - pdd.height) / 2);
            }

        }
        var SUSPEND = new SUSPEND(suspend);
        //游戏重新启动
        var imgS = new Image();
        imgS.src = "../images/17.png";
        imgS.onclick = function() {
                console.log(999)
           }
        canvas.addEventListener("click",function(e=e||window.e){
            	  console.log(e.offsetX,e.offsetY);
            	   if(start_up === START){
            	   	     if(e.offsetX>137 && e.offsetX <261 && e.offsetY >304 && e.offsetY<334){
            	   	     	      start_up = LOADING;
            	   	     }
            	   }
            	   if(start_up === GAMEOVER){
            	   	  	 if(e.offsetX>137 && e.offsetX <205 && e.offsetY >356 && e.offsetY<438){
            	   	     	     	start_up = LOADING;
//          	   	     	     	window.go(0);
									 score = 0; //游戏得分
        							 life = 10;
            	   	     }
            	   }       	      
            })
            //定义游戏核心控制器
        setInterval(function() {
            _bg.draw();
            _bg.sport();
            
            if (start_up == START) {
                game.drawImage(logo, 125, 300)
            } else if (start_up == LOADING) {
            	
                loding.paint();
                loding.step();
            } else if (start_up == RUNNING) {
                PLANES1.paint();
                PLANES1.step();
                PLANES1.shoot();
                bulletpaint();
                bulletsStep();
                bulletsDel();
                //创建敌方飞机
                enterEnemise()
                    //绘制敌方飞机
                enemyPaint();
                //绘制敌方飞机的运动
                enemyStep();
                //删除敌方飞机
                delenemy();
                //判断是否撞击
                hitEnemise();
                //绘制分数和生命值
                scoreText()
            } else if (start_up == PASUE) {
                PLANES1.paint();
                bulletpaint();
                enemyPaint();
                PLANES1.shoot();
                SUSPEND.paint();
            } else if (start_up == GAMEOVER) {
                PLANES1.paint();
                bulletpaint();
                enemyPaint();
                paintGO();
                scoreText();
                game.drawImage(imgS, 125, 350);                             
            	loding.startIndex = 0;
            }
        }, 20)
    </script>
</body>

</html>

前端为什么要使用new Promise包裹一个函数没资格抱怨 JS核心前端 javascript
在前端开发中，使用newPromise包裹一个函数主要是为了将原本不支持Promise规范的操作转化为支持Promise规范的操作，从而可以更好地处理异步操作，提升代码的可读性和可维护性。下面详细介绍这么做的常见原因和应用场景：1.封装回调风格的异步操作在JavaScript中，早期的异步操作（如setTimeout、XMLHttpRequest等）通常使用回调函数来处理结果。这种方式容易导致回调
多语言实现图像生成的API调用指南 IT·小灰灰人工智能数据挖掘深度学习语言模型图像处理 AI作画
在现代软件开发中，API（应用程序编程接口）的使用变得越来越普遍。无论是JavaScript、Python、Go还是Java，开发者们都需要与各种API进行交互以实现特定的功能。本文将通过一个具体的例子，展示如何使用不同的编程语言调用一个图像生成的API，并生成一幅描述海岛的图像。目录API获取方式正文1.JavaScript实现2.Python实现3.Go实现4.Java实现结语API获取方式前
JavaScript系列（68）--运行时优化技术详解 ᅟᅠ ‌‍‎‏ 一进制 JavaScript javascript java 前端
JavaScript运行时优化技术详解今天，让我们深入探讨JavaScript的运行时优化技术。运行时优化是提升JavaScript应用性能的另一个关键环节，它关注代码在实际执行过程中的性能表现。运行时优化基础概念小知识：JavaScript运行时优化是指在代码执行过程中，通过各种技术手段来提高代码的执行效率。这包括即时编译（JIT）、内联缓存、类型特化等技术。基本优化实现//1.函数执行优化器c
鸿蒙next开发：页面添加水印-Canvas 代码中的爱马仕 HarmonyOS 鸿蒙 OpenHarmony harmonyos 华为 ubuntu 前端鸿蒙鸿蒙系统程序员
介绍在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。效果图预览使用说明：进入页面，页面背景显示水印效果。长按轮播图片，弹出半模态弹窗，点击保存按钮，图片保存在图库中，查看图片，图片显示水印。实现思路本示例使用两种方法添加水印方法一：Canvas组件绘制水印，然后将水印组件通过overl
Javascript的数据类型太阳与星辰 JavaScript 前端 javascript 前端数据类型
Javascript的数据类型1.基本数据类型1.1七种基本数据类型1.2单独说说BigInt‌1.3其它注意点2.引用数据类型3.基本数据类型和引用数据类型的区别4.双等于号和三等于号的区别5.Javascript的类型转换机制5.1显示转换(强制转换)5.2隐式转换(1)减、乘、除(2)加(加法要区别算,因为+不仅仅是加法，还可以拼接)(3)单个变量(4)ToPrimitive原则‌JavaS
JavaScript系列（73）--装饰器详解 ᅟᅠ ‌‍‎‏ 一进制 JavaScript javascript 开发语言 ecmascript
JavaScript装饰器详解JavaScript装饰器是一个强大的语言特性，它让我们能够以声明式的方式修改类和类成员的行为。本文将深入探讨装饰器的原理、使用方法和最佳实践。装饰器基础小知识：装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问器、属性或参数上。装饰器使用@expression形式，其中expression必须计算为一个函数。//基础装饰器语法functionreadonl
【JavaScript】异步编程汇总秀秀_heo JavaScript javascript 开发语言 ecmascript
异步编程解决方案：回调函数PromiseGeneratorawait/async回调函数回调函数是早期处理异步编程的主要方式，虽然它本身存在很多的缺陷，比如那个时候对于复杂的异步处理常常会出现回调地狱。但是因为JavaScript中当时并没有很好的API来帮助我们以比较优雅的方式编写代码，所以依然应用非常广泛。functionfetchData(url,callback){setTimeout((
使用 MySQL 从 JSON 字符串提取数据 m0_66323401 面试学习路线阿里巴巴 mysql json oracle
使用MySQL从JSON字符串提取数据在现代数据库管理中，JSON格式因其灵活性而广泛使用。然而，当数据存储在JSON中时，我们经常需要将其转换为更易于处理的格式。本篇文章将通过一个具体的SQL查询示例，展示如何从存储在MySQL中的JSON字符串提取数据并重新格式化。1.背景知识JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器
Vue3 + Moveable + Selecto 拖拽组件 Demo 巧克力力克巧！学习积累 vue.js javascript 前端
一、项目概述本demo旨在通过Vue3、Moveable和Selecto三个库的结合，实现一个基本的拖拽组件功能。通过Selecto实现元素的选择功能，通过Moveable控制选中元素的大小和位置。同时，封装了hooks以实现元素与数据之间的绑定，使得操作更加灵活和可维护。二、技术栈Vue3：用于构建用户界面的渐进式JavaScript框架。Moveable：一个可以拖拽、缩放、旋转DOM元素的库
学习使用Elm架构的JavaScript项目陈昊和
学习使用Elm架构的JavaScript项目learn-elm-architecture-in-javascript:unicorn:LearnhowtobuildwebappsusingtheElmArchitecturein"vanilla"JavaScript(step-by-stepTDDtutorial)!项目地址:https://gitcode.com/gh_mirrors/le/le
学习Elm架构在JavaScript中的应用萧书泓
学习Elm架构在JavaScript中的应用learn-elm-architecture-in-javascript:unicorn:LearnhowtobuildwebappsusingtheElmArchitecturein"vanilla"JavaScript(step-by-stepTDDtutorial)!项目地址:https://gitcode.com/gh_mirrors/le/le
探索Redux：构建可预测、可测试的JavaScript应用黎杉娜Torrent
探索Redux：构建可预测、可测试的JavaScript应用learn-redux:boom:ComprehensiveNotesforLearning(howtouse)ReduxtomanagestateinyourWeb/Mobile(React.js)Apps.项目地址:https://gitcode.com/gh_mirrors/le/learn-redux项目介绍在现代Web开发中，J
探索Elm架构：用纯JavaScript构建优雅的Web应用邵瑗跃Free
探索Elm架构：用纯JavaScript构建优雅的Web应用learn-elm-architecture-in-javascript:unicorn:LearnhowtobuildwebappsusingtheElmArchitecturein"vanilla"JavaScript(step-by-stepTDDtutorial)!项目地址:https://gitcode.com/gh_mirro
[失业前端恶补算法]JavaScript leetcode刷题top100（六）：字母异位词分组、最长连续序列、找到字符串中所有字母异位词、最大子数组和、除自身以外数组的乘积摸鱼老萌新失业前端恶补算法前端 javascript 动态规划算法哈希
专栏声明：只求用最简单的，容易理解的方法通过，不求优化，不喜勿喷49.字母异位词分组题面给你一个字符串数组，请你将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。知识点：哈希表、排序思路这里用了js语言的一个小技巧，我们可以使用split这个api将字符串变成字符的数组，之后我们对得到的数组进行排序，这样字母异位词得到了结果字符串的一致的，
Vue.js 新手必看：5个趣味小案例快速理解数据绑定原理云资社 VUE vue.js 前端 javascript
Vue.js是一个渐进式JavaScript框架，用于构建用户界面。其核心特性之一是数据绑定，它允许开发者通过简单的声明式语法将数据与DOM元素绑定在一起。这种双向数据绑定机制使得数据更新和视图更新变得非常直观和高效。本文将通过5个趣味小案例，帮助Vue.js新手快速理解数据绑定的原理和实现方式。案例1：简单的文本绑定目标将输入框中的内容实时显示在页面上。实现代码Vue数据绑定-文本绑定输入框内容
前端实现电子签名一个00后前端开发前端
Document *{ margin:0; padding:0; } 取消保存 constcanvas=document.querySelector('canvas'); canvas.width=500; canvas
vue3 ref/reactive 修改数组的方法取啥好 vue vue.js javascript 前端
import{ref}from'vue'//给每个todo对象一个唯一的idletid=0constnewTodo=ref('')consttodos=ref([{id:id++,text:'LearnHTML'},{id:id++,text:'LearnJavaScript'},{id:id++,text:'LearnVue'}])functionaddTodo(){todos.value.pu
C#中的动态类型用法总结带演示代码 yuanpan c#windows microsoft
在C#中，dynamic类型是一种特殊的类型，它允许你在编译时绕过类型检查，而是在运行时解析类型。这使得你可以编写更灵活的代码，但也增加了运行时错误的风险。dynamic类型通常用于与动态语言（如Python、JavaScript）交互，或者处理一些在编译时无法确定类型的场景。1.基本用法你可以使用dynamic关键字来声明一个动态类型的变量。这个变量在编译时不会进行类型检查，而是在运行时根据实际
JavaScript网页设计案例：动态天气预报页面静默.\\ javascript 开发语言
在这个案例中，我们将创建一个简单的网页，该网页能够根据用户输入的城市名称显示当前的天气情况。这个项目不仅将帮助我们理解如何使用JavaScript进行DOM操作和事件处理，还将介绍如何通过API获取实时数据。1.准备工作首先，你需要注册一个免费的天气API服务（如OpenWeatherMap），以获取API密钥。这将允许你访问其服务器上的天气数据。2.HTML结构让我们从基本的HTML结构开始：D
解析浏览器中JavaScript与Native交互原理：以WebGPU为例 ttod_qzstudio JavaScript JavaScript WebGPU
引言随着Web应用复杂度的提升，开发者对浏览器访问本地硬件能力的需求日益增长。然而，浏览器必须在开放性与安全性之间找到平衡——既不能放任JavaScript（JS）随意操作系统资源，又要为高性能计算、图形渲染等场景提供支持。WebGPU的出现正是这一矛盾的解决方案之一。作为新一代Web图形API，WebGPU允许JS以接近原生（Native）的方式操作GPU，同时严格遵循浏览器的安全模型。本文将结
在Vue中使用highlight.js代码高亮技术驱动者 javascript vue.js 前端 js
代码高亮是在网页开发中常见的需求之一，它可以使代码在页面上以不同的颜色或样式进行突出显示，提高可读性。highlight.js是一个流行的JavaScript库，它提供了丰富的语法高亮功能，支持多种编程语言和模板语言。本文将介绍如何在Vue项目中使用highlight.js来实现代码高亮的效果。步骤1：安装highlight.js首先，我们需要安装highlight.js库。在Vue项目的根目录下
Vue.js 配置 Babel、Webpack 和 ESLint 轻口味 VUE.JS 入门与实践 vue.js webpack 前端
Vue.js配置Babel、Webpack和ESLint今天我们来聊聊如何配置Babel、Webpack和ESLint，这三个工具在现代前端开发中扮演着重要角色。它们分别负责代码转译、模块打包和代码质量检测，合理配置它们能大大提高项目的开发效率和质量。下面我将详细介绍它们的作用，并提供具体的配置示例。1.Babel配置Babel主要用于将现代JavaScript（ES6+）代码转译为兼容性更好的版
如何使用Three.js制作3D月球与星空效果软件工程师文艺前端 javascript 3d html
目录1.基本设置2.创建星空效果3.创建月球模型4.添加中文3D文字5.光照与相机配置6.动画与控制7.响应式布局8.结语在本文中，我们将一起学习如何利用Three.js实现一个3D月球与星空的效果，并添加一些有趣的元素，比如中文3D文字和互动功能。Three.js是一个强大的JavaScript库，它简化了WebGL的使用，使得在网页上进行3D图形渲染变得更加容易。我们将逐步分析代码，帮助大家理
Github 2024-06-20 开源项目日报 Top10 老孙正经胡说 github 开源 Github趋势分析开源项目 Python Golang
根据GithubTrendings的统计，今日(2024-06-20统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目4TypeScript项目4Rust项目2JavaScript项目1Dart项目1Java项目1Go项目1RustDesk:用Rust编写的开源远程桌面软件创建周期：1218天开发语言：Rust,Dart协议类型：GNUAfferoG
阮一峰的ES6文档（第一天） jackzhuoa es6 javascript 前端
目录ECMAScript6简介let和const命名let基本用法-块级作用域不存在变量提升不允许重复声明暂时性死区为什么需要块级作用域？原因一：内层变量可能会覆盖外层变量原因二：用来计数的循环遍历泄露为全局变量const基本用法-声明只读的常量与let命令相同点let和const使用建议ECMAScript6简介ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，
vue和Django快速创建项目 CCSBRIDGE 了解Vue vue.js 前端 javascript
一、VUE1.创建Vue3+JavaScript项目npmcreatevite@latest项目名称----templatevue创建Vue3+TypeScript项目npmcreatevite@latest项目名称----templatevue-ts2.然后cd项目名称npminstallnpminstallaxios#发送API请求npminstallpinia#Vue3推荐的状态管理库npm
OpenGL ES 文字渲染进阶--渲染中文字体字节流动 OpenGL ES 3.0 OpenGL 文字渲染 C++Android
旧文OpenGLES文字渲染方式有几种？一文中分别介绍了OpenGL利用Canvas和FreeType绘制文字的方法。无论采用哪种方式进行渲染，本质上原理都是纹理贴图：将带有文字的图像上传到纹理，然后进行贴图。渲染中文字体利用Canvas绘制中文字体和绘制其他字体在操作方式上没有区别，但是使用FreeType绘制中文字体，在编码方式、加载方式以及字体属性上面会有一些坑要踩，这里本人已经踩过，将在本
JavaScript前端性能优化技巧分享代码旅人博客前端 javascript 性能优化
在前端开发中，性能优化是一个持续不断的追求。随着Web应用的日益复杂，如何确保应用的流畅性和响应速度，成为了每个前端开发者必须面对的问题。JavaScript作为前端的核心语言，其性能优化更是至关重要。本文将分享一些JavaScript前端性能优化的技巧，帮助开发者提升Web应用的性能。一、减少DOM操作DOM（文档对象模型）操作是JavaScript中常见的性能瓶颈之一。频繁的DOM操作会导致浏
【Node-Red】Function节点教学零炻大礼包 Node-Red 笔记 node.js
本篇来讲在Node-Red中编写函数时用到的一个至关重要的节点：function。function节点允许消息运行JavaScript代码。其中部分内容来自官方文档翻译：function节点用户指南。Function节点教学1.变量定义2.返回值1）返回单条数据进阶1进阶22）返回多条数据3.其他变量定义1）数组定义buffer2.Array4.运算符1）算数运算符2）赋值运算符3）字符与运算符4
JavaScript 内置对象-Math对象難釋懷 javascript 开发语言
在JavaScript中，Math对象提供了一系列与数学相关的静态方法和属性，帮助开发者执行复杂的计算任务。无论是简单的算术运算还是高级的几何、统计计算，Math对象都能提供强大的支持。本文将详细介绍Math对象的主要功能及其使用方法。一、简介不同于其他全局对象，Math不是一个构造函数，而是一个静态对象。这意味着我们不能通过new关键字创建Math的实例，所有的属性和方法都必须直接调用Math来
java工厂模式 3213213333332132 java 抽象工厂
工厂模式有 1、工厂方法 2、抽象工厂方法。下面我的实现是抽象工厂方法, 给所有具体的产品类定一个通用的接口。 package 工厂模式; /** * 航天飞行接口 * * @Description * @author FuJianyong * 2015-7-14下午02:42:05 */ public interface SpaceF
nginx频率限制+python测试 ronin47 nginx 频率 python
部分内容参考：http://www.abc3210.com/2013/web_04/82.shtml 首先说一下遇到这个问题是因为网站被攻击，阿里云报警，想到要限制一下访问频率，而不是限制ip（限制ip的方案稍后给出）。nginx连接资源被吃空返回状态码是502，添加本方案限制后返回599，与正常状态码区别开。步骤如下：
java线程和线程池的使用 dyy_gusi ThreadPool thread Runnable timer
java线程和线程池一、创建多线程的方式 java多线程很常见，如何使用多线程，如何创建线程，java中有两种方式，第一种是让自己的类实现Runnable接口，第二种是让自己的类继承Thread类。其实Thread类自己也是实现了Runnable接口。具体使用实例如下： 1、通过实现Runnable接口方式 1 2
Linux 171815164 linux
ubuntu kernel http://kernel.ubuntu.com/~kernel-ppa/mainline/v4.1.2-unstable/ 安卓sdk代理 mirrors.neusoft.edu.cn 80 输入法和jdk sudo apt-get install fcitx su
Tomcat JDBC Connection Pool g21121 Connection
Tomcat7 抛弃了以往的DBCP 采用了新的Tomcat Jdbc Pool 作为数据库连接组件，事实上DBCP已经被Hibernate 所抛弃，因为他存在很多问题，诸如：更新缓慢，bug较多，编译问题，代码复杂等等。 Tomcat Jdbc P
敲代码的一点想法永夜-极光 java 随笔感想
入门学习java编程已经半年了,一路敲代码下来,现在也才1w+行代码量,也就菜鸟水准吧,但是在整个学习过程中,我一直在想,为什么很多培训老师,网上的文章都是要我们背一些代码?比如学习Arraylist的时候,教师就让我们先参考源代码写一遍,然
jvm指令集程序员是怎么炼成的 jvm 指令集
转自：http://blog.csdn.net/hudashi/article/details/7062675#comments 将值推送至栈顶时 const ldc push load指令 const系列该系列命令主要负责把简单的数值类型送到栈顶。(从常量池或者局部变量push到栈顶时均使用) 0x02 &nbs
Oracle字符集的查看查询和Oracle字符集的设置修改 aijuans oracle
本文主要讨论以下几个部分：如何查看查询oracle字符集、修改设置字符集以及常见的oracle utf8字符集和oracle exp 字符集问题。一、什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系。ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储，处理，检索数据。它使数据库工具，错误消息，排序次序，日期，时间，货
png在Ie6下透明度处理方法 antonyup_2006 css 浏览器 Firebug IE
由于之前到深圳现场支撑上线，当时为了解决个控件下载，我机器上的IE8老报个错，不得以把ie8卸载掉，换个Ie6,问题解决了，今天出差回来，用ie6登入另一个正在开发的系统，遇到了Png图片的问题，当然升级到ie8(ie8自带的开发人员工具调试前端页面JS之类的还是比较方便的，和FireBug一样，呵呵)，这个问题就解决了，但稍微做了下这个问题的处理。我们知道PNG是图像文件存储格式，查询资
表查询常用命令高级查询方法(二) 百合不是茶 oracle 分页查询分组查询联合查询
----------------------------------------------------分组查询 group by having --平均工资和最高工资 select avg(sal)平均工资,max(sal) from emp ; --每个部门的平均工资和最高工资
uploadify3.1版本参数使用详解 bijian1013 JavaScript uploadify3.1
使用：绑定的界面元素<input id='gallery'type='file'/>$("#gallery").uploadify({设置参数，参数如下}); 设置的属性： id: jQuery(this).attr('id'),//绑定的input的ID langFile: 'http://ww
精通Oracle10编程SQL(17)使用ORACLE系统包 bijian1013 oracle 数据库 plsql
/* *使用ORACLE系统包 */ --1.DBMS_OUTPUT --ENABLE:用于激活过程PUT,PUT_LINE,NEW_LINE,GET_LINE和GET_LINES的调用 --语法：DBMS_OUTPUT.enable(buffer_size in integer default 20000); --DISABLE:用于禁止对过程PUT,PUT_LINE,NEW
【JVM一】JVM垃圾回收日志 bit1129 垃圾回收
将JVM垃圾回收的日志记录下来，对于分析垃圾回收的运行状态，进而调整内存分配(年轻代，老年代，永久代的内存分配)等是很有意义的。JVM与垃圾回收日志相关的参数包括： -XX:+PrintGC -XX:+PrintGCDetails -XX:+PrintGCTimeStamps -XX:+PrintGCDateStamps -Xloggc -XX:+PrintGC 通
Toast使用白糖_ toast
Android中的Toast是一种简易的消息提示框，toast提示框不能被用户点击，toast会根据用户设置的显示时间后自动消失。创建Toast 两个方法创建Toast makeText(Context context, int resId, int duration) 参数：context是toast显示在
angular.identity boyitech AngularJS AngularJS API
angular.identiy 描述: 返回它第一参数的函数. 此函数多用于函数是编程. 使用方法: angular.identity(value); 参数详解: Param Type Details value * to be returned. 返回值: 传入的value 实例代码: <!DOCTYPE HTML>
java-两整数相除，求循环节 bylijinnan java
import java.util.ArrayList; import java.util.List; public class CircleDigitsInDivision { /** * 题目：求循环节，若整除则返回NULL，否则返回char*指向循环节。先写思路。函数原型：char*get_circle_digits(unsigned k,unsigned j)
Java 日期周年 Chen.H java C++c C#
/** * java日期操作(月末、周末等的日期操作) * * @author * */ public class DateUtil { /** */ /** * 取得某天相加(减)後的那一天 * * @param date * @param num *
[高考与专业]欢迎广大高中毕业生加入自动控制与计算机应用专业 comsci 计算机
不知道现在的高校还设置这个宽口径专业没有,自动控制与计算机应用专业,我就是这个专业毕业的,这个专业的课程非常多,既要学习自动控制方面的课程,也要学习计算机专业的课程,对数学也要求比较高.....如果有这个专业,欢迎大家报考...毕业出来之后,就业的途径非常广..... 以后
分层查询（Hierarchical Queries） daizj oracle 递归查询层次查询
Hierarchical Queries If a table contains hierarchical data, then you can select rows in a hierarchical order using the hierarchical query clause: hierarchical_query_clause::= start with condi
数据迁移 daysinsun 数据迁移
最近公司在重构一个医疗系统，原来的系统是两个.Net系统，现需要重构到java中。数据库分别为SQL Server和Mysql，现需要将数据库统一为Hana数据库，发现了几个问题，但最后通过努力都解决了。 1、原本通过Hana的数据迁移工具把数据是可以迁移过去的，在MySQl里面的字段为TEXT类型的到Hana里面就存储不了了，最后不得不更改为clob。 2、在数据插入的时候有些字段特别长
C语言学习二进制的表示示例 dcj3sjt126com c basic
进制的表示示例 # include <stdio.h> int main(void) { int i = 0x32C; printf("i = %d\n", i); /* printf的用法 %d表示以十进制输出 %x或%X表示以十六进制的输出 %o表示以八进制输出 */ return 0; }
NsTimer 和 UITableViewCell 之间的控制 dcj3sjt126com ios
情况是这样的: 一个UITableView, 每个Cell的内容是我自定义的 viewA viewA上面有很多的动画, 我需要添加NSTimer来做动画, 由于TableView的复用机制, 我添加的动画会不断开启, 没有停止, 动画会执行越来越多. 解决办法: 在配置cell的时候开始动画, 然后在cell结束显示的时候停止动画查找cell结束显示的代理
MySql中case when then 的使用 fanxiaolong casewhenthenend
select "主键", "项目编号", "项目名称","项目创建时间", "项目状态","部门名称","创建人" union (select pp.id as "主键", pp.project_number as &
Ehcache（01）——简介、基本操作 234390216 cache ehcache 简介 CacheManager crud
Ehcache简介目录 1 CacheManager 1.1 构造方法构建 1.2 静态方法构建 2 Cache 2.1&
最容易懂的javascript闭包学习入门 jackyrong JavaScript
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊
提升网站转化率的四步优化方案 php教程分享数据结构 PHP 数据挖掘 Google 活动
网站开发完成后,我们在进行网站优化最关键的问题就是如何提高整体的转化率，这也是营销策略里最最重要的方面之一，并且也是网站综合运营实例的结果。文中分享了四大优化策略：调查、研究、优化、评估，这四大策略可以很好地帮助用户设计出高效的优化方案。 PHP开发的网站优化一个网站最关键和棘手的是，如何提高整体的转化率，这是任何营销策略里最重要的方面之一，而提升网站转化率是网站综合运营实力的结果。今天，我就分
web开发里什么是HTML5的WebSocket？ naruto1990 Web html5 浏览器 socket
当前火起来的HTML5语言里面，很多学者们都还没有完全了解这语言的效果情况，我最喜欢的Web开发技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看6个HTML5教程介绍里的 WebSocket API：它可用于客户端、服
Socket初步编程——简单实现群聊 Everyday都不同 socket 网络编程初步认识
初次接触到socket网络编程，也参考了网络上众前辈的文章。尝试自己也写了一下，记录下过程吧：服务端：（接收客户端消息并把它们打印出来） public class SocketServer { private List<Socket> socketList = new ArrayList<Socket>(); public s
面试：Hashtable与HashMap的区别（结合线程） toknowme
昨天去了某钱公司面试，面试过程中被问道 Hashtable与HashMap的区别？当时就是回答了一点，Hashtable是线程安全的，HashMap是线程不安全的，说白了，就是Hashtable是的同步的，HashMap不是同步的，需要额外的处理一下。今天就动手写了一个例子，直接看代码吧 package com.learn.lesson001; import java
MVC设计模式的总结 xp9802 设计模式 mvc 框架 IOC
随着Web应用的商业逻辑包含逐渐复杂的公式分析计算、决策支持等，使客户机越来越不堪重负，因此将系统的商业分离出来。单独形成一部分，这样三层结构产生了。其中‘层’是逻辑上的划分。三层体系结构是将整个系统划分为如图2.1所示的结构[3] （1）表现层（Presentation layer）：包含表示代码、用户交互GUI、数据验证。该层用于向客户端用户提供GUI交互，它允许用户

飞机大战小游戏

你可能感兴趣的:(javascript,canvas)