1、Initializr
Initializr是制作HTML5网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr会为你生成代码简洁的可定制的网页模板。
2、HTML5 visual cheat sheet
HTML5 visual cheat sheet是一个非常酷的速查手册，每个Web开发人员的必备神器，可以帮助大家快速超找一个标签或者属性。
3、Cross browser HTML5 forms HTML5中的日历，取色板，滑块部件等都是非常棒工具，但是有些浏览器不支持。Cross browser HTML5 forms还可以帮助你构建完美的HTML5表单兼容方案。
4、HTML5demos
HTML5demos会告诉你每一个HTML5特性在哪些浏览器中支持，比如说你的浏览器是否支持HTML5 Canvas？Safari是否可以运行简单的HTML5聊天客户端等问题。
5、DreamWeaver
网页制作软件，该软件已成为专业级网页制作程序，支持HTML，CSS，PHP，JSP和ASP等多种脚本语言着色显示，同时提供模板应用功能，支持一键式生成网页框架功能。它是初学者或专业级网站开发人员必备的选择工具。
<html>
<head>
<title>
大球吃小球by大奔
</title>
<script type="text/javascript" src="src/jscexjs"></script>
<script type="text/javascript" src="src/jscex-parserjs"></script>
<script type="text/javascript" src="src/jscex-jitjs"></script>
<script type="text/javascript" src="src/jscex-builderbasejs"></script>
<script type="text/javascript" src="src/jscex-asyncjs"></script>
<script type="text/javascript" src="src/jscex-async-powerpackjs"></script>
</head>
<body>
<canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3">
你的浏览器改换了
</canvas>
<script type="text/javascript">
var d=documentgetElementByIdx_x("myCanvas");
var cxt=dgetContext("2d");
var balls=[];
//这里为了获得随机数的向量
function getRandom(a,b){
return (a+Mathfloor(Mathrandom()(b-a+1)))
}
//这里对向量进行赋值
var Vector2=function(a,b){
thisx=a||0;
thisy=b||0;
};
//这里需要注意，对象的默认方法在这里写不会管用。例如sub
Vector2prototype={//写对象的构造函数
constructor:Vector2,
multiplyScalar:function(s){
thisx=s;
thisy=s;
return this;
},
divideScalar:function(s){
if(s){
thisx/=s;
thisy/=s;
}else{
thisset(0,0);
}
return this;
},
dot:function(v){
return thisxvx+thisyvy;//即两个向量相乘
},
lengthSq:function(){
return thisxthisx+thisythisy;
},
length:function(){
return Mathsqrt(thislengthSq());
},
normalize:function(){
//这里得到的是单位向量，按照google的定义，单位的向量是， //（a,b）则aa+bb=1;
return thisdivideScalar(thislength());
},
reflectionSelf:function(v){
//这里得到的是反射向量。公式参考这个网址。
//blogphyswfcom/p=42
var nv=vnormalize();
thissub(nvmultiplyScalar(2thisdot(nv)));
},
distanceToSquared:function(v){//求出两点之间的距离
var dx=thisx-vx,
dy=thisy-vy;
return dxdx+dydy;
}
};
Vector2sub=function(v1,v2){//这里重写sub方法
return new Vector2(v1x-v2x,v1y-v2y);
};
for(var i=0;i<40;i++){//初始化40个小球
var ball={
position:new Vector2(getRandom(20,600),getRandom(20,600)),
r:getRandom(6,20),
speed:new Vector2(getRandom(-200,200),getRandom(-200,200)),
mass:1,//这是小球的质量
restitution:1//这是d性系数
};
ballspush(ball);
}
var filterBalls=[];
for(var i=0;i<ballslength;i++){
var overlapCount=0;
for(var j=i+1;j<ballslength;j++){//两个两个比较防止重复，而且初始化的位置不能重 //叠，否则符合碰撞的条件。去掉这个判断以后，效果不太显著，可以多放些球试试。
var distance=balls[i]positiondistanceToSquared(balls[j]position);
var l=balls[i]r+balls[j]r;
if(distance<=(ll)){
overlapCount++;
}
}
if(overlapCount===0){
filterBallspush(balls[i]);
}
}
balls=filterBalls;//这里可以去掉试试。
cxtfillStyle="#030303";
cxtfillRect(0,0,dwidth,dheight);
function init(){
cxtfillStyle="#fff";
for(i in balls){
cxtbeginPath();
cxtarc(balls[i]positionx,balls[i]positiony,balls[i]r,0,MathPI2,true);
cxtclosePath();
cxtfill();
}
}
init();
var cyc=20;
var moveAsync2=eval_r(Jscexcompile("async",function(){
var tag=0;
while(true){
try{
cxtfillStyle="rgba(0,0,0,3)";
cxtfillRect(0,0,dwidth,dheight);
cxtfillStyle="#fff";
for(var i=0;i<ballslength;i++){
//这里是为了两个小球比较会重复所以，每次比较都是i与i+1 //开始相比较
for(var j=i+1;j<ballslength;j++){
collisionSolver(balls[i],balls[j]);
}
}
for(i in balls){
cxtbeginPath();
cxtarc(balls[i]positionx,balls[i]positiony,balls[i]r,0,MathPI2,true);
cxtclosePath();
cxtfill();
if(balls[i]r+balls[i]positionx>dwidth){
//如果小球x轴跑出了画布的范围
balls[i]positionx=dwidth-balls[i]r;
//小球的位置返回到画布的边缘位置
balls[i]speedx=-1;
//同时x轴的方向变为反方向
}if(balls[i]positionx<balls[i]r){
//如果小球的x坐标小于小球的半径。肯定画不成完整的圆了，所以要归位
balls[i]positionx=balls[i]r;
balls[i]speedx=-1; }if(balls[i]r+balls[i]positiony>dheight){//同理y轴
balls[i]positiony=dheight-balls[i]r;
balls[i]speedy=-1;
}
if(balls[i]positiony<balls[i]r){
balls[i]positiony=balls[i]r;
balls[i]speedy=-1;
} balls[i]positionx+=balls[i]speedxcyc/1000;
//小球的x轴不断按照速度增大
balls[i]positiony+=balls[i]speedycyc/1000;
}
}catch(e){
alert(e);
}
$await(JscexAsyncsleep(cyc));
}
}));
function collisionSolver(bodyA,bodyB){//判断小球发生碰撞的时候的变化。
var vB=bodyBspeed;
var vA=bodyAspeed;
var l=bodyAr+bodyBr;
var distSqr=bodyApositiondistanceToSquared(bodyBposition);
var isTouching=distSqr<=ll true:false;
//判断两圆心之间的距离如果小于两半径之和的平方。则为true
var normal=Vector2sub(bodyBposition,bodyAposition)normalize();
//请看上面的解释,所以得到的是B相对于A的单位向量。
var ratio=bodyAr/l;//这是一个比例
var contactPoint=new Vector2();
//根据平行线切割的三角形，两边的边的比例相等，
contactPointx=bodyApositionx+(bodyBpositionx-bodyApositionx)ratio;
contactPointy=bodyApositiony+(bodyBpositiony-bodyApositiony)ratio;
var rA=Vector2sub(contactPoint,bodyAposition);
//这两个地方没有找到是哪里用到的？？？？？
var rB=Vector2sub(contactPoint,bodyBposition);
var vrn=Vector2sub(vA,vB)dot(normal);
//这里得到的是Va相对于vB的速度向量与两球的圆心的单位向量相乘。
///ab=|a||b|cos@所以如果vrn大于零，则夹角小于90度。
if(isTouching&&vrn>0){
//这里是冲量公式的一个部分
var normalMass=1/(1/bodyAmass+1/bodyBmass);
var restitution=(bodyArestitution+bodyBrestitution)/2;
var normalImpulse=-normalMassvrn(1+restitution);
bodyAspeedx+=normalImpulsenormalx/bodyAmass;
//这里总之是一个大球一个小球，所以速度一个增大一个减小
bodyAspeedy+=normalImpulsenormaly/bodyAmass;
bodyBspeedx-=normalImpulsenormalx/bodyBmass;
bodyBspeedy-=normalImpulsenormaly/bodyBmass;
}
}
moveAsync2()start();
</script>
</body>
</html>
比如使用html5的画布标签canvas开发一个简单的类似qq游戏你画我猜的游戏:首先你要学会canvas标签的基本用法，画线，画笔大小，画笔，截图保存等，然后结合你的js功底在画布上要画出连续的平滑的线条，然后别人就可以根据画的图，猜词语了，猜中了就给分。然后排名什么的。这就是一个简单的html5游戏了网上有很多列子的，你可以下一个源码看看
1、启动Edge Animate，打开/a>smurf+spriteSheet+Tutorial+1zip解压后其中的smurfan文件。
在舞台上选择蓝精灵元素（或者可以在右上角的Elements面板中选择smurf_sprite），点击右键，点击“Convert to Symbol”命令，转换元素为元件。转换后的元件不仅包含原有元素的资源，而且包括其中设置的独立时间线动画和脚本。
2、在d出的“Create Symbol”提示框中输入新的元件名称，比如“Smurf”。默认选中Autoplay Timeline，点击OK。此时，你可以在右边Lirary面板的Symbols子面板中，看到生成的新的Smurf元件。此时，舞台上的原有Smurf_Sprite元素也变为名为“Smurf”的元素，时间轴上也对应做出修改。如下图：
3、在舞台上，可以从Library的元件面板中，拖拽元件到舞台上来创建多个新的元件实例。比如，我们可以把现在舞台上的蓝精灵删除，然后在元件面板中拖拽Smurf元件到舞台上。每当拖拽Smurf元件到舞台上，Animate都会为你生成一个新的Smurf实例，并为新的实力元素自动命名。如下图：
现在，在舞台中只留下一个蓝精灵元件实例，并在Elements面板中命名其为SmurfBoy（双击元素面板中名称即可重新命名）。
基于HTML5的工具网站：
兔展>
可以用html5做桌面应用程序。
HTML5开发完成之后用Node-Webkit打包。
基于nodejs和chromium的应用程序实时运行环境，可运行通过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。 nodejs和webkit的结合体，webkit提供DOM *** 作，nodejs提供本地化 *** 作；且将二者的context完全整合，可在HTML代 码中直接使用nodejs的API。
以上就是关于html网页开发常用软件有哪些全部的内容，包括:html网页开发常用软件有哪些、怎么用html5制作简单的大球吃小球的游戏、怎么用html5开发游戏等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）