craftyjs
/
index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - JavaScript游戏引擎, HTML5游戏引擎</title>
	<link rel="shortcut icon" href="./favicon.ico">
	<link type="text/css" rel="stylesheet" href="./craftyjs-site.css" />
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="./"> <img class="logo" src="./images/text-logo.png" /> </a>

				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="./">首页</a></li>
						<li><a href="./getting-started/">快速开始</a></li>
						<li><a href="./documentation/">文档</a></li>
						<li><a href="./api/">API</a></li>
						<li><a href="./components/">组件</a></li>
						<li class="emph"><a href="./#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">


<div class="row splash">

	<div id = "splash-right">
<pre><code class="language-javascript"><span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    Crafty.init();
    <span class="hljs-comment">// 一个可以使用方向键控制的蓝色方块</span>
    <span class="hljs-keyword">var</span> player = Crafty.e(<span class="hljs-string">"2D, Canvas, Color, Fourway"</span>)
        .attr({<span class="hljs-attr">x</span>:<span class="hljs-number">100</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">100</span>, <span class="hljs-attr">w</span>:<span class="hljs-number">50</span>, <span class="hljs-attr">h</span>:<span class="hljs-number">50</span>})
        .color(<span class="hljs-string">"blue"</span>)
        .fourway(<span class="hljs-number">3</span>);
};</code></pre>
	</div>
	<div id="splash-left">
		<div id="splash-text">
			<div class="row" id="blurb">
				<!-- <div class="blurb-title">CraftyJS</div> -->
				<div class="col-md-12" class="title-text">一个灵活的JavaScript游戏框架</div>

			</div>


		</div>
		<div id="splash-download">
			<div class="download-link">
				<a href="#install" class="download" id="download">
					<div>下载 Crafty</div>
					<div class="version">v. 0.8.0</div>
				</a>
				<div class="install-options">
					<a href="#direct-install">minified</a> &#8226; <a href="#bower-install">bower</a> &#8226; <a href="#npm-install">npm</a> &#8226; <a href="#nightly-install">nightly</a>

				</div>
			</div>
		</div>
	</div>

</div>

<div id="grid">

	<div class="outer-box"><div class="box "><div class="inner-box">
		<h2>开源</h2>

		<p>Crafty 使用 <a href="https://github.com/craftyjs/Crafty">Github</a> 进行开发, 我们期待大家贡献代码! <a href="https://github.com/craftyjs/Crafty/releases/tag/0.8.0">版本简介</a></p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box browser">
		<h2>跨浏览器</h2>
		<p>你的游戏将适用于所有现代浏览器，包括IE9。</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box canvas">
		<h2>Canvas or DOM</h2>
		<p>你可以选择渲染实体的方式，呈现效果看起来是一致的。</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box">
		<h2>文件小</h2>
		<p>足够小，你不用担心它会给你的游戏增加额外负担。</p>
	</div></div></div>

	<div class="outer-box"><div class="box "><div class="inner-box">
		<h2>实体组件系统</h2>
		<p>一种很好的进行游戏开发的方式，因为没有很长的继承链。</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box sprite">
		<h2>精灵地图支持</h2>
		<p>切割的精灵地图很容易绘制游戏实体。</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box collide">
		<h2>碰撞检测</h2>
		<p>高级的 SAT 碰撞检测可以获得更多的信息，不仅仅是 true 或者 false 。</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box">
		<h2>事件系统</h2>
		<p>自定义事件可以在任何时候触发，也可以轻松地绑定。</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box">
		<h2>多种组件</h2>
		<p>众多的声音，动画，特效和输入组件使你的游戏脱颖而出！</p>
	</div></div>
	<div class="clearer"></div></div>
</div>


<div id="install-div">
	<h2 id="install">安装</h2>
	<div id="direct-install">
		<h3>直接下载</h3>

		<p>你可以下载一个常规或者压缩版本的Crafty:</p>
		<a class="bullet-point" href="./release/0.8.0/crafty.js">crafty.js</a>
		<a class="bullet-point" href="./release/0.8.0/crafty-min.js">crafty-min.js</a>
	</div>
	<div id="npm-install">
		<h3>npm 模块</h3>
		<p>Crafty 可以作为 <a href="https://www.npmjs.org">npm</a> 模块使用。</p>
		<code class="grey">$ npm install craftyjs</code>
		<p>你可以通过实例查看如何使用:</p>
		<a class="bullet-point" href="https://github.com/kevinsimper/craftyjs-npm-example">npm example</a>
	</div>
	<div id="bower-install">
		<h3>Bower 安装</h3>
		<p>使用 <a href="http://bower.io/">bower</a> 安装, 命令如下</p>
		<code class="grey">$ bower install crafty</code>
		<p>将会获取并安装最新版本的 crafty 到你项目的 bower 目录。</p>
	</div>
	<div id="nightly-install">
		<h3>最新分发</h3>

		<p>每次成功合并后 Travis 都会上传最新的构建:</p>
		<a class="bullet-point" href="https://github.com/craftyjs/Crafty-Distro/tree/nightlies">Nightly distribution</a>
	</div>
</div>

<div class="clearer"></div>
<div id="contributors" class="half">
	<h2>开发小组
	</h2>
	<p>活跃成员:
		<ul>
			<li><a href="https://github.com/starwed">starwed</a> (主要成员)</li>
			<li><a href="https://github.com/kevinsimper">Kevin Simper</a></li>
			<li><a href="https://github.com/mucaho">mucaho</a></li>
		</ul>
	</p>
	<p>原作者: Louis Stowasser</p>

</div>

<div class="clearer"></div>
</div>


		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="./images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="./images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="./images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="./">首页</a></li>
				<li><a href="./getting-started/">快速开始</a></li>
				<li><a href="./documentation/">文档</a></li>
				<li><a href="./api/">API</a></li>
				<li><a href="./components/">组件</a></li>
				<li class="emph"><a href="./#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>