thml5+js 实现简单的2d引擎

最新推荐文章于 2022-09-28 13:53:44 发布
最新推荐文章于 2022-09-28 13:53:44 发布
阅读量599 收藏
点赞数 2
分类专栏： web前端 文章标签： javascript html js canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clzmin/article/details/71773870
版权

没错，我就是个标题党，被骗进来来了吧。。。大笑大笑。

说是个引擎有点夸张，这只是一个小小的小玩意儿。

好了，不 che dan 了。 


开始正文吧：

先上效果，有兴趣才有看下去的动力。

其实效果也一般啦。。碰撞检查还是有点问题，还请大神们指出。


接下来就是代码了，有点长，这代表我没有藏着掖着。。（就你这垃圾玩意还想藏着）


第一个是一个公用的文件，核心功能都在这里面

/* creat by clzmin
   2016.07.30
   canvas frameWork
*/

/*数据层
T:工具类
P:图形类*/
(function(window){
     //工具部分 //
   var T={
      Vector2:function(x,y){
        if(x){
          this.x=x;
        }else{
          this.x=0;
        }
        if(y){
          this.y=y;
        }else{
          this.y=0;
        } 
         this.Distance=function(otherVec2){
          if(otherVec2 instanceof T.Vector2){
               return Math.sqrt((this.x-otherVec2.x)*(this.x-otherVec2.x)+(this.y-otherVec2.y)*(this.y-otherVec2.y));
           }else{
            return -1;
           }
         }
         this.MultiDistance=function(otherVec2){
            if(otherVec2 instanceof T.Vector2){
               return (this.x-otherVec2.x)*(this.x-otherVec2.x)+(this.y-otherVec2.y)*(this.y-otherVec2.y);
           }else{
            return -1;
           }
         }
         this.Rotation=function(sin,cos){
              var temp=new T.Vector2(); 
              temp.x = this.x * cos - this.y * sin;
              temp.y = this.y * cos + this.x * sin;
              return temp;
         }
      }
   }
  /  对象部分 /
       var objcount=0;
       var AllObj=new Array();
       var CanSeeObj=new Array();
    //vanvas类中自己定义的物体类
    var P={
        //参数顺序: type 
       SpuerObj:function(){
         objcount++;
        //初始化值
        if(arguments[0])
         this.ObjType=arguments[0];
        else  
         this.ObjType="SpuerObj";
         this.id=objcount;
         this.IsActive=true;
         //全局操作
         AllObj.push(this);
       
         this.drawSelf=function(){}
         this.IsSelf=function(){}
         //释放该对象
         this.Destroy=function(){
          for(var i=0,k=AllObj.length;i<k;i++){
                if(AllObj[i].id && AllObj[i].id==this.id){
                   AllObj[i]=null;
                   AllObj.splice(i, 1);
                   break;
                }
          }
          objcount--;
         }

       },
       Line:function(start,end){
            P.SpuerObj.call(this,"Line");
             if(start instanceof T.Vector2 && end instanceof T.Vector2){
                 this.start=start;
                 this.end=end;
             }
             this.drawSelf=function(canvas){
              canvas.drawLine(this.start.x,this.start.y, this.end.x, this.end.y);
             }
             this.isSelf=function(mousePosition){
                if(mousePosition instanceof T.Vector2 ){
                     var rate=(this.end.y-this.start.y)/(this.end.x-this.start.x);
                     var mouserate=(mousePosition.y-this.start.y)/(mousePosition.x-this.start.x);
                     return Math.abs(mouserate-rate)<0.00001?true:false;
                }
                return false;
             }

       },
       Circle:function(position,reduice){
          P.SpuerObj.call(this,"Circle");
         if(position && position instanceof T.Vector2 ){
              this.position= position;
         }else{
              this.position= new T.Vector2(0,0);
         }
          if( reduice){
           this.reduice=reduice;
          }else{
             this.reduice=1;
          }
          this.drawSelf=function(canvas){
              canvas.drawCircle(this.position.x,this.position.y,this.reduice,0,2*Math.PI,true);
          }

          this.IsSelf=function(mousePosition){
               if(mousePosition instanceof T.Vector2 ){
                  var distancore= Math.pow(this.position.x-mousePosition.x, 2)+ Math.pow(this.position.y-mousePosition.y, 2);
                  if(distancore>Math.pow(this.reduice,2))return false;
                  else return true;
               }
          }
          this.CheckColider=function(otherCircle){
              if(otherCircle.ObjType=="Circle"){
                  var reduicedistance=(otherCircle.reduice+this.reduice)*(otherCircle.reduice+this.reduice);
                  var multidistance = this.position.MultiDistance(otherCircle.position);
                  if( multidistance!=-1 && multidistance <= reduicedistance) return true;
                  else return false;
              }else{

                return false;
              }

          }
       },
       Rect:function(position,width,height){
           P.SpuerObj.call(this,"Rect");
          if(position instanceof T.Vector2)
             this.position= position;
           this.width=width;
           this.height=height;
           this.startPosition=new T.Vector2(this.position.x-this.width*0.5,this.position.y+this.height*0.5);
           this.drawSelf=function(canvas,self){
              canvas.drawRect(this.startPosition.x,this.startPosition.y,this.width,this.height);
          }
       },
       Triangle:function(a,b,c){
          P.SpuerObj.call(this,"Triangle");
            if(a instanceof T.Vector2 && b instanceof T.Vector2 && c instanceof T.Vector2){
               this.a=a;
               this.b=b;
               this.c=c;
            }
            
            this.drawSelf=function(canvas){
              canvas.drawLine(this.a.x,this.a.y,this.b.x,this.b.y);
              canvas.drawLine(this.b.x,this.b.y,this.c.x,this.c.y);
              canvas.drawLine(this.c.x,this.c.y,this.a.x,this.a.y);
          }   
       }
    }
    window.ObjData={
        allObj:AllObj,
        CanvasObj:P,
        CanvasTool:T
    }
})(window);


/*行为层
  C:全局配置
*/
(function(window) {
   // version1.0 /
	var context;
  var canvasElemnet;
  var frmaquery= Math.ceil(1000/30);
  var C={
    width:0,
    height:0,
    top:0,
    left:0
  }
	function canvas(id) {
		return new canvas.prototype.inte(id);
	}
	canvas.prototype = {

    context:context,

    Config:C,

		inte: function(id) {
			if (id && typeof id === "string"&& document.getElementById(id)) {
				 canvasElemnet = document.getElementById(id);
         C.width=canvasElemnet.width;
         C.height=canvasElemnet.height;
         UpdataTopAndLeft(canvasElemnet);
         OnScroll();
				if (canvasElemnet.nodeName.toLowerCase()=="canvas") {
					context=canvasElemnet.getContext("2d");
				}else throw new Error("search canvas is errro");
			}else throw new Error("id error");
		},

		drawLine:function(Sx,Sy,Ex,Ey,width,color,lineCap,lineJoin){
           context.beginPath();
           context.moveTo(Sx,Sy);
           context.lineTo(Ex,Ey);
           context.lineWidth=width?width:1;
           context.strokeStyle=color?color:"#30E99C";
           context.lineCap=lineCap?lineCap:"round";
           context.lineJoin=lineJoin?lineJoin:"round";
           context.closePath();
           context.stroke();
           return this;
		},

		drawCircle:function(x,y,r,sAngle,eAngle,counterclockwise,color,width,fill,count,offsetX,offSetY){
           context.beginPath();
           if(Object.prototype.toString.call(x) === "[object Array]"){
           	    x.forEach( function(element, index) {
           	    	 context.beginPath();
           	    	 var tempx=element[0];
           	    	 var tempy=element[1];
           	    	 var tempr=element[2];
           	    	 var tempsAngle=element[3];
           	    	 var tempeAngle=element[4];
           	    	 var tempcounterclockwise=element[5];
           	    	 context.arc(tempx,tempy,tempr,tempsAngle,tempeAngle,tempcounterclockwise); 
                     var tempcolor=element[6]?element[6]:"#30E99C";
                     context.strokeStyle=tempcolor;
                     if(element[7]) context.fillStyle=element[7];
                     context.lineWidth=element[8]?element[8]:1;
                     context.stroke();
           	    });
           	    return this;
           }
           if(typeof count ==="number"){
           	  for(var i=0,k=Math.abs(count);i<k;i++){
           	  	 context.beginPath();
           	  	context.arc(x+offsetX*i,y+offSetY*i,r,sAngle,eAngle,counterclockwise);
           	  	var tempcolor=color?color:"#30E99C";
                context.strokeStyle=tempcolor;
                context.lineWidth=width?width:1;
                if(fill) context.fillStyle=fill;
                 context.stroke();
           	  }
           }else if(typeof count ==="undefined"){
              context.arc(x,y,r,sAngle,eAngle,counterclockwise); 
              	var tempcolor=color?color:"#30E99C";
                context.strokeStyle=tempcolor;
                context.lineWidth=width?width:1;
                if(fill) context.fillStyle=fill; 
                context.stroke();
           }
           return this;
		},

    drawRect:function(x,y,width,height){
          context.beginPath();
          context.strokeRect(x,y,width,height);
    },

    RenderObj:function(){
      context.clearRect(0,0,C.width,C.height);
      var allObj=new Array();
      do{
        if(typeof arguments[0] =="undefined"){
           allObj=ObjData.allObj;
           break;
       }
       if(typeof arguments[0] =="object"){
          allObj.push(arguments[0]);
          break;
       }
       if(Object.prototype.toString.call(arguments[0]) === "[object Array]"){
          allObj=arguments[0];
           break;
       }
      }while(false);
         allObj.forEach(function(obj){
              if(obj.IsActive && obj.drawSelf instanceof Function){
                  obj.drawSelf(canvas.prototype);
              }
          });
    },

    GetSelecObj:function(mousePosition){
       var allObj=ObjData.allObj;
       var selecObjs=new Array();
         if(mousePosition instanceof ObjData.CanvasTool.Vector2){
            mousePosition.x=mousePosition.x-C.left;
            mousePosition.y=mousePosition.y-C.top;
            allObj.forEach(function(obj){
              if(obj.IsActive && obj.IsSelf instanceof Function){
               if(obj.IsSelf(mousePosition)) selecObjs.push(obj);
              }
          });
         }
         return selecObjs;
    },

    StartEvevnt:function(){
       var envet=["click","mouseup","mousedown","scroll"];
       envet.forEach(function(obj){
          AddEvent(obj, canvasElemnet);
       });
    }
	}
  
	canvas.prototype.inte.prototype = canvas.prototype;
	window.canvas = canvas;

  //补充内容，都以函数形式来写
  function UpdataTopAndLeft(canvasElemnet){
     var rect=Tools.getBoundingClientRect(canvasElemnet);
         C.top=rect.top;
         C.left=rect.left;
  }

  function OnScroll(){
      document.addEventListener("scroll", function(event){
        event.preventDefault();
        UpdataTopAndLeft(canvasElemnet);
      });
  }

  //事件系统
  function AddEvent(type, canvasElemnet) {
    if (typeof type != "string") return;
    type = type.toLowerCase().replace("on", "");
    if (window.addEventListener) {
      canvasElemnet.addEventListener(type, EventLiten);
    }
    else {
      type = "on" + type;
      canvasElemnet.attachEvent(type, EventLiten);
    }

    function EventLiten(event) {
      event.preventDefault();
      var obj = canvas.prototype.GetSelecObj(new ObjData.CanvasTool.Vector2(event.clientX, event.clientY));
      type = type.replace("on", "");
      type = "on" + type;
      obj.forEach( function(element, index) {  
        if (type in element || element.hasOwnProperty(type)) {
        if (typeof element[type] === "function") {
          element[type].call(this,event);
         }
        }
      });
    }
  }
   

})(window);



//工具函数 Tools.方法名
   + function() {
     var Tools={
         getBoundingClientRect:function(element) {
         var scrollTop = document.documentElement.scrollTop;
         var scrollLeft = document.documentElement.scrollLeft;
         if (element.getBoundingClientRect) {
           if (typeof arguments.callee.offset != "number") {
             var temp = document.createElement("div");
             temp.style.cssText = "position:absolute;top:0px;left:0px;";
             document.body.appendChild(temp);
             arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
             document.body.removeChild(temp);
             temp = null;
           }
           var rect = element.getBoundingClientRect();
           var offset = arguments.callee.offset;
           return {
             left: rect.left + offset,
             right: rect.right + offset,
             top: rect.top + offset,
             bottom: rect.bottom + offset
           }
         } else {
           var acutaLeft = Tools.getElemntLeft(element);
           var acutaTop = Tools.getElementTop(element);
           return {
             left: acutaLeft - scrollLeft,
             right: acutaLeft + element.offsetWidth - scrollLeft,
             top: acutaTop - scrollTop,
             bottom: acutaTop + element.offsetHeight - scrollTop
           }
         }
       },
          getElementTop:function(element){
              var actuaTop=element.offsetTop;
              var current=element.offsetParent;
              while(current!==null){
                  actuaTop+=current.offsetTop;
                   current=current.offsetParent;
              }
              return actuaTop;
          },
          getElemntLeft:function(element){
              var actuaLeft=element.offsetLeft;
              var current=element.offsetParent;
              while(current!==null){
                  actuaLeft+=current.offsetLeft;
                  current=current.offsetParent;
              }
              return actuaLeft;
          }
     }
     window.Tools=Tools;
   }();


下面一个是界面的逻辑文件，画圈圈与碰撞检测都是在这里面完成的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cnvers</title>
	<script src="common/canvas.js"></script>
	<style>
	    .contaner{
           width:30px;
		   
		}
	</style>
</head>
<body height="100%">
	  <div>
             <canvas height="768" width="1024" id="canvas" style=" border: 1px solid red;"> youre browers don't surrpost canvas, please use chorme</canvas>
	  </div>
</body>
<script>
     var frmacout=30;
     var frmaquery= Math.ceil(1000/30);
     var canva=canvas("canvas");
     +function(){
     	var T=ObjData.CanvasTool;
     	var P=ObjData.CanvasObj;
     	var moveCircles=new Array();

         function MoveCirCles(speed,position,reduice){
          P.Circle.call(this);
          moveCircles.push(this);
          if(position instanceof  T.Vector2){
              this.position=position;
           }
          this.speed=new T.Vector2(0,0);
          if(speed instanceof  T.Vector2){
              this.speed=speed;
           }
           this.reduice=reduice;
           this.Move=function(speed){
            if( speed && speed instanceof T.Vector2){
              this.position.x+=(speed.x)/frmacout;
              this.position.y+=(speed.y)/frmacout;
             }else{
              this.position.x+=(this.speed.x)/frmacout;
              this.position.y+=(this.speed.y)/frmacout;
             }
           }
         }

         var creat=setInterval(function(){
              var circleone=new MoveCirCles(new T.Vector2(Math.random()*300,Math.random()*300),new T.Vector2(Math.random()*500,Math.random()*500),30);
              if(moveCircles.length>30){
              	clearInterval(creat);
              }
         },1000);

          
          // 	var BeziCircles=new Array();

          // 	function BeziCircle( start, beizipos, endpos){
          //      P.Circle.call(this);
          //      BeziCircles.push(this);
          //      this.position=start;
          //      this.cazhi=0.0;
          //      this.endpos=endpos;
          //      this.beizipos=beizipos;
               
          //      this.Move=function(){
          //         this.position.x=(1.0- this.cazhi)*(1.0- this.cazhi)*start.x+2.0*this.cazhi*(1.0- this.cazhi)*beizipos.x+this.cazhi*this.cazhi*endpos.x;
          //         this.position.y=(1.0- this.cazhi)*(1.0- this.cazhi)*start.y+2.0*this.cazhi*(1.0- this.cazhi)*beizipos.y+this.cazhi*this.cazhi*endpos.y;
          //         var cicl=new P.Circle(new T.Vector2(this.position.x,this.position.y));
          //      }
          // 	}
          // var bezicir=new BeziCircle(new T.Vector2(100.0,100.0), new T.Vector2(250.0,100.0),new T.Vector2(300.0,300.0));
          //  var cicl=new P.Circle(new T.Vector2(100,100));
          //  cicl.reduice=5;
          //  var cicl=new P.Circle(new T.Vector2(250,100));
          //  cicl.reduice=5;
          //  var cicl=new P.Circle(new T.Vector2(300,300));
          //  cicl.reduice=5;
     window.οnlοad=function(){
        +function(){
        	Updata();
	 		    Render();
        timer=setTimeout(arguments.callee, frmaquery);
	 	}();
	 
     function Render(){
       canva.RenderObj();
     }
     function Updata(){
     	// if(bezicir.cazhi>1){
      //      bezicir.cazhi=1;		
     	// }else {
     	// 	bezicir.Move();
     	// }
     	// bezicir.cazhi+=(1.0/300.0);

     	    for (var i = moveCircles.length - 1; i >= 0; i--) {
            	 IsRechFrige(moveCircles[i],canva);
                 moveCircles[i].Move();
            } 
           for (var i = moveCircles.length - 1; i >= 1; i--) {
             	for (var j = i - 1; j >= 0; j--) {
             		if(moveCircles[i].CheckColider(moveCircles[j])){
             			 var reduice=moveCircles[j].position.Distance(moveCircles[i]);
                         var sin=(moveCircles[j].y-moveCircles[i].y)/reduice;
                         var cos=(moveCircles[j].x-moveCircles[i].x)/reduice;
                         var speedi=new T.Vector2(moveCircles[i].speed.x,moveCircles[i].speed.y);
                         var speedj=new T.Vector2(moveCircles[j].speed.x,moveCircles[j].speed.y);
                         moveCircles[i].speed.Rotation(sin,cos);
                         moveCircles[j].speed.Rotation(sin,cos);
                         moveCircles[i].speed.x=-moveCircles[i].speed.x;
                         moveCircles[j].speed.x=-moveCircles[j].speed.x;
                         while(moveCircles[i].CheckColider(moveCircles[j])){
                         	moveCircles[i].Move(-speedi.x,-speedi.y);
                         	moveCircles[j].Move(-speedj.x,-speedj.y);
                         }
             		}
             	}
             }
         }
       }
     }();

     function IsRechFrige(circle,canvas){
       if(circle.position.x-circle.reduice<=0){
       	  circle.speed.x = Math.abs(circle.speed.x);
       }
       if(circle.position.x+circle.reduice>=canvas.Config.width){
       	  circle.speed.x = -Math.abs(circle.speed.x);
       }
       if(circle.position.y-circle.reduice<=0){
       	  circle.speed.y = Math.abs(circle.speed.y);
       }
       if(circle.position.y+circle.reduice>canvas.Config.height){
           circle.speed.y = -Math.abs(circle.speed.y);
       }
     }
</script>
</html>
如果不出意外，ctrl + c ,ctrl + v 应该是能运行起来的。 不过实际效果还是要看人品的。。

clzmin
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GIS入门，开源 JavaScript二维地图引擎OpenLayers介绍
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-25 2411
OpenLayers是一个开源的JavaScript库，用于显示交互式的地图和地理数据，支持多种地图数据源和格式。主要用途是在Web应用程序中呈现地图，并且可以进行各种交互操作。使用OpenLayers可以轻松创建地图应用程序，包括地图的显示、地图上的标记、地图缩放、平移、定位、测量等。OpenLayers支持的地图格式包括WMSWFSWMTSKMLGeoJSON等格式。同时，OpenLayers也支持自定义图层和数据源，可以轻松实现和集成各种第三方地图数据。
Chipmunk-js: 一个强大的2D物理引擎
最新发布
gitblog_00069的博客
03-15 410
Chipmunk-js: 一个强大的2D物理引擎 Chipmunk-js 是一个基于 JavaScript 的 2D 物理引擎，可以帮助开发者快速构建各种复杂的动态场景，包括游戏、模拟器以及其他交互式应用。 什么是 Chipmunk-js? Chipmunk-js 是一个开源的 2D 物理引擎，它提供了丰富的物理计算功能，如碰撞检测、重力、摩擦力等，可以让开发者轻松地创建出具有真实感的物理效果。 ...
PixiJS - 最快、最灵活的 2D WebGL 渲染引擎
小陈的博客
09-28 4113
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
基于Web的2D图形引擎Matter.js.zip
07-19
Matter.js 是一个基于 Web 的 2D 图形引擎。特性：物理属性(质量、面积、密度等)任何凸多边形的刚体稳定的叠加和 resting碰撞 (broad-phase, mid-phase and narrow-phase)Restitution (elastic and inelastic collisions)Conservation of momentumFriction and resistanceConstraintsGravityComposite bodiesSleeping and static bodiesEventsRounded corners (chamfering)Views (translate, zoom)Collision queries (raycasting, region tests)Time scaling (slow-mo, speed-up)Canvas renderer (supports vectors and textures)WebGL renderer (requires pixi.js)MatterTools for creating, testing and debugging worldsWorld state serialisation (requires resurrect.js)Cross-browser (Chrome, Firefox, Safari, IE8 )Mobile-compatible (touch, responsive)An original JavaScript physics implementation (not a port)示例代码：// Matter.js module aliases var Engine = Matter.Engine,     World = Matter.World,     Bodies = Matter.Bodies; // create a Matter.js engine var engine = Engine.create(document.body); // create two boxes and a ground var boxA = Bodies.rectangle(400, 200, 80, 80); var boxB = Bodies.rectangle(450, 50, 80, 80); var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true }); // add all of the bodies to the world World.add(engine.world, [boxA, boxB, ground]); // run the engine Engine.run(engine); 标签：Matter
H5 2D渲染引擎—Pixi.js简介及小demo
hb_zhouyj的博客
08-30 6138
简介 Pixi.js是一个快速的轻量级的2D动画渲染引擎，可以在浏览器里创建出丰富的交互式图形、动画和跨平台的游戏及应用程序等，主打支持硬件GPU渲染的WebGL API，如若浏览器不支持WebGL，Pixi则会回退使用Canvas来进行渲染。 PixiJS的官网地址是：http://www.pixijs.com/ PixiJS的开源地址是：https://github.com/pixi
HTML5+CSS3+JS入门教程 + 源代码 pdf
03-28
总之，这个"HTML5+CSS3+JS入门教程"结合源代码，是一个全面学习网页开发的好资源，适合想要入门前端开发的初学者。通过系统学习，你可以掌握构建现代网页所需的核心技术，并有能力开发出富有吸引力且功能丰富的网站...
html5+js实现网页版水果忍者游戏代码.rar
01-27
《HTML5+JavaScript实现网页版水果忍者游戏详解》 在现代互联网技术中，HTML5与JavaScript已经成为构建交互式网页应用的重要工具。本教程将详细解析如何利用这两项技术实现一款网页版的“水果忍者”游戏。首先，...
HTML5+GSAP实现的池塘场景动画效果源码.zip
11-03
这个"HTML5+GSAP实现的池塘场景动画效果源码"项目，是利用HTML5的特性来创建一个生动逼真的池塘场景动画。下面我们将详细探讨HTML5的关键特性以及GSAP在其中的作用。 首先，HTML5的核心特性包括： 1. **语义化标签...
俄罗斯方块HTML5+JS
06-07
总的来说，“俄罗斯方块HTML5+JS”是一个展示HTML5、JavaScript和CSS3综合运用的优秀案例。通过这个项目，开发者不仅展示了对这些技术的深入理解，同时也向我们证明了在网页上构建复杂、互动且引人入胜的游戏体验是...
HTML5+Three.js实现简单布料衣服模拟风吹飘动与球体动画效果源码.zip
11-03
这个"HTML5+Three.js实现简单布料衣服模拟风吹飘动与球体动画效果源码.zip"的压缩包文件，显然提供了一个演示如何利用HTML5和Three.js来创建动态的3D布料模拟和物理效果的实例。 Three.js库是基于WebGL的，WebGL是...
two.js:2D游戏引擎
07-11
指示 git clone --recurse 安装 西兰花服务
HTML5（JS）2D游戏引擎
11-12
HTML5（JS）2D游戏引擎，简单上手。 LIB类介绍 D2D_Engine.js 引擎 D2D_Audio.js 音效 D2D_Animation.js 序图动画 D2D_Font.js 文字 D2D_RectBox.js 包围盒 D2D_Sprite.js 精灵 D2D_Texture.js 纹理
2D物理引擎 Box2d.js
04-02
Box2DJS是Box2D物理引擎的JavaScript端口。如何引入laya 参考 https://blog.csdn.net/weixin_41316824/article/details/88965058
Basix:Basix小巧易用的2d图形引擎使用html5 canvas和js来说明对象
05-21
介绍 Basix小型且易于使用的2d图形引擎，它使用html5 canvas [CanvasRenderingContext2D]和js来说明对象。 入门 安装insatll并开始使用Basix引擎非常容易，下载basix.js文件并将其插入到您的项目文件夹中，然后像这样导入它： // if you want all the features import * as BASXI from 'path_to_basix' ; // or if you want some specific ones import { scene , camera , util } from 'path_to_basix' ; 循环 Basix结构中有两个循环，内部循环和外部循环。 内部循环 它是内置在源代码中的，您无法访问它，它主要处理缓动函数并为外部循环提供时间量度，例如delta和now
Draw2js一个基于h5canvas实现的简单图形引擎
08-10
Draw2.js 一个基于h5 canvas实现的简单图形引擎。
js2D物理引擎插件
An_cf的博客
01-07 1018
matter.js：http://brm.io/matter-js/   //轻量级、社区活跃、最新 box2D：http://box2d.org/    //功能全 p2.js：都推崇p2比box2D性能好点，但社区不太活跃，文档较少 推荐简单的物理引擎可选择matter.js...
HTML5/Javascript 2D游戏引擎列表
hack2me---Just for fun
09-04 6122
2D  Javascript游戏引擎列表 Akihabara Lincense: GPL2/MIT Akihabara 是用于创建8/16位图游戏的js库和工具集合。它通过使用HTML5 Canvas 实现。支持 Google Chrome, Saf
25 个超棒的 HTML5 & JavaScript 游戏引擎开发库
weixin_33858249的博客
03-11 588
　　就像在汽车中，引擎完成主要的工作，使汽车看起来不可思议。游戏引擎同理，游戏开发者完成细节的工作，使游戏看起来真实、吸引人眼球。游戏引擎负责其余的事情。早期，游戏开发者通常从草图做起，花费高昂，且不容易获利。为了让游戏开发更加简单容易，主要的开发者开始授权他们的基本游戏引擎，如 Unreal。而且，随着手机和平板游戏的出现，所需预算比以前更少，对 JAVASCRIPT 和HTML5 游戏引擎的需...
Ycnd 2D图形引擎完成了！
kflizcst的图形世界
04-03 841
      经过3个月左右的开发，我自己设计的基于DirectX的2D图形引擎Ycnd终于完成了！       引擎采用了最大限度的模块化设计，所有主要的功能均独立成单独的模块，提供给使用者最大的选择性。       整套引擎目前包含有4个主要的功能模块：引擎核心（包含简单的音频系统）、GUI系统、2D粒子系统、动画系统。  下载地址为：[该版本已停止下载，请下载新版！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值