amcharts结合box2d引擎实现图表加愤怒的小鸟效果

代码语言: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": "" },
  {
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0