06、开源游戏-“胡子”开始界面设计-代码

项目地址

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是显示隐藏。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>胡子-即时战略游戏</title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div id="gamecontainer">
  <div id="singleplayer" class="gamebtn_"></div>
  <div id="multiplayer" class="gamebtn_"></div>
  <div id="config" class="gamebtn_"></div>
  <div id="aboutme" class="gamebtn_"></div>
  <div id="checkbullet"></div>
  <div id="hero1" class="hero_"></div>
  <div id="hero2" class="hero_"></div>
  <div id="hero3" class="hero_"></div>
</div>
</body>
</html>

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;
}

未完待续。。。

来源：oschina

链接：https://my.oschina.net/u/933274/blog/210152

标签

html5开源游戏

html5

rts

开源游戏

NodeJS

游戏设计