Html实验报告
实验主题:运用html语言编写一个网站或游戏。
小组成员:软件1106班 孙高飞 20112250 软件1106班 钟伟 20112260
实验目的:检测自己掌握html的程度,训练运用html语言编程的能力,使自己多掌握一门编程的语言。
实验题目:小游戏----“愤怒的小鸟”。
实验过程:我们俩在选择题目时,本来想做一个网站,但又觉得网站没啥意思,所以我们决定做一个小游戏。我们吸收了“桌面弹球”和“愤怒的小鸟”的经验,结合了两者的界面和规则,编写了一个小游戏。当然,做小游戏并不是一帆风顺的,我们也有一些难题,就不一一阐述了,最后通过上网搜索和查资料的方法都一一解决了,最终生成了这个小游戏。
代码:<html>
<head>
<meta charset="UTF-8">
<title>Box2dWeb Demo</title>
</head>
<body onLoad="init();">
<center>
<canvas id="canvas" width="600" height="600" style="background-color:#000;" >No support </canvas>
<audio id="music" autoplay="true" src="music.ogg" loop=-1></audio>
</center>
</body>
<script type="text/javascript" src="Box2dWeb-2.1.a.3.min.js"></script>
<script type="text/javascript" defer>
// <audio id="music" autoplay="true" src="music.ogg" loop=-1></audio>
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var pig = new Image();
pig.src="pig.png";
var bird=new Image();
bird.src="bird.png";
var background=new Image();;
background.src="background.png";
var left=new Image();
left.src="left.png";
var right=new Image();
right.src="right.png";
var pig2=new Image();
pig2.src="pig2.png";
var egg=new Image();
egg.src="egg.png";
var smallPig=new Image();
smallPig.src="smallPig.png";
var gamestart=new Image();
gamestart.src="gamestart.png";
var gameState=["GameStart","InGame","GameOver","GameWin"];
var currentGameState=gameState[0];
var Level=["Level1","Level2"];
var currentLevel=Level[0];
var numberofenemy=32;
var boolhasEnemy=1;
<body onLoad="init();">
function init(){
var b2Vec2 = Box2D.Common.Math.b2Vec2
, b2AABB = Box2D.Collision.b2AABB
, b2BodyDef = Box2D.Dynamics.b2BodyDef
, b2Body = Box2D.Dynamics.b2Body
, b2FixtureDef = Box2D.Dynamics.b2FixtureDef
, b2Fixture = Box2D.Dynamics.b2Fixture
, b2World = Box2D.Dynamics.b2World
, b2MassData = Box2D.Collision.Shapes.b2MassData
, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
, b2DebugDraw = Box2D.Dynamics.b2DebugDraw
, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef
,b2RevoluteJointDef = Box2D. Dynamics. Joints. b2RevoluteJointDef
;
var world;
var ground;
var enemy;
var leftFlipper;
var rightFlipper;
var leftjoint;
var rightjoint;
var ourbird;
var life=21;
var herolife=1;
createworld();
createground();
createcircle();
createbuttom();
createsmallEnemy();
createFlipper();
window.setInterval(update, 1000 / 60);
var mouseX, mouseY, mousePVec, isMouseDown, selectedBody, mouseJoint;
var canvasPosition = getElementPosition(document.getElementById("canvas"));
document.addEventListener("mousedown", function(e) {
isMouseDown = true;
handleMouseMove(e);
document.addEventListener("mousemove", handleMouseMove, true);
}, true);
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", handleMouseMove, true);
isMouseDown = false;
mouseX = undefined;
mouseY = undefined;
}, true);
function handleMouseMove(e) {
mouseX = (e.clientX - canvasPosition.x) / 30;
mouseY = (e.clientY - canvasPosition.y) / 30;
};
function getBodyAtMouse() {
mousePVec = new b2Vec2(mouseX, mouseY);
var aabb = new b2AABB();
aabb.lowerBound.Set(mouseX - 0.001, mouseY - 0.001);
aabb.upperBound.Set(mouseX + 0.001, mouseY + 0.001);
selectedBody = null;
world.QueryAABB(getBodyCB, aabb);
return selectedBody;
}
function getBodyCB(fixture) {
if(fixture.GetBody().GetType() != b2Body.b2_staticBody) {
if(fixture.GetShape().TestPoint(fixture.GetBody().GetTransform(), mousePVec)) {
selectedBody = fixture.GetBody();
return false;
}
}
return true;
}
function createworld()
{
world = new b2World(new b2Vec2(0, 10), true)
};
function createbuttom()
{
var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_staticBody;
bodyDef.userData="thebuttom";
bodyDef.position = new b2Vec2(0,0);
var buttom=world.CreateBody(bodyDef);
var fixDef = new b2FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2;
var pd=new b2PolygonShape;
pd.SetAsEdge(new b2Vec2(11.07, 18.7), new b2Vec2(8.93, 18.7));
fixDef.shape=pd;
buttom.CreateFixture(fixDef);
}
function createground()
{
var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_staticBody;
bodyDef.userData='ground';
bodyDef.position = new b2Vec2(0,0);
ground=world.CreateBody(bodyDef);
var fixDef = new b2FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2;
var pd=new b2PolygonShape;
pd.SetAsEdge(new b2Vec2(5, 0), new b2Vec2(15, 0));
fixDef.shape=pd;
ground.CreateFixture(fixDef);
pd.SetAsEdge(new b2Vec2(15, 0), new b2Vec2(15, 14));
fixDef.shape=pd;
ground.CreateFixture(fixDef);
pd.SetAsEdge(new b2Vec2(15, 14), new b2Vec2(10, 20));
fixDef.shape=pd;
ground.CreateFixture(fixDef);
pd.SetAsEdge(new b2Vec2(10, 20), new b2Vec2(5, 14));
fixDef.shape=pd;
ground.CreateFixture(fixDef);
pd.SetAsEdge(new b2Vec2(5, 14), new b2Vec2(5, 0));
fixDef.shape=pd;
ground.CreateFixture(fixDef);
};
function createenemy()
{
var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_staticBody;
bodyDef.userData="enemy1";
var fixDef = new b2FixtureDef;
fixDef.density = 1;
fixDef.friction = 0.5;
fixDef.restitution =0.1;
fixDef.shape = new b2CircleShape(2);
bodyDef.position.x = 1.0 * 10;
bodyDef.position.y = 0.7* 10;
enemy = world.CreateBody(bodyDef)
enemy.CreateFixture(fixDef);
}
function createsmallEnemy()
{
var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_staticBody;
bodyDef.position.Set(5, 1);
bodyDef.userData="smallenemy1";
var fixDef = new b2FixtureDef;
fixDef.density = 1;
fixDef.friction = 0.5;
fixDef.restitution =0.1;
fixDef.shape = new b2CircleShape(0.5);
for(ci=0;ci<8;ci++)
{
for(cj=0;cj<4;cj++)
{
bodyDef.position.x =5 +0.625+(ci)*1.25;
bodyDef.position.y = 2.5+2.5*cj;
enemy = world.CreateBody(bodyDef)
enemy.CreateFixture(fixDef);
}
}
}
function createcircle()
{
var bodyDef = new b2BodyDef;
bodyDef.userData = 'ourbird';
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.bullet = true;
bodyDef.position.Set(5, 1);
var fixDef = new b2FixtureDef;
fixDef.density = 1;
fixDef.friction = 0;
fixDef.restitution =0.5;
fixDef.shape = new b2CircleShape(0.3);
bodyDef.position.x = 1.2 * 10;
bodyDef.position.y = 1.4* 10;
ourbird = world.CreateBody(bodyDef)
ourbird.CreateFixture(fixDef);
};
function createFlipper()
{
var p1= new b2Vec2(11.6, 16.4);
var p2= new b2Vec2(8.4, 16.4);
var bodyDef = new b2BodyDef;
bodyDef.userData = 'leftflipper';
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position=p2;
leftFlipper=world.CreateBody(bodyDef);
bodyDef.userData = 'rihtflipper';
bodyDef.position=p1;
rightFlipper=world.CreateBody(bodyDef);
var pd=new b2PolygonShape;
pd.SetAsBox(1.3,0.08);
var fixDef = new b2FixtureDef;
fixDef.density = 10.0;
fixDef.shape=pd;
leftFlipper.CreateFixture(fixDef);
rightFlipper.CreateFixture(fixDef);
var jd= new b2RevoluteJointDef();
jd.bodyA = ground;
jd.localAnchorB.SetZero();
jd.enableMotor = true;
jd.maxMotorTorque = 1000;
jd.enableLimit = true;
jd.motorSpeed = 0;
jd.Initialize(ground,rightFlipper,new b2Vec2(13, 16.4));
jd.lowerAngle = -30.0 *Math.PI/ 180.0;
jd.upperAngle = 15.0 * Math.PI/ 180.0;
rightjoint=world.CreateJoint(jd);
jd.motorSpeed = 0.0;
jd.Initialize(ground,leftFlipper,new b2Vec2(7, 16.4));
jd.lowerAngle = -15.0 * Math.PI / 180.0;
jd.upperAngle = 30.0 * Math.PI / 180.0;
leftjoint=world.CreateJoint(jd);
};
var listener = new Box2D.Dynamics.b2ContactListener;
listener. EndContact = function(contact)
{
if ((contact.GetFixtureA().GetBody().GetUserData()== 'ourbird') && (contact.GetFixtureB().GetBody().GetUserData()== 'enemy1') ) {
if(getValue(contact.GetFixtureA().GetBody().GetLinearVelocity())>5)
life=life-1;
}
if ((contact.GetFixtureA().GetBody().GetUserData()== 'ourbird') && (contact.GetFixtureB().GetBody().GetUserData()== 'smallenemy1') ) {
{
contact.GetFixtureB().GetBody().SetUserData("dead");
}
}
if ((contact.GetFixtureA().GetBody().GetUserData()== 'thebuttom') && (contact.GetFixtureB().GetBody().GetUserData()== 'ourbird'))
{
herolife=herolife-1; }
}
function getValue(value)//求一个向量的模
{
var a=value.x*value.x;
var b=value.y*value.y;
var c=Math.sqrt(a+b);
return c;
}
function keydown(e)
{
var e = e || event;
var currKey = e.keyCode || e.which || e.charCode;
if((currKey == 90))
{
leftjoint.SetMotorSpeed(-40.0);
}
if((currKey == 77))
{
rightjoint.SetMotorSpeed(40.0);
}
}
function Destorybody()
{
for (b = world.GetBodyList() ; b; b = b.GetNext())
{
if (b.GetUserData() == 'smallenemy1')
{
world.DestroyBody(b);
}
if (b.GetUserData() == 'enemy1')
{
world.DestroyBody(b);
}
}
}
function keyup(e)
{
var e = e || event;
var currKey = e.keyCode || e.which || e.charCode;
if((currKey == 90))
{
leftjoint.SetMotorSpeed(40.0);
}
if((currKey == 77))
{
rightjoint.SetMotorSpeed(-40.0);
}
}
function check()
{
if(numberofenemy<=0)
{
currentLevel=Level[1];
}
if(herolife<=0)
{
currentGameState=gameState[2];//GameLoose
}
if(life<=0)
{
currentGameState=gameState[3];//GamwWin
}
}
function drawBasicThing()
{
context.clearRect(0, 0, 600, 600);
context.drawImage(background,150,0);
world.SetContactListener(listener);
for (b = world.GetBodyList() ; b; b = b.GetNext())
{
if (b.GetUserData() == 'dead')
{
world.DestroyBody(b);
numberofenemy=numberofenemy-1;
}
}
if( numberofenemy<=0&&boolhasEnemy==1)
{
createenemy();
boolhasEnemy=0;
}
world.Step(1 / 60, 10, 10);
world.ClearForces();
}
function drawUserThing()
{
for (b = world.GetBodyList() ; b; b = b.GetNext())
{
if (b.GetUserData() == 'enemy1')
{
var pos = b.GetPosition();
context.save();
context.translate(pos.x * 30, pos.y * 30);
if(life>=10)
context.drawImage(pig, -60, -60);
else if(life>=3)
context.drawImage(pig2, -60, -60);
else
context.drawImage(egg, -60, -60);
context.restore();
}
if (b.GetUserData() == 'ourbird')
{
var pos = b.GetPosition();
context.save();
context.translate(pos.x * 30, pos.y * 30);
context.rotate((b.GetAngle()));
context.drawImage(bird, -9, -9);
context.restore();
}
if (b.GetUserData() == 'rihtflipper')
{
var pos = b.GetPosition();
context.save();
context.translate(pos.x * 30, pos.y * 30);
context.rotate((b.GetAngle()));
context.drawImage(left, -39, -4);
context.restore();
}
if (b.GetUserData() == 'leftflipper')
{
var pos = b.GetPosition();
context.save();
context.translate(pos.x * 30, pos.y * 30);
context.rotate((b.GetAngle()));
context.drawImage(right, -39, -4);
context.restore();
}
if (b.GetUserData() == 'smallenemy1')
{
var pos = b.GetPosition();
context.save();
context.translate(pos.x * 30, pos.y * 30);
context.drawImage(smallPig, -15, -15);
context.restore();
}
}
}
function swtkeyboard(e)
{
var evtobj=window.event? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit.
var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode
var actualkey=String.fromCharCode(unicode)
if(actualkey=="j")
{
life=21;
herolife=1;
currentGameState=gameState[1];
currentLevel=Level[0];
}
if(currentGameState=="GameOver"||currentGameState=="GameWin")
{
if(actualkey=="r")
{
life=21;
herolife=1;
currentGameState=gameState[0];
currentLevel=Level[0];
leftjoint.SetMotorSpeed(-10.0);
rightjoint.SetMotorSpeed(10.0);
Destorybody();
numberofenemy=32;
boolhasEnemy=1;
createcircle();
createsmallEnemy();
}
}
}
function gameStart()
{
context.clearRect(0, 0, 600, 600);
context.drawImage(gamestart, 0, 0);
document.onkeypress=swtkeyboard;
}
function gameOver()
{
context.clearRect(0, 0, 600, 600);
world.DestroyBody(ourbird);
context.fillStyle='#0000FF';
context.font='italic 30px sans-serif';
context.textBaseline='top';
context.fillText('游戏结束,按R重新开始',100,300);
document.onkeypress=swtkeyboard;
}
function gameWin()
{
context.clearRect(0, 0, 600, 600);
world.DestroyBody(ourbird);
context.fillStyle='#0000FF';
context.font='italic 30px sans-serif';
context.textBaseline='top';
context.fillText('你赢了,按R重新开始',100,300);
document.onkeypress=swtkeyboard;
}
function inGame()
{
document.onkeydown = keydown;
document.onkeyup=keyup;
drawBasicThing()
check();
drawUserThing();
mousejoint();
}
function update()
{
switch(currentGameState)
{
case "GameStart":
gameStart();
break;
case "InGame":
inGame();
break;
case "GameOver":
gameOver();
break;
case "GameWin":
gameWin();
break;
}
};
function mousejoint()
{
if(isMouseDown && (!mouseJoint))
{
var body = getBodyAtMouse();
if(body)
{
var md = new b2MouseJointDef();
md.bodyA = world.GetGroundBody();
md.bodyB = body;
md.target.Set(mouseX, mouseY);
md.collideConnected = true;
md.maxForce = 300.0 * body.GetMass();
mouseJoint = world.CreateJoint(md);
body.SetAwake(true);
}
}
if(mouseJoint)
{
if(isMouseDown)
{
mouseJoint.SetTarget(new b2Vec2(mouseX, mouseY));
}
else
{
world.DestroyJoint(mouseJoint);
mouseJoint = null;
}
}
}
function getElementPosition(element)
{
var elem=element, tagname="", x=0, y=0;
while((typeof(elem) == "object") && (typeof(elem.tagName) != "undefined"))
{
y += elem.offsetTop;
x += elem.offsetLeft;
tagname = elem.tagName.toUpperCase();
if(tagname == "BODY")
elem=0;
if(typeof(elem) == "object")
{
if(typeof(elem.offsetParent) == "object")
elem = elem.offsetParent;
}
}
return {x: x, y: y};
};
//
}
</script>
</html>
游戏截图:
第一关:
第二关:
第三关:
第四关:
实验总结:我们认为这个游戏做得还不错,因为学习时间的原因,我们这个小游戏有很多不足的地方,主要是因为刚开始学习html嘛。从这个小游戏中,我们也学会了很多编程技巧,在今后的编程生涯中,这会是一个难忘的经历。