amcharts结合box2d引擎实现图表加愤怒的小鸟效果-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：amcharts结合box2d引擎实现图表加愤怒的小鸟效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400);
body {
  font-family: Lato, Tahoma;
  color: #888;
  font-size: 0.8em;
}

a {
  color: #8dab22;
  text-decoration: none
}

a:hover {
  color: #668300;
  text-decoration: none
}
</style>

</head>
<body translate="no">

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-serial.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/Box2dWeb-2.1.js"></script>
<div id="container" style="width: 900px; height: 500px; position:relative;">
<div id="chartdiv" style="width: 900px; height: 500px; position:absolute;" ontouchstart="addBird();" onmousedown="addBird();" onmouseup="releaseBird();" ontouchend="releaseBird();"></div>
<img src="http://repo.bfw.wiki/bfwrepo/image/5f4262275d9db.png" style="width:70px; height:110px; position:absolute; bottom:17px; left:100px; pointer-events: none;" />
<img src="http://repo.bfw.wiki/bfwrepo/image/5f4262460e0f0.png" id="bird" style="width:45px; height:45px; position:absolute; top:-100px; left:50px; pointer-events: none;" />
<div style="width:300px; top:84px; left:95px; position:absolute;">This small demo is a followup to the article about physics in data visualization. Demo is made with amCharts JavaScript Charts library and box2D physics engine. P.S. you know where to get the original game ;)</div>
</div>

<script>
// amcharts part

function randomData() {
  return [{
    "year": "" },
  {
    "year": "" },
  {
    "year": "" },
  {
    "year": "" },
  {
    "year": "" },
  {
    "year": "" },


  {
    "year": 2003,
    "europe": randomVal(),
    "namerica": randomVal() - 1,
    "asia": randomVal(),
    "pattern": {
      "url": "http://repo.bfw.wiki/bfwrepo/image/5f4263b759217.png",
      "width": 4,
      "height": 4 },

    "color": "#000000" },
  {
    "year": 2004,
    "europe": randomVal(),
    "namerica": randomVal() - 1,
    "asia": randomVal(),
    "pattern": {
      "url": "http://repo.bfw.wiki/bfwrepo/image/5f4263b759217.png",
      "width": 4,
      "height": 4 },

    "color": "#000000" },
  {
    "year": 2005,
    "europe": randomVal(),
    "namerica": randomVal(),
    "asia": randomVal() },


  {
    "year": "" },


  {
    "year": "" },


  {
    "year": "" }];


}

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "marginLeft": 10,
  "marginBottom": 20,
  "balloon": {
    "fontSize": 16 },

  "panEventsEnabled": true,
  "autoMargins": false,
  "startDuration": 1,
  "columnWidth": 0.4,
  "dataProvider": randomData(),
  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0.3,
    "gridAlpha": 0.1,
    "inside": true,
    "position": "left" }],

  "graphs": [{
    "fillAlphas": 0.8,
    "lineAlpha": 0.3,
    "title": "Europe",
    "type": "column",
    "color": "#000000",
    "cornerRadiusTop": 6,
    "valueField": "europe",
    "balloonText": "[[title]]:[[value]]" },
  {
    "fillAlphas": 0.8,
    "lineAlpha": 0.5,
    "title": "North America",
    "type": "column",
    "color": "#000000",
    "lineColorField": "color",
    "patternField": "pattern",
    "cornerRadiusTop": 6,
    "valueField": "namerica",
    "balloonText": "[[title]]:[[value]]" },
  {
    "fillAlphas": 0.8,
    "lineAlpha": 0.3,
    "title": "Asia-Pacific",
    "type": "column",
    "color": "#000000",
    "cornerRadiusTop": 6,
    "valueField": "asia",
    "balloonText": "[[title]]:[[value]]" }],

  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0.3,
    "gridAlpha": 0.1,
    "tickLength": 0 } });



// generate random val
function randomVal() {
  return Math.round(Math.random() * 5) + 2;
}

// listen for init
chart.addListener("init", init);

// BOX2D (Physics) part
var width = 900;
var height = 500;
var pixels2meters = 30; // box2d uses meters, not pixels and this is ratio
var framesPerSecond = 30;
var world;
var columns = [];
var birdBody;
var birdBodyDef;
var birdFixtureDef;

function init() {
  setTimeout(initBox2D, 2000);
  bird = document.getElementById("bird");
}

function initBox2D() {
  var b2Vec2 = Box2D.Common.Math.b2Vec2;
  var b2BodyDef = Box2D.Dynamics.b2BodyDef;
  var b2Body = Box2D.Dynamics.b2Body;
  var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
  var b2Fixture = Box2D.Dynamics.b2Fixture;
  var b2World = Box2D.Dynamics.b2World;
  var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
  var b2CircleShape .........完整代码请登录后点击上方下载按钮下载查看