项目地址

code.google地址：

https://outlaw.googlecode.com/svn/trunk

git.oschina地址：

https://git.oschina.net/eternal_rider/outlaw

在开始界面中，玩家要选择大当家、游戏类型（单人、多人），还可设置游戏（音乐等）和查看作者信息。如下图所示：

开始界面设计代码

我们首先引入了jquery库、common.js，styles.css，common.js为处理用户选择的事件；styles.css定义了所有样式。

我们通过样式class来控制div是显示隐藏。

common.js

目前这里只处理当玩家选大当家时，设置选择子弹洞的位置，即top值。

玩家选择游戏按钮时，我们只做了弹出用户选中按钮的id，以后我们实现。

$(function(){	$(".hero_").click(function(){			var selectedHero = $(this).attr("id");			if(selectedHero){				var checkbulletY = selectedHero == "hero1"?"160px":selectedHero =="hero2"?"255px":"350px";				$("#checkbullet").css({"top":checkbulletY});			}	});	$(".gamebtn_").click(function(){			var item = $(this).attr("id");			alert(item);	});});

styles.css

不具体说明

body{	background-color:#000}#gamecontainer {	width:798px;	height:498px;	background: url(images/common/bg.jpg);	border: 1px solid black;}#singleplayer {	position:absolute;	width:142px;	height:30px;	z-index:1;	left: 481px;	top: 162px;	cursor:pointer;}#multiplayer {	position:absolute;	width:142px;	height:30px;	z-index:1;	left: 481px;	top: 216px;	cursor:pointer;}#config {	position:absolute;	width:142px;	height:30px;	z-index:1;	left: 481px;	top: 271px;	cursor:pointer;}#aboutme {	position:absolute;	width:142px;	height:30px;	z-index:1;	left: 481px;	top: 323px;	cursor:pointer;}#checkbullet {	position:absolute;	width:20px;	height:21px;	background: url(images/common/bullet_d.png);	z-index:2;	left: 343px;	top: 160px;}#hero1 {	position:absolute;	width:60px;	height:60px;	z-index:2;	left: 150px;	top: 149px;	cursor:pointer;}#hero2 {	position:absolute;	width:60px;	height:60px;	z-index:2;	left: 150px;	top: 242px;	cursor:pointer;}#hero3 {	position:absolute;	width:60px;	height:60px;	z-index:2;	left: 150px;	top: 339px;	cursor:pointer;}

未完待续。。。