怎么用html5制作简单的大球吃小球的游戏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用html5制作简单的大球吃小球的游戏相关的知识，希望对你有一定的参考价值。
<html><head>
<title>
大球吃小球by大奔
</title>
<script type="text/javascript" src="src/jscex.js"></script>
<script type="text/javascript" src="src/jscex-parser.js"></script>
<script type="text/javascript" src="src/jscex-jit.js"></script>
<script type="text/javascript" src="src/jscex-builderbase.js"></script>
<script type="text/javascript" src="src/jscex-async.js"></script>
<script type="text/javascript" src="src/jscex-async-powerpack.js"></script>
</head>
<body>
<canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3">
你的浏览器改换了
</canvas>
<script type="text/javascript">
var d=document.getElementByIdx_x("myCanvas");
var cxt=d.getContext("2d");
var balls=[];
//这里为了获得随机数的向量
function getRandom(a,b)
return (a+Math.floor(Math.random()*(b-a+1)))
//这里对向量进行赋值
var Vector2=function(a,b)
this.x=a||0;
this.y=b||0;
;
//这里需要注意，对象的默认方法在这里写不会管用。例如sub
Vector2.prototype=//写对象的构造函数
constructor:Vector2,
multiplyScalar:function(s)
this.x*=s;
this.y*=s;
return this;
,
divideScalar:function(s)
if(s)
this.x/=s;
this.y/=s;
else
this.set(0,0);
return this;
,
dot:function(v)
return this.x*v.x+this.y*v.y;//即两个向量相乘
,
lengthSq:function()
return this.x*this.x+this.y*this.y;
,
length:function()
return Math.sqrt(this.lengthSq());
,
normalize:function()
//这里得到的是单位向量，按照google的定义，单位的向量是， //（a,b）则a*a+b*b=1;
return this.divideScalar(this.length());
,
reflectionSelf:function(v)
//这里得到的是反射向量。公式参考这个网址。
//blog.physwf.com/?p=42
var nv=v.normalize();
this.sub(nv.multiplyScalar(2*this.dot(nv)));
,
distanceToSquared:function(v)//求出两点之间的距离
var dx=this.x-v.x,
dy=this.y-v.y;
return dx*dx+dy*dy;
;
Vector2.sub=function(v1,v2)//这里重写sub方法
return new Vector2(v1.x-v2.x,v1.y-v2.y);
;
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//这是弹性系数
;
balls.push(ball);
var filterBalls=[];
for(var i=0;i<balls.length;i++)
var overlapCount=0;
for(var j=i+1;j<balls.length;j++)//两个两个比较防止重复，而且初始化的位置不能重 //叠，否则符合碰撞的条件。去掉这个判断以后，效果不太显著，可以多放些球试试。
var distance=balls[i].position.distanceToSquared(balls[j].position);
var l=balls[i].r+balls[j].r;
if(distance<=(l*l))
overlapCount++;
if(overlapCount===0)
filterBalls.push(balls[i]);
balls=filterBalls;//这里可以去掉试试。
cxt.fillStyle="#030303";
cxt.fillRect(0,0,d.width,d.height);
function init()
cxt.fillStyle="#fff";
for(i in balls)
cxt.beginPath();
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
init();
var cyc=20;
var moveAsync2=eval_r(Jscex.compile("async",function()
var tag=0;
while(true)
try
cxt.fillStyle="rgba(0,0,0,3)";
cxt.fillRect(0,0,d.width,d.height);
cxt.fillStyle="#fff";
for(var i=0;i<balls.length;i++)
//这里是为了两个小球比较会重复所以，每次比较都是i与i+1 //开始相比较
for(var j=i+1;j<balls.length;j++)
collisionSolver(balls[i],balls[j]);
for(i in balls)
cxt.beginPath();
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
if(balls[i].r+balls[i].position.x>d.width)
//如果小球x轴跑出了画布的范围
balls[i].position.x=d.width-balls[i].r;
//小球的位置返回到画布的边缘位置
balls[i].speed.x*=-1;
//同时x轴的方向变为反方向
if(balls[i].position.x<balls[i].r)
//如果小球的x坐标小于小球的半径。肯定画不成完整的圆了，所以要归位
balls[i].position.x=balls[i].r;
balls[i].speed.x*=-1; if(balls[i].r+balls[i].position.y>d.height)//同理y轴
balls[i].position.y=d.height-balls[i].r;
balls[i].speed.y*=-1;
if(balls[i].position.y<balls[i].r)
balls[i].position.y=balls[i].r;
balls[i].speed.y*=-1;
balls[i].position.x+=balls[i].speed.x*cyc/1000;
//小球的x轴不断按照速度增大
balls[i].position.y+=balls[i].speed.y*cyc/1000;
catch(e)
alert(e);
$await(Jscex.Async.sleep(cyc));
));
function collisionSolver(bodyA,bodyB)//判断小球发生碰撞的时候的变化。
var vB=bodyB.speed;
var vA=bodyA.speed;
var l=bodyA.r+bodyB.r;
var distSqr=bodyA.position.distanceToSquared(bodyB.position);
var isTouching=distSqr<=l*l? true:false;
//判断两圆心之间的距离如果小于两半径之和的平方。则为true
var normal=Vector2.sub(bodyB.position,bodyA.position).normalize();
//请看上面的解释,所以得到的是B相对于A的单位向量。
var ratio=bodyA.r/l;//这是一个比例
var contactPoint=new Vector2();
//根据平行线切割的三角形，两边的边的比例相等，
contactPoint.x=bodyA.position.x+(bodyB.position.x-bodyA.position.x)*ratio;
contactPoint.y=bodyA.position.y+(bodyB.position.y-bodyA.position.y)*ratio;
var rA=Vector2.sub(contactPoint,bodyA.position);
//这两个地方没有找到是哪里用到的？？？？？
var rB=Vector2.sub(contactPoint,bodyB.position);
var vrn=Vector2.sub(vA,vB).dot(normal);
//这里得到的是Va相对于vB的速度向量与两球的圆心的单位向量相乘。
///a*b=|a|*|b|*cos@.所以如果vrn大于零，则夹角小于90度。
if(isTouching&&vrn>0)
//这里是冲量公式的一个部分
var normalMass=1/(1/bodyA.mass+1/bodyB.mass);
var restitution=(bodyA.restitution+bodyB.restitution)/2;
var normalImpulse=-normalMass*vrn*(1+restitution);
bodyA.speed.x+=normalImpulse*normal.x/bodyA.mass;
//这里总之是一个大球一个小球，所以速度一个增大一个减小
bodyA.speed.y+=normalImpulse*normal.y/bodyA.mass;
bodyB.speed.x-=normalImpulse*normal.x/bodyB.mass;
bodyB.speed.y-=normalImpulse*normal.y/bodyB.mass;
moveAsync2().start();
</script>
</body>
</html> 参考技术A <html>
<head>
<title>
大球吃小球by大奔
</title>
<script type="text/javascript" src="src/jscex.js"></script>
<script type="text/javascript" src="src/jscex-parser.js"></script>
<script type="text/javascript" src="src/jscex-jit.js"></script>
<script type="text/javascript" src="src/jscex-builderbase.js"></script>
<script type="text/javascript" src="src/jscex-async.js"></script>
<script type="text/javascript" src="src/jscex-async-powerpack.js"></script>
</head>
<body>
<canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3">
你的浏览器改换了
</canvas>
<script type="text/javascript">
var d=document.getElementByIdx_x("myCanvas");
var cxt=d.getContext("2d");
var balls=[];
//这里为了获得随机数的向量
function getRandom(a,b)
return (a+Math.floor(Math.random()*(b-a+1)))
//这里对向量进行赋值
var Vector2=function(a,b)
this.x=a||0;
this.y=b||0;
;
//这里需要注意，对象的默认方法在这里写不会管用。例如sub
Vector2.prototype=//写对象的构造函数
constructor:Vector2,
multiplyScalar:function(s)
this.x*=s;
this.y*=s;
return this;
,
divideScalar:function(s)
if(s)
this.x/=s;
this.y/=s;
else
this.set(0,0);
return this;
,
dot:function(v)
return this.x*v.x+this.y*v.y;//即两个向量相乘
,
lengthSq:function()
return this.x*this.x+this.y*this.y;
,
length:function()
return Math.sqrt(this.lengthSq());
,
normalize:function()
//这里得到的是单位向量，按照google的定义，单位的向量是， //（a,b）则a*a+b*b=1;
return this.divideScalar(this.length());
,
reflectionSelf:function(v)
//这里得到的是反射向量。公式参考这个网址。
//blog.physwf.com/?p=42
var nv=v.normalize();
this.sub(nv.multiplyScalar(2*this.dot(nv)));
,
distanceToSquared:function(v)//求出两点之间的距离
var dx=this.x-v.x,
dy=this.y-v.y;
return dx*dx+dy*dy;
;
Vector2.sub=function(v1,v2)//这里重写sub方法
return new Vector2(v1.x-v2.x,v1.y-v2.y);
;
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//这是弹性系数
;
balls.push(ball);
var filterBalls=[];
for(var i=0;i<balls.length;i++)
var overlapCount=0;
for(var j=i+1;j<balls.length;j++)//两个两个比较防止重复，而且初始化的位置不能重 //叠，否则符合碰撞的条件。去掉这个判断以后，效果不太显著，可以多放些球试试。
var distance=balls[i].position.distanceToSquared(balls[j].position);
var l=balls[i].r+balls[j].r;
if(distance<=(l*l))
overlapCount++;
if(overlapCount===0)
filterBalls.push(balls[i]);
balls=filterBalls;//这里可以去掉试试。
cxt.fillStyle="#030303";
cxt.fillRect(0,0,d.width,d.height);
function init()
cxt.fillStyle="#fff";
for(i in balls)
cxt.beginPath();
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
init();
var cyc=20;
var moveAsync2=eval_r(Jscex.compile("async",function()
var tag=0;
while(true)
try
cxt.fillStyle="rgba(0,0,0,3)";
cxt.fillRect(0,0,d.width,d.height);
cxt.fillStyle="#fff";
for(var i=0;i<balls.length;i++)
//这里是为了两个小球比较会重复所以，每次比较都是i与i+1 //开始相比较
for(var j=i+1;j<balls.length;j++)
collisionSolver(balls[i],balls[j]);
for(i in balls)
cxt.beginPath();
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
if(balls[i].r+balls[i].position.x>d.width)
//如果小球x轴跑出了画布的范围
balls[i].position.x=d.width-balls[i].r;
//小球的位置返回到画布的边缘位置
balls[i].speed.x*=-1;
//同时x轴的方向变为反方向
if(balls[i].position.x<balls[i].r)
//如果小球的x坐标小于小球的半径。肯定画不成完整的圆了，所以要归位
balls[i].position.x=balls[i].r;
balls[i].speed.x*=-1; if(balls[i].r+balls[i].position.y>d.height)//同理y轴
balls[i].position.y=d.height-balls[i].r;
balls[i].speed.y*=-1;
if(balls[i].position.y<balls[i].r)
balls[i].position.y=balls[i].r;
balls[i].speed.y*=-1;
balls[i].position.x+=balls[i].speed.x*cyc/1000;
//小球的x轴不断按照速度增大
balls[i].position.y+=balls[i].speed.y*cyc/1000;
catch(e)
alert(e);
$await(Jscex.Async.sleep(cyc));
));
function collisionSolver(bodyA,bodyB)//判断小球发生碰撞的时候的变化。
var vB=bodyB.speed;
var vA=bodyA.speed;
var l=bodyA.r+bodyB.r;
var distSqr=bodyA.position.distanceToSquared(bodyB.position);
var isTouching=distSqr<=l*l? true:false;
//判断两圆心之间的距离如果小于两半径之和的平方。则为true
var normal=Vector2.sub(bodyB.position,bodyA.position).normalize();
//请看上面的解释,所以得到的是B相对于A的单位向量。
var ratio=bodyA.r/l;//这是一个比例
var contactPoint=new Vector2();
//根据平行线切割的三角形，两边的边的比例相等，
contactPoint.x=bodyA.position.x+(bodyB.position.x-bodyA.position.x)*ratio;
contactPoint.y=bodyA.position.y+(bodyB.position.y-bodyA.position.y)*ratio;
var rA=Vector2.sub(contactPoint,bodyA.position);
//这两个地方没有找到是哪里用到的？？？？？
var rB=Vector2.sub(contactPoint,bodyB.position);
var vrn=Vector2.sub(vA,vB).dot(normal);
//这里得到的是Va相对于vB的速度向量与两球的圆心的单位向量相乘。
///a*b=|a|*|b|*cos@.所以如果vrn大于零，则夹角小于90度。
if(isTouching&&vrn>0)
//这里是冲量公式的一个部分
var normalMass=1/(1/bodyA.mass+1/bodyB.mass);
var restitution=(bodyA.restitution+bodyB.restitution)/2;
var normalImpulse=-normalMass*vrn*(1+restitution);
bodyA.speed.x+=normalImpulse*normal.x/bodyA.mass;
//这里总之是一个大球一个小球，所以速度一个增大一个减小
bodyA.speed.y+=normalImpulse*normal.y/bodyA.mass;
bodyB.speed.x-=normalImpulse*normal.x/bodyB.mass;
bodyB.speed.y-=normalImpulse*normal.y/bodyB.mass;
moveAsync2().start();
</script>
</body>
</html>本回答被提问者采纳
用手机上下左右摆让小球滚动或弹跳吃东西变大的游戏
估计你说的是LocoRoco吧，一开始是小黄球，然后吃到大草莓就会变大，还可以吃小蓝莓加分，还能找到灰色的朋友们那个是吧，这确实是个狠Q的游戏，这个游戏可以在应用宝里面下载，里面的一下很全面，
然后它上面的软件自己都是经过系统的审核，都是正式版本的软件。
不会自己出现什么不兼容或者冲突的问题，
下载很简单在手机上打开应用宝软件搜索你所需要的软件或者游戏，
找到下载就可以安装了。 参考技术A 断。我不能释怀的是：一个还是害虫，统统化为灰烬。追答
以上是关于怎么用html5制作简单的大球吃小球的游戏的主要内容，如果未能解决你的问题，请参考以下文章