写点寂寞

HTML5 Canvas+Box2D实现物理重力效果 (2011-09-28)

最近研究了一下著名的box2d,
Box2D引擎很强大，能够用JS实现物理效果，
很适合做游戏开发
但是中文资料实在太少了,看国外关于box2d的文章还要翻墙，
可以看一下Box2d C++版本的中文手册，能了解一下box2d的相关知识

可以看下本文 栗子DEMO
Box2dJS DEMO

下面综合一些知识简单讲解一下

首先创建一个AABB类，设置重力，创建一个有重力的世界

function setupWorld(){
    //1. 设置有效区域大小 - b2AABB 类 （左上角向量,右下角向量）
    worldAABB = new b2AABB();
    worldAABB.minVertex.Set(-1000, -1000);	//左上角
    worldAABB.maxVertex.Set(1000, 1000); 	//右下角

    //2. 定义重力 - 2D向量 - b2Vec2 类 （x,y）
    gravity = new b2Vec2(0, 300);

    //3. 忽略休眠的物体
    var doSleep = true;

    //4. 创建世界 - b2World
    World = new b2World(worldAABB, gravity, doSleep);
}

在世界中添加“刚体”，和重力物体
这里我们添加一个地面盒，4个重力体

定义形状流程：
1.定义形状：Shape = new b2CircleDef()
形状参数：表面摩擦力，弹性，密度
2.物体定义： BodyDef = new b2BodyDef();
物体加入形状 BodyDef.AddShape(Shape);
物体参数：位置
3.在重力世界创建物体
World = World.CreateBody(Shape);

//addBodys()
function addBodys(){

    //1. 定义形状	b2CircleDef,b2BoxDef,b2PolyDef 类
	var Shape1 = new b2CircleDef();	//Shape1:圆形
	Shape1.radius = 20;					//半径
	Shape1.localPosition.Set(0, 0);		//偏移量
    Shape1.density = 1.0;				//密度
    Shape1.restitution = .3;			//弹性
    Shape1.friction = 1;				//摩擦力
        
	var Shape2 = new b2PolyDef();	//Shape2:多边形
	Shape2.vertexCount = 3;						//顶点数为5
	Shape2.vertices[0] = new b2Vec2(0,-20);		//顶点1
	Shape2.vertices[1] = new b2Vec2(23.10,20);	//顶点2
	Shape2.vertices[2] = new b2Vec2(-23.10,20);	//顶点3
	Shape2.localPosition.Set(0, 30);	//偏移量
    Shape2.density = 1.0;				//密度
    Shape2.restitution = .3;			//弹性
    Shape2.friction = 1;				//摩擦力

	//2. 定义物体	b2BodyDef 类
    var BodyDef1 = new b2BodyDef();
    BodyDef1.position.Set(200, 100);	//设置物体的初始位置
    BodyDef1.AddShape(Shape1);			//物体中加入Shape1
    BodyDef1.AddShape(Shape2);			//物体中加入Shape2

	//3. 将物体添加至world
    Body = World.CreateBody(BodyDef1);	//在世界中创建物体

	
	//...可用同样流程继续添加物体，再定义一块地板
	var Shape3 = new b2BoxDef();	//Shape3:矩形
	
    Shape3.extents.Set(300, 5);			//定义矩形高、宽
	var BodyDef2 = new b2BodyDef();
    BodyDef2.position.Set(200, 500);	//设置物体的初始位置
    BodyDef2.AddShape(Shape3);			//物体中加入Shape3
    Body2 = World.CreateBody(BodyDef2);	//在世界中创建物体
	
	
	// 定义物体
	var vbox =  new b2BoxDef();
	vbox.extents.Set(10,90);
	var bodyVbox = new b2BodyDef();
	bodyVbox.position.Set(150,450);
	bodyVbox.AddShape(vbox);
	vbox.density = 1.0;				//密度
    vbox.restitution = .3;			//弹性
    vbox.friction = 1;				//摩擦力
	bodyVbox = World.CreateBody(bodyVbox);
	
	var vbox1 =  new b2BoxDef();
	vbox1.extents.Set(10,60);
	vbox1.density = 1.0;			//密度
    vbox1.restitution = .3;			//弹性
    vbox1.friction = 1;				//摩擦力
	var bodyVbox1 = new b2BodyDef();
	bodyVbox1.position.Set(200,450);
	bodyVbox1.AddShape(vbox1);
	bodyVbox1 = World.CreateBody(bodyVbox1);
	
	var vbox2 =  new b2BoxDef();
	vbox2.extents.Set(10,30);		
	vbox2.density = 1.0;			//密度
    vbox2.restitution = .3;			//弹性
    vbox2.friction = 1;				//摩擦力
	var bodyVbox2 = new b2BodyDef();
	bodyVbox2.position.Set(280,470); 
	bodyVbox2.AddShape(vbox2);
	bodyVbox2 = World.CreateBody(bodyVbox2);
	
	
}

绘制重力世界

//计算和绘制世界的下一帧
function step(){
	var dt = 1/60;
	//迭代次数，影响物体碰撞的计算精度，太高会导致速度过慢
	var iterations = 10;

	//计算dt秒之后世界中物体的位置
	World.Step(dt,iterations);

	//绘制世界
	drawWorld();

}


//绘制世界
function drawWorld(){
	//绘制之前将上一帧的内容清除
	context.clearRect(0, 0, canvasWidth, canvasHeight);
	//遍历世界中的物体
    for (var b = World.m_bodyList; b; b = b.m_next) {
		//遍历物体中的形状
        for (var s = b.GetShapeList(); s != null; s = s.GetNext()) {
            this.drawShape(s);	//绘制一个形状
        }
    }
}

点击查看原文阅读(652) | 评论(2) | 分类:前端开发HTML5/JS

Html5-Canvas-JS模拟抛物线 (2011-09-21)

今天用HTML5+Canvas+js 模仿”愤怒的小鸟“做了个效果
首先先计算抛物线，判断落地后反弹，自由落体
在上一篇关于JS自由落体，可以先了解一下
先上个 栗子(看Demo)
本文出处 http://www.nonb.cn/blog/html5-canvas-js-parabola.html (写点寂寞) 欢迎转载，转载请注明出处.

//@desc: 模拟抛物线
//@author:fzxa
//@create: 20110921
//@blog: nonb.cn
;(function(){
	drawCtx();
	function drawCtx(){
		var x  = 580;
		var y = 326;
		var ctx = document.getElementById('ctx').getContext('2d'); 
		var backgroundForestImg = new Image();
		
		ctx.clearRect(0, 0, x, y);

		backgroundForestImg.src = "./bg.jpg";
		backgroundForestImg.onload=function(){ 
			ctx.drawImage(backgroundForestImg,0,0,580,326); 
		} 
		console.log(ctx);
	}
})(this);

function demo(x, y, a, t) {

    var f = document.getElementById('fall');
	/*
    var Vx = x,
    Vy = parseInt(y),
    g = a,
    t = parseInt(t),
    h = 0,
    l = 0,
    Sx = 0,
    Sy = 0;
	*/
	var Vx = x,
    Vy = parseInt(y),
    g = a,
    t = parseInt(t),
    h = 0,
    l = 0,
    Sx = 0,
    Sy = 0;
	console.log('Vx:'+Vx+' Vy:'+Vy+' g:'+g+' t:'+t+' h:'+h+' l:'+l+' Sx:'+Sx+' Sy:'+Sy); 
    var i = setInterval(function() {
        if (f) {
            Sx += Vx * t;
            l = Sx;
            Vy += g * t;
            h += Vy * t;
			console.log('X轴:'+l+'    Y轴:'+h+'   Vy:'+Vy); 
            f.style.left = l + 'px';
            f.style.top = h-Vy + 'px';
            if (h>=-2) {
				Vy *= (Vy > 1) ? -0.6 : 0; 
				Vx = Vx/1.5
				if(Vy == 0) clearInterval(i);
			}
        }
    },
    t);
}

点击查看原文阅读(509) | 评论(0) | 分类:前端开发HTML5/JS

JS自由落体运动 (2011-09-20)

用JS模拟一下效果
这里用到了一些物理知识，先上栗子 (看Demo)
JS自由落体运动物理模拟

//@desc: 自由落体运动
//@author:fzxa
//@create: 20110921
//@blog: nonb.cn
var h = 0, v = 1;
var i;

function loop() {
	var fps = document.getElementById('fps').value;
    i = self.setInterval("niao()", fps);
}
function niao() {
    var f = document.getElementById('fall');
    var r = parseInt(f.style.right) - h;
    var b = parseInt(f.style.bottom) - v;
	var view  = document.getElementById('view');
	document.getElementById('b').innerHTML='b'+b+'   r'+r;
	
    f.style.right = r + 'px';
    f.style.bottom = b + 'px';
	
    if (b > -210) {
        v += 2;
		view.innerHTML+='-----b > -210:------
';
    } else {
		view.innerHTML+='-----当b小于-210时:------
';
        h = (v > 9) ? v * 0.2 : 0;//偏移量
		v *= (v > 9) ? -0.6 : 0; 
		if(v == 0){
			clearInterval(i);
		}
    }
	view.innerHTML+= 'r:'+r+'  b:'+b+' v:'+v+'  h:'+h+'
';
}
function start(){
	initcfg();
	loop();
}
function quit(){
	clearInterval(i);
}
function initcfg(){
	var f = document.getElementById('fall');
	f.style.right = '-300';
	f.style.bottom = '-46';
	h = 0, v = 1;
	document.getElementById('view').innerHTML='';
}

点击查看原文阅读(364) | 评论(0) | 分类:前端开发HTML5/JS

Html5-Sprite动画编程 (2011-09-19)

今天写了个基于html5的sprite
原理和css的sprite类似，
一张背景图中取一块内容连续作为动画。
可以看一下sprite动画的效果点击看演示

所需要的图片：

//@author: Fzxa
//@create: 20110920
//@blog: nonb.cn

//定时器
var interval=null;
//每一帧在大图中的位置
var frames=[];
//向左
frames[0]=[30,4,70,96];
frames[1]=[116,0,72,100];
frames[2]=[209,3,64,97];
frames[3]=[297,1,63,99];
frames[4]=[381,2,66,98];
//向右 
frames[5]=[30,106,63,97];
frames[6]=[106,105,66,98];
frames[7]=[192,101,64,103];
frames[8]=[208,106,64,97];
frames[9]=[366,103,71,100];

//精灵类
function Sprite(dx,dy,delta,fps){
    this.dx=dx;
    this.dy=dy;
    this.fps=fps;
    this.delay=1000/fps;
    this.last_update=0;
    //移动速度
    this.delta=-delta;
    //帧编号
    this.index=0;
    //方向
    this.dir_left=true;
}

Sprite.prototype.update=function(canvas){
    //获取当前时间
    var now=(new Date()).getTime();
    if((now-this.last_update)>this.delay){
        if(this.dir_left){
            //方向朝左,只绘制0 1 2帧
            if(this.index>4)
                this.index=0;
        }
        else{
            //方向朝右,只绘制 3 4 5 帧
            if(this.index>9)
                this.index=5;
        }
        //取出当前帧的坐标
        this.frame=frames[this.index];

        //当前帧在大图中的位置
        this.sx=this.frame[0];
        this.sy=this.frame[1];
        this.sw=this.frame[2];
        this.sh=this.frame[3];

        //当前帧大小
        this.dw=this.frame[2];
        this.dh=this.frame[3];

        //改变 x 坐标
        this.dx=this.dx+this.delta;
        //左边缘检测
        if(this.dx<0){
            this.dx=0;
            //转向
            this.delta=-this.delta;
            this.dir_left=false;
            this.index=3;
        }
        //右边缘检测
        if((this.dx+this.dw)>canvas.getAttribute("width")){
            this.dx=canvas.getAttribute("width")-this.dw;
            //转向
            this.delta=-this.delta;
            this.dir_left=true;
            this.index=0;
        }         
        this.dy=this.dy;//y 不移动


        this.index++;
        this.last_update=now;
    }
}

function animate(){
    //停止动画
    stop();
    //移动速度
    var delta=10;
    //每秒绘制多少次
    var fps=8;
    //比例
    var scale=1;

    //画布对象
    var canvas=document.getElementById("canvas3")
    //获取上下文对象
    var ctx = canvas.getContext("2d");
    //清空画布
    ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));

    var img=new Image();
    img.src="./sprite_2.gif";

    var sprite=new Sprite(120,200,delta,fps);
    interval = setInterval(function(){
        //清空画布
        ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
        //更新数据
        sprite.update(canvas);
        //保存状态
        ctx.save();
        //移动坐标
        ctx.translate(sprite.dx,sprite.dy);
        ctx.scale(scale,scale);
        ctx.drawImage(img,sprite.sx,sprite.sy,sprite.sw,sprite.sh,0,0,sprite.dw,sprite.dh);
        //恢复状态
        ctx.restore();
    },1);

}

点击查看原文阅读(321) | 评论(0) | 分类:前端开发HTML5/JS

由杀人游戏写程序分析 (2011-09-16)

用PHP分析杀人游戏 ,仅供参考
某地发生了一起谋杀案，警察通过排查确定杀人凶手必为4个嫌疑犯中的一个。以下为4个嫌疑犯的供词。

A说：不是我。
B说：是C。
C说：是D。
D说：C在胡说。
已知3个人说了真话，1个人说的是假话。请根据这些信息，写一个程序来确定到底谁是凶手

<php
$men = array ( 'A','B','C','D' ) ;
foreach ( $men as $man ){
	if( ($man!='A')+($man=='C')+($man=='D')+($man!='D') == 3 ){
		echo $man . ' is the killer.' ;
	}
}

点击查看原文阅读(354) | 评论(0) | 分类:算法,逻辑分析