【CSON原创】HTML5游戏框架cnGameJS开发实录（游戏场景对象）

返回目录

1.什么时候需要场景对象？

　　场景对象有区别于上一篇介绍的地图对象，它们分别应用于不同类型的游戏。之前的地图对象应用于格子类的游戏，例如推箱子，坦克大战。而本节介绍的场景对象，则适用于拥有特定场景的游戏，例如超级玛丽，恐龙快打等。这类游戏通常在2d场景内控制一个玩家对象，随着玩家的移动，场景跟着移动。

2.场景示例：

效果：（左右键控制超级玛丽的移动）

 


代码：

<body>
<div><canvas id="gameCanvas">请使用支持canvas的浏览器查看</canvas></div>
</body>
<script src="cnGame_v1.0.js"></script>
<script>
var Src="http://images.cnblogs.com/cnblogs_com/Cson/290336/o_player.png";
var background="background.png";

/* 初始化 */
cnGame.init('gameCanvas',{width:500,height:400});
var floorY=cnGame.height-40;
var gameObj=(function(){
    /* 玩家对象 */
    var player=function(options){
        this.init(options);    
        this.speedX=0;
        this.moveDir;
        this.isJump=false;
    }
    cnGame.core.inherit(player,cnGame.Sprite);
    player.prototype.initialize=function(){
        this.addAnimation(new cnGame.SpriteSheet("playerRight",Src,{frameSize:[50,60],loop:true,width:150,height:60}));
        this.addAnimation(new cnGame.SpriteSheet("playerLeft",Src,{frameSize:[50,60],loop:true,width:150,height:120,beginY:60}));
    }
    player.prototype.moveRight=function(){
        if(cnGame.core.isUndefined(this.moveDir)||this.moveDir!="right"){
            this.moveDir="right";
            this.speedX<0&&(this.speedX=0);
            this.setMovement({aX:10,maxSpeedX:15});
            this.setCurrentAnimation("playerRight");
        }
    }
    player.prototype.moveLeft=function(){
        if(cnGame.core.isUndefined(this.moveDir)||this.moveDir!="left"){
            this.moveDir="left";
            this.speedX>0&&(this.speedX=0);
            this.setMovement({aX:-10,maxSpeedX:15});
            this.setCurrentAnimation("playerLeft");
        }
    }
    player.prototype.stopMove=function(){
        
        if(this.speedX<0){
            this.setCurrentImage(Src,0,60);
        }
        else if(this.speedX>0){
            this.setCurrentImage(Src);
        }    
    
        this.moveDir=undefined;
        this.resetMovement();
        
        
    }
    player.prototype.update=function(){
        player.prototype.parent.prototype.update.call(this);//调用父类update
if(cnGame.input.isPressed("right")){
            this.moveRight();    
        }
        else if(cnGame.input.isPressed("left")){
            this.moveLeft();
        }
        else{
            this.stopMove();
        }
        
        
    }

    return {
        initialize:function(){
            cnGame.input.preventDefault(["left","right","up","down"]);
            this.player=new player({src:Src,width:50,height:60,x:0,y:floorY-60});
            this.player.initialize();
            this.background=new cnGame.View({src:background,player:this.player,imgWidth:2301});
            this.background.centerPlayer(true);
            this.background.insideView(this.player,"x");
        },
        update:function(){
            this.player.update();
            this.background.update([this.player]);
        },
        draw:function(){
            this.background.draw();
            this.player.draw();
            
        }

    };
})();
cnGame.loader.start([Src,background],gameObj);
</script>

3.代码实现：
　　要构造一个场景，首先需要一张足够宽的背景图片，当player向右移动时，使player始终处于背景中点，player的速度转换为背景向相反方向移动的速度。首先看初始化函数：

        /**
         *初始化
        **/
        init:function(options){
            /**
             *默认对象
            **/
            var defaultObj={
                width:cg.width,
                height:cg.height,
                imgWidth:cg.width,
                imgHeight:cg.height,
                x:0,
                y:0
                
            }
            options=options||{};
            options=cg.core.extend(defaultObj,options);
            this.player=options.player;
            this.width=options.width;
            this.height=options.height;
            this.imgWidth=options.imgWidth;
            this.imgHeight=options.imgHeight;
            this.centerX=this.width/2;
            this.src=options.src;
            this.x=options.x;
            this.y=options.y;
            this.insideArr=[];
            this.isLoop=false;;
            this.isCenterPlayer=false;
            this.onEnd=options.onEnd;
            
        },

　　用户传入的参数除了xy以及尺寸外，另外还有三个参数，一个参数是设置是否把玩家对象置于中心，只移动背景而不移动玩家。如果要实现上面的背景移动效果，该参数要设置为true。另一个参数是设置是否循环。如果设置为循环，在背景移动到极点后，会重新回到初始位置。最后一个参数是onEnd，如果设置为非循环，那么背景移动到极点后，会触发该回调函数。

　　场景对象的重点在于update方法：

        /**
         *背景移动时的更新
        **/
        update:function(spritelist){//传入所有sprite的数组
            if(this.isCenterPlayer){
                if(this.player.x>this.centerX){
                    if(this.x<this.imgWidth-this.width){
                        var marginX=this.player.x-this.centerX;    
                        this.x+=marginX;
                        if(spritelist){
                            for(var i=0,len=spritelist.length;i<len;i++){
                                if(spritelist[i]==this.player){
                                    spritelist[i].x=this.centerX;
                                }
                                else{
                                    spritelist[i].x-=marginX;    
                                }
                            }
                        }
                    }
                    else if(this.isLoop){
                        if(spritelist){
                            for(var i=0,len=spritelist.length;i<len;i++){
                                if(spritelist[i]!=this.player){
                                    spritelist[i].move(this.imgWidth-this.width);
                                }
                            }
                        }
                        this.x=0;
                    }
                    else{
                        this.onEnd&&this.onEnd();
                    }
                }
            }
            for(var i=0,len=this.insideArr.length;i<len;i++){
                inside.call(this,this.insideArr[i]);
            }
        },

　　该方法首先判断player对象是否已经超过场景中心，如果已经超过，则计算超出的距离，并且把player固定在场景中心，超出的距离设置为背景向相反方向移动的距离与除了player外其他sprite向相反方向移动的距离，这样的话就只有背景移动和其他sprite对象移动，player固定。如果是循环的话，则在超出移动范围后重置背景和其他sprite的x坐标。如果非循环，则在移动结束后调用onEnd回调函数。另外如果需要限制player始终在显示区域内，还可以调用insideView方法。

 

附上场景对象所有代码：

/**
 *
 *场景
 *
**/
cnGame.register("cnGame",function(cg){
    
    /**
     *使指定对象在可视区域view内
    **/
    var inside=function(sprite){
        var dir=sprite.insideDir;
        if(dir!="y"){
            if(sprite.x<0){
                sprite.x=0;
            }
            else if(sprite.x>this.width-sprite.width){
                sprite.x=this.width-sprite.width;
            }
        }
        if(dir!="x"){
            if(sprite.y<0){
                sprite.y=0;
            }
            else if(sprite.y>this.height-sprite.height){
                sprite.y=this.height-sprite.height;
            }
        }
            
    }
    
    var view=function(options){
        this.init(options);
        
    }
    view.prototype={
    
        /**
         *初始化
        **/
        init:function(options){
            /**
             *默认对象
            **/
            var defaultObj={
                width:cg.width,
                height:cg.height,
                imgWidth:cg.width,
                imgHeight:cg.height,
                x:0,
                y:0
                
            }
            options=options||{};
            options=cg.core.extend(defaultObj,options);
            this.player=options.player;
            this.width=options.width;
            this.height=options.height;
            this.imgWidth=options.imgWidth;
            this.imgHeight=options.imgHeight;
            this.centerX=this.width/2;
            this.src=options.src;
            this.x=options.x;
            this.y=options.y;
            this.insideArr=[];
            this.isLoop=false;;
            this.isCenterPlayer=false;
            this.onEnd=options.onEnd;
            
        },
        /**
         *使player的位置保持在场景中点之前的移动背景
        **/
        centerPlayer:function(isLoop){
            isLoop=isLoop||false;
            this.isLoop=isLoop;
            this.isCenterPlayer=true;
        },
        /**
         *使对象的位置保持在场景内
        **/
        insideView:function(sprite,dir){//dir为限定哪个方向在view内，值为x或y，不传则两个方向皆限定
            if(cg.core.isArray(sprite)){
                for(var i=0,len=sprite.length;i<len;i++){
                    arguments.callee.call(this,sprite[i],dir);
                }
            }
            else{
                sprite.insideDir=dir;
                this.insideArr.push(sprite);
            }
        },
        /**
         *背景移动时的更新
        **/
        update:function(spritelist){//传入所有sprite的数组
            if(this.isCenterPlayer){
                if(this.player.x>this.centerX){
                    if(this.x<this.imgWidth-this.width){
                        var marginX=this.player.x-this.centerX;    
                        this.x+=marginX;
                        if(spritelist){
                            for(var i=0,len=spritelist.length;i<len;i++){
                                if(spritelist[i]==this.player){
                                    spritelist[i].x=this.centerX;
                                }
                                else{
                                    spritelist[i].x-=marginX;    
                                }
                            }
                        }
                    }
                    else if(this.isLoop){
                        if(spritelist){
                            for(var i=0,len=spritelist.length;i<len;i++){
                                if(spritelist[i]!=this.player){
                                    spritelist[i].move(this.imgWidth-this.width);
                                }
                            }
                        }
                        this.x=0;
                    }
                    else{
                        this.onEnd&&this.onEnd();
                    }
                }
            }
            for(var i=0,len=this.insideArr.length;i<len;i++){
                inside.call(this,this.insideArr[i]);
            }
        },
        /**
         *绘制场景
        **/
        draw:function(){
            cg.context.drawImage(cg.loader.loadedImgs[this.src],this.x,this.y,this.width,this.height,0,0,this.width,this.height);
        }
        
        
    }
    this.View=view;
});

你可能感兴趣的:(html5)

  • 从HTML4到HTML5+CSS3，如何快速掌握？(有老版HTML基础或经验) 唐骁虎 html前端
    从HTML4.0到HTML5+CSS3的升级是Web开发技术的一次重要迭代，两者在语法、功能、兼容性等方面存在显著差异。以下是具体异同点、学习注意事项及快速掌握方法：一、HTML5与HTML4.0的核心差异语义化标签HTML5新增：、、、、等，使代码结构更清晰，利于SEO和可维护性。HTML4.0依赖：主要用配合class/id实现布局，语义性较弱。多媒体支持HTML5原生支持：、标签，无需依赖F
  • Python实例题：基于 Flask 的博客系统 狐凄 实例python开发语言
    目录Python实例题题目要求：解题思路：代码实现：1.base.html2.index.html3.post.html4.create_post.html5.login.html6.register.htmlPython实例题题目基于Flask的博客系统要求：使用Flask框架构建一个简单的博客系统。实现用户认证（注册、登录、注销）。支持博客文章的创建、编辑、删除和查看。使用SQLite数据库存
  • H5液态玻璃背景效果实现 木木黄木木 html5cssjavascript
    H5液态玻璃背景效果实现教程在现代网页设计中，动态和交互式的背景效果可以大大提升用户体验。本教程将详细介绍如何使用HTML5技术实现一个美观、流畅的液态玻璃背景效果，无论你是初学者还是有经验的开发者，都能轻松掌握。效果预览本教程提供了两种实现方式：基础版本：使用Canvas2DAPI实现，适合初学者，兼容性好高级版本：使用WebGL和GLSL着色器实现，效果更加逼真，但复杂度更高两个版本都具有以下
  • 如何在编辑器wangEditor中完美复制粘贴WORD内容？ M_Snow 编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • 网页版wangEditor如何实现WORD图片的高效粘贴？ M_Snow wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdf
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • html5-video标签做视频加密的方法 视频砖家 HTML5视频加密视频安全视频加密文件加密视频安全
    html5-video标签做视频加密的方法/**在这里可以进行权限验证等操作*///创建文件对象Filef=newFile("E:\\test.mp4");//获取文件名称StringfileName=f.getName();//导出文件Stringagent=getRequest().getHeader("User-Agent").toUpperCase();InputStreamfis=nul
  • 视频云平台HTML5播放器使用文档(CuPlayer平台) 阿酷tony 酷播云（免费云存储）音视频html5前端
    视频云平台HTML5播放器使用文档(CuPlayer平台)varplayer=polyvPlayer({wrap:'#player',width:800,height:533,vid:'88083abbf5535a4d7b4d8614427559e0_8',});选项参数类型默认值说明wrapstring/HTMLElement-页面上存在需要载入播放器的DOM元素或css选择器widthnumb
  • Html5播放器禁止拖动播放器进度条（教学场景）
    禁用视频课程进度条的拖动功能，主要是为了强制学员按照课程设计的顺序观看内容，防止跳过关键知识点，从而保证学习效果和课程的完整性。这在以下几种教育场景中尤为常见和有意义。演示地址：禁用拖动视频进度条01.防止应试作弊：在一些需要观看视频才能解锁下一章节或完成测试的场景中，禁用拖动能确保学员真正观看了教学内容，而不是仅仅为了完成任务而快进。02.强制观看基础知识：对于那些知识点层层递进的课程（例如编程
  • html5路由如何在nginx上部署（vite+vue3） 大眼小夫 html5nginx前端
    我们知道前端常用的有Hash模式和html5模式的路由，hash模式在nginx上部署不需要额外的操作，而html5模式则需要额外设置，这里介绍下如何在nginx根地址（location/{}）下部署和在非根地址上（location/admin{}）部署。在这之前，我先说一下为什么html5路由需要在nginx上配置，我们知道，vue-router就是用来处理路由的，我我们在浏览器上输入地址时，这
  • 研一自救指南 - 06.HTML5系统学习 东部欧安时 html5
    前情提要：研一自救指南-01.java面向对象（黑马）研1自救指南-02.Java+AI智能辅助编程（黑马）研一自救指南-03.面向面经预习（前端）研一自救指南-04.面试狂刷（前端日常实习）研一自救指南-05.JavaScript系统学习基于W3school的HTML5学习1.html元素html链接点击这里//图像换行横线2.html样式背景颜色、对齐方式设置字体、颜色、大小3.文本格式化Th
  • 【Rust】——使用消息在线程之间传递数据 Y小夜 Rust（官方文档重点总结）rust开发语言后端
    博主现有专栏：C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，Python机器学习等主页链接：Y小夜-CSDN博客目录信道与所有权转移发送多个值并观察接收者的等待通过克隆发送者来创建多个生产者学
  • JavaWeb核心技术系列教程(04)——Servlet入门详解及原理剖析 谷哥的小弟 Servlet原理详解
    C语言自学完备手册(33篇)Android多分辨率适配框架JavaWeb核心技术系列教程HTML5前端开发实战系列教程MySQL数据库实操教程(35篇图文版)推翻自己和过往——自定义View系列教程(10篇)走出思维困境，踏上精进之路——Android开发进阶精华录讲给Android程序员看的前端系列教程(40集免费视频教程
  • 在使用 HTML5 的 ＜video＞ 标签嵌入视频时，有时会遇到无法播放 MP4 文件的问题 蹦极的考拉 html5音视频前端
    原因分析：只能播放声音，却无法播放视频。这通常是由于视频编码格式不兼容导致的。虽然MP4是一种常见的视频格式，但它包含多种编码方式，并非所有编码方式都受HTML5支持。解决方案：确认视频编码格式：使用视频播放器或专门的工具查看视频文件的属性，确认其编码格式。HTML5支持H.264编码的MP4文件（MPEG-4），VP8编码的WebM文件和Theora编码的Ogg文件。转换视频编码格式：如果视频编
  • html播放mp4不显示画面,浏览器播放mp4格式视频时只有声音看不到画面的原因及解决方法（精）... ZW9 html播放mp4不显示画面
    做HTML5网页，要播放视频，视频格式为mp4，结果浏览器只能听到声音，看不到画面。反复测试，多个浏览器均出现此问题。刚开始以为视频的格式不对，我是从MOV转的MP4格式，反复确认嵌入的视频确实是mp4格式的，可是试了好多次结果都一样，只有声音不显示图像，搞了一天，直接搞懵了。在网上到处搜索，最终解决。问题描述：在html5页面中嵌入视频，用浏览器打开页面只听到声音却不显示图像。页面代码：请升级浏
  • 记录解决：video标签视频不能播放，但是能下载下来播放的问题 都是好猫 问题解决
    参考文章：关于html5的video标签不能播放视频的问题及解决方法使用html中，为什么看不了视频？
  • MP4视频无法在H5网页中播放 lsf1192354203 音视频前端html5
    MP4视频在本地可以播放，但是在html5的video多媒体标签不能正常播放，不显示图像，其实是编码的原因，虽然格式是MP4，但是html5只支持H.264的编码格式。关于html5的video标签知识：html4协议做网站时我们在网页播放视频使用flash播放，要么就是嵌入式页面实现html5网页可以使用video标签，使得多媒体文件很方便的在网页中播放关于video标签所支持的视频格式和编码：
  • H5新增特性大全 小夏啥也不会 html中的新特性videoaudiocsshtml5前端
    一、HTML概述1.1什么是HTMLHTML5是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5简单易学，HTML5是下一代HTML标准。1.2HTML中的新特性用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如a
  • 网页编辑器粘贴WORD图片时保持原格式的秘诀 M_Snow 编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • CMS、整站程序集成百度UEditor：实现WORD内容一键导入 全武凌(荆门泽优) 百度wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • H5在小程序领域的地图应用开发指南 小程序开发2020 小程序开发宝典小程序ai
    H5在小程序领域的地图应用开发指南关键词：H5、小程序、地图应用开发、JavaScript、HTML5、CSS3、API摘要：本文围绕H5在小程序领域的地图应用开发展开，详细阐述了相关的背景知识、核心概念、算法原理、数学模型、实战案例、应用场景、工具资源等内容。通过逐步分析推理，为开发者提供了全面且深入的开发指南，助力开发者掌握H5在小程序中开发地图应用的技术和方法，应对开发过程中的各种挑战。1.
  • java/.net跨平台UI浏览器SDK，浏览器控件开发包分析 专注VB编程开发20年 ui跨平台浏览器linuxcefminiblink
    在Linux系统中，虽然没有完全等同于安卓WebView的内置浏览器SDK，但存在多种基于开源浏览器引擎的解决方案，支持通过Java代码控制网页加载和执行JavaScript。以下是具体实现方案和技术细节：一、核心技术方案对比方案名称核心引擎跨平台支持Java集成方式功能完整性开源协议JxBrowserChromiumLinux/macOS/Windows原生JavaAPI完整（HTML5/JS/
  • 如何实现VUE2中wangEditor编辑器对WORD文档的跨平台复制？ M_Snow 编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 如何解决VUE2中wangEditor编辑器粘贴WORD文档时的图片丢失问题？ 全武凌(荆门泽优) 编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • HTML5简介 veminhe 前端HTMLhtml5前端html
    1、h5简介，参考：HTML5教程|菜鸟教程2、第一个例子实践：菜鸟教程(runoob.com)你的浏览器不支持video标签。支持视频播放。
  • 探索经典与创新的交汇：Blockrain.js —— 现代化的HTML5俄罗斯方块游戏引擎 怀琪茵Crown
    探索经典与创新的交汇：Blockrain.js——现代化的HTML5俄罗斯方块游戏引擎blockrain.jsHTML5TetrisGameforjQuery项目地址:https://gitcode.com/gh_mirrors/bl/blockrain.js在数字娱乐的浩瀚宇宙中，有一种简单而永恒的游戏——俄罗斯方块。今天，我们要介绍一款以现代技术重新诠释这一经典的开源项目——Blockrain
  • Excel数据导入网页的excel导入全攻略 路过了忘了 excelumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdf
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 如何将WORD文档中的图片转存到wangEditor编辑器中？ M_Snow word编辑器umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • 前端wangEditor如何实现WORD文档的完整导入？ 全武凌(荆门泽优) 前端wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • 基于HTML5的“购物商城”的设计与实现（任务书） shejizuopin html5前端html购物商城毕业设计源码任务书
    大学本科毕业设计（论文）任务书学院计算机学院专业班级21级网络工程技术本科1班姓名学号指导教师指导教师职称毕业设计（论文）题目基于HTML5的“购物商城”的设计与实现毕业设计（论文）类型毕业设计☑毕业论文□调研报告□作品展示□案例分析□其他□毕业设计（论文）开展时间2024年10月18日至2025年5月1日共28周毕业设计（论文）要求论文(或设计)的专业方向、基本理论及设计内容：【要求写明本设计所
  • html5贝塞尔曲线,HTML5 Canvas 绘制贝塞尔曲线 Bezier and quadratic curves weixin_39648492 html5贝塞尔曲线
    贝塞尔曲线：它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。方法：quadraticCurveTo(cp1x,cp1y,x,y)bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)参数x和y是终点坐标，cp1x和cp1y是第一个控制点的坐标，cp2x和cp2y是第二个的。用贝塞尔曲线绘制聊天气泡说明用贝塞尔曲线绘制聊天气泡代码functiondraw(){var
  • redis学习笔记——不仅仅是存取数据 Everyday都不同 returnSourceexpire/delincr/lpush数据库分区redis
    最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷）   1、关于JedisPool.returnSource(Jedis jeids)   这个方法是从red
  • SQL性能优化-持续更新中。。。。。。 atongyeye oraclesql
    1 通过ROWID访问表--索引 你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表
  • [JAVA语言]JAVA虚拟机对底层硬件的操控还不完善 comsci JAVA虚拟机
         如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？ 那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n
  • lvs- real 男人50 LVS
    #!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #.  /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta
  • 生成公钥和私钥 oloz DSA安全加密
    package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil {
  • UIView 中加入的cocos2d，背景透明 374016526 cocos2dglClearColor
    要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
  • mysql常用命令 香水浓 mysql
    连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy
  • 我的架构经验系列文章 - 后端架构 - 系统层面 agevs JavaScriptjquerycsshtml5
    系统层面： 高可用性 所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
  • 利用ant进行远程tomcat部署 aijuans tomcat
    在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色
  • 获取复利总收入 baalwolf 获取
           public static void main(String args[]){         int money=200;         int year=1;         double rate=0.1; &
  • eclipse.ini解释 BigBird2012 eclipse
    大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th
  • AngularJS实现分页功能 bijian1013 JavaScriptAngularJS分页
            对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。   &nbs
  • [Maven学习笔记三]Maven archetype bit1129 ArcheType
    archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等.   mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式，   mvn archetype   1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
  • 【Java命令三】jps bit1129 Java命令
    jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看   [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:
  • ZABBIX2.2 2.4 等各版本之间的兼容性 ronin47
    zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点 客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
  • unity 3d还是cocos2dx哪个适合游戏？ brotherlamp unity自学unity教程unity视频unity资料unity
    unity 3d还是cocos2dx哪个适合游戏？ 问：unity 3d还是cocos2dx哪个适合游戏？ 答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2，
  • 百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序 bylijinnan java算法面试百度招聘
    import java.util.Arrays; /** * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(n*lgn)。
  • 获取checkbox复选框的值 chiangfai checkbox
    <title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据
  • MySQLdb用户指南 chenchao051 mysqldb
    原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb
  • HIVE 窗口及分析函数 daizj hive窗口函数分析函数
    窗口函数应用场景： （1）用于分区排序 （2）动态Group By （3）Top N （4）累计计算 （5）层次查询 一、分析函数 用于等级、百分点、n分片等。 函数             说明 RANK()     &nbs
  • PHP ZipArchive 实现压缩解压Zip文件 dcj3sjt126com PHPzip
    PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。 一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11
  • 精彩英语贺词 dcj3sjt126com 英语
    I'm always here              我会一直在这里支持你                &nb
  • 基于Java注解的Spring的IoC功能 e200702084 javaspringbeanIOCOffice
                                      
  • java模拟post请求 geeksun java
    一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。 此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon
  • Swift语法之 ---- ?和!区别 hongtoushizi ?swift!
    转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html   Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //
  • centos7安装jdk1.7 jisonami jdkcentos
    安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量 在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib
  • 数据源架构模式之数据映射器 home198979 PHP架构数据映射器datamapper
    前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。   一、概念 数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb
  • 在Python中使用MYSQL pda158 mysqlpython
    缘由 　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到 数据库中。 　　了解到 Python在这方面有优势，便选用之。 　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里 记录一下，大家共勉。 　　 python中mysql的调用 　　 百度之后能够通过MySQLdb进行数据库操作。
  • 单例模式 hxl1988_0311 java单例设计模式单件
    package com.sosop.designpattern.singleton; /* * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * */ /** * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
  • 27种迹象显示你应该辞掉程序员的工作 vipshichg 工作
    1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他