<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>曲线谜团</title>
<meta name="keywords" http-equiv="keywords" content="What a tangled web we weave.">
<meta name="description" content="Get more tangled than your friends to win the game of Entanglement.">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<style type="text/css">
body {
background: #fff8bc url('i/bg.png');
font-family: arial, sans serif;
margin: 0;
padding: 0;
overflow: hidden;
}
.local-multiplayer {
background: url('i/bg-local.png');
}
h1 {font-size: 1.2em; color: #222; position: absolute; z-index: 100; top: 0px; left: 0px; right: 0px; height: 55px; background: url('i/entanglement-logo.png') 25px 5px no-repeat;}
h1 span {display: none;}
img {border: none;}
form {position: absolute; top: 240px; left: 150px;}
#tag-line {display: none;}
#branding {position: absolute; right: 10px; top: 55px;}
#menu {position: absolute; top: 75px; left: 2px; display: none; z-index: 98; background: url('i/menu.png') no-repeat; padding: 188px 0 0 170px;}
#ban-button {position: absolute; top: 238px; right: 5px; font-size: 0.6em;}
#game {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
}
#preview {position: absolute; width: 20px; height: 20px; cursor: pointer;}
#queue {position: absolute; width: 200px; height: 200px; cursor: pointer; bottom: 63px; left: 10px;}
#msg {text-align: center; font-size: 0.9em; font-weight: bold; position: absolute; bottom: 205px; left: 15px; width: 180px; z-index: 99;}
#scores {text-align: left; font-size: 0.9em; font-weight: bold; position: absolute; top: 60px; left: 15px; z-index: 98;}
#form-stop {text-align: left; font-size: 0.9em; font-weight: bold;}
#bar {width: 100%; position: absolute; bottom: 0px; height: 15px;}
.progress {background: yellow;}
#begin {font-size: 1.2em; line-height: 1.6em; padding: 5px 15px; width: 200px; text-align: center; margin: 0.4em; background: #fff; cursor: pointer; display: block; font-weight: bold;}
#instructions {text-align: justify; position: absolute; top: 75px; bottom: 175px; left: 3em; right: 3em; padding: 0 2em; line-height: 1.6em; font-size: 0.9em; background: transparent url('instructions-bg.png') bottom center no-repeat;}
#guesses {font-size: 0.8em; color: #888; margin: 1em;}
a.corner-link {background: url('http://gopherwoodstudios.com/i/flip.png') 5px 0px no-repeat; width: 34px; height: 30px; z-index: 1000; position: absolute; display: block; top: 0px; right: 0px;}
a.corner-link:hover {background: url('http://gopherwoodstudios.com/i/flip.png') bottom left no-repeat; width: 100px; height: 100px; position: absolute; display: block; top: 0px; right: 0px;}
a.corner-link span {display: none;}
a {text-decoration: none;}
/* Message Box Properties */
h2 {font-size: 1em; margin: 0; padding: 0; line-height: 1.8em; background: #eee; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.64, #fff), color-stop(0.27, #eee)); background: -moz-linear-gradient(center bottom, #fff 64%, #eee 27%);}
#message-box {display: none; z-index: 1008; position: absolute; top: 50%; left: 50%; border: 3px solid #fff; border-radius: 5px; text-align: center; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAANSURBVBhXY/j///9dAAnZA9um4/aEAAAAAElFTkSuQmCC);}
#message-box p {line-height: 1.5em; font-size: 0.9em; margin: 1em; text-align: justify;}
.return:link, .return:visited {font-size: 0.8em; position: absolute; top: 2px; right: 2px; line-height: 1.8em; height: 1.8em; width: 1.8em; text-align: center; border: 1px solid #ddd; border-radius: 4px; color: #aaa; font-weight: bold; background: #f8f8f8; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.64, #fff), color-stop(0.27, #eee)); background: -moz-linear-gradient(center bottom, #fff 64%, #eee 27%);}
.return:active, .return:hover {font-size: 0.8em; position: absolute; top: 2px; right: 2px; line-height: 1.8em; height: 1.8em; width: 1.8em; text-align: center; border: 1px solid #aaa; border-radius: 4px; color: #aaa; font-weight: bold; background: #eee; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.27, #fff), color-stop(0.64, #eee)); background: -moz-linear-gradient(center bottom, #fff 27%, #eee 64%);}
.button:link, .button:visited {margin: 0 3em; padding: 0 1em; display: block; line-height: 2em; height: 2em; text-align: center; border: 1px solid #ddd; border-radius: 4px; color: #aaa; font-weight: bold; background: #f8f8f8; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.64, #fff), color-stop(0.27, #eee)); background: -moz-linear-gradient(center bottom, #fff 64%, #eee 27%);}
.button:active, .button:hover {margin: 0 3em; padding: 0 1em; display: block; line-height: 2em; height: 2em; text-align: center; border: 1px solid #aaa; border-radius: 4px; color: #aaa; font-weight: bold; background: #eee; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.27, #fff), color-stop(0.64, #eee)); background: -moz-linear-gradient(center bottom, #fff 27%, #eee 64%);}
#message-box .button {position: absolute; bottom: 15px; left: 50%; margin: 0 0 0 -100px; width: 200px; padding: 0;}
#browsers {margin: 5px 60px; padding: 0; width: 288px; height: 72px;}
#browsers li {float: left; margin: 0; padding: 0; list-style: none;}
#browsers a {height: 72px; width: 72px; display: block;}
#browsers span {display: none;}
.opera {background: url('i/browsers.png') -216px 0px no-repeat;}
.firefox {background: url('i/browsers.png') -144px 0px no-repeat;}
.chrome {background: url('i/browsers.png') -72px 0px no-repeat;}
.safari {background: url('i/browsers.png') 0px 0px no-repeat;}
</style>
<script type="text/javascript" src="./index_files/map.js"></script>
<script type="text/javascript" src="./index_files/player.js"></script>
<script type="text/javascript" src="./index_files/cookies.js"></script>
<script type="text/javascript">
var INSTRUCTIONS = '<a class="return" href="javascript:clearMessage();">X</a>' +
'<h2>玩法：</h2>' +
'<p>尽量连接更多的路线。你连接的线段越多，分数越高。用方向箭或是鼠标滚轮转动你的六角形，用鼠标点击或是按空格箭可以查看你的线路。尽量避免碰到墙壁，一旦碰上，游戏结束。</p>'+
'<a class="button" href="javascript:clearMessage();">' +
'开始游戏!</a>';
var WIDTH = +780;
var HEIGHT = +450;
var SCALE = +1;
var OFFSET_X = +100;
var OFFSET_Y = +173;
var GRID_X = OFFSET_X * 3;
var GRID_Y = OFFSET_Y * 2;
var numberOfTeams = 1;
var currentTeam = 0;
var teams;
////////////////////////////
/////// INPUT //////////////
document.onkeydown = function(e)
{
var evt = e || window.event;
switch (evt.keyCode)
{
case 18: //alt
case 90: // z del
case 46: swapTiles(); break;
case 13: //enter
case 32: placeTile(); return false; //spacebar - return false to prevent propagation to link in Opera
case 37: holdingTile.rotate(-1); return false; //West
case 38: holdingTile.rotate(-1); return false; //North
case 39: holdingTile.rotate(+1); return false; //East
case 40: holdingTile.rotate(+1); return false; //South
}
}
document.onkeyup = function(e)
{
var evt = e || window.event;
}
//to slow it down, store delta v
HTML5经典游戏——曲线谜团
5星 · 超过95%的资源 需积分: 10 199 浏览量
2013-06-01
14:49:48
上传
评论
收藏 46KB ZIP 举报 
HTML5经典游戏——曲线谜团.zip （11个子文件） 
lineq index_files 
gamesolitaire.js 5KB
entanglement-logo-250.png 6KB ga.js 25KB player.js 1KB map.js 8KB cookies.js 790B i entanglement-logo.png 5KB entanglement-logo-250.png 6KB bg.png 1KB flip.png 4KB index.htm 35KB
- 1
- 2
- 3
- 4
前往页