Html实验报告

时间:2024.3.27

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嘛。从这个小游戏中,我们也学会了很多编程技巧,在今后的编程生涯中,这会是一个难忘的经历。

更多相关推荐:
html实验报告

教育信息技术与传媒学院InstituteofEducationalInformationTechnologyandCommunicationWeb教育平台开发实验报告学号101405619姓名陈芳专业信息技术班...

实验报告 -html实验1

HTML简单页面制作一实验目的1学习如何编写HTML文档2练习使用HTML中最基本的一些标签如定义标题段落及标记文字的显示格式背景图片图像水平线和超链接等二实验要求1掌握简单页面制作熟练使用常用标签2掌握超级链...

html网页设计实验报告

HTML页面设计一实验名称静态网页制作二实验目的与要求1掌握Dreamweaver软件的使用2掌握html语言中的表格和框架等的使用3掌握web应用开发技术的基础语言html语言三程序设计思想1基本框架的构建整...

使用html编制网页(实验报告)

实验三使用HTML语言编制网页学号20xx14004姓名王渝迪专业计算机科学与技术成绩实验目的使用HTML语言编制网页实验内容1熟悉Dreamweaver软件的环境2掌握HTML语言3独立完成一个HTML网页实...

html课内实验报告

一实验目的及实验环境1掌握网站开发环境的搭建2掌握DreamWeaver的使用3掌握HTML的基础语法4掌握表单的使用5掌握CSS的使用二实验内容1编写某校学生四六级考试前学习时间分配调查表网页实现如图1所示内...

html实验报告

实验ch11一个简单的应用程序一实验过程或者源代码lthtmlgtltheadgtlttitlegt11lttitlegtltheadgtltanamequot回顶部quotagtltbodygtlth2ali...

北邮信网html静态网页实验报告

题目基于html的静态网页制作姓名学院专业班级学号班内序号一实验主题主题及功能在这次实验中我设计的网页主题是高考是一个面向广大高三考生的网页在网页中提供有督促考生努力学习的励志视频有各大教育机构的超链接可以让考...

熟悉html (实验报告)

实验一熟悉HTML语言学号20xx14004姓名王渝迪专业计算机科学与技术成绩实验目的掌握HTML的基本内容实验内容1熟悉Dreamweaver软件的环境2掌握HTML语言3独立完成一个HTML作品实验步骤打开...

html实验项目

课程名称html网页设计实验室名称软件实验室实验项目CSS综合实例预习时间4246实验时间49软件12班411实验内容及步骤内容根据给定的网页效果图使用firework和dreamweaver做出网页步骤以下内...

html5实训

校外实习实习报告系部电子信息与电气工程系专业电子商务班级电子商务111学号20xx010220xx姓名蒋慧指导老师李繁陈美荣实习时间20xx121720xx1228一实习目的和任务让我们学会用代码编写网页最重要...

《Html+Css网站设计》实训任报告

安徽机电职业技术学院HtmlCss网站设计课程实训说明书系部信息工程系班级姓名指导教师20xx20xx摘要熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容培养我们利用计算机进行商务网页设计的基本思...

第一次数学实验报告Matlab基础知识

数学实验报告实验名称Matlab基础知识20xx年4月一实验目的1了解Matlab软件熟悉软件界面和基本操作2了解Matlab基本运算掌握Matlab数据类型以及矩阵和数组基本运算3掌握Matlab程序设计掌握...

html实验报告(10篇)