187 lines
6.3 KiB
HTML
187 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>2048</title>
|
|
|
|
<link href="/2048/style/main.css" rel="stylesheet" type="text/css">
|
|
<link rel="shortcut icon" href="/2048/favicon.ico">
|
|
<link rel="apple-touch-icon" href="/2048/meta/apple-touch-icon.png">
|
|
<link rel="apple-touch-startup-image" href="/2048/meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
|
|
<link rel="apple-touch-startup-image" href="/2048/meta/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
|
<meta name="HandheldFriendly" content="True">
|
|
<meta name="MobileOptimized" content="320">
|
|
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
|
|
<!-- 标题 -->
|
|
<meta itemprop="name" content="2048" />
|
|
<!-- 描述 -->
|
|
<meta itemprop="description" content="英博的小游戏" />
|
|
<meta itemprop="image" content="/2048/favicon.ico" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container" id="container">
|
|
<div class="heading" style="margin-top: 20px;">
|
|
<h1 class="title">2048</h1>
|
|
<div class="scores-container">
|
|
<div class="score-container">0</div>
|
|
<div class="best-container">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="above-game">
|
|
<p class="game-intro">合并数字到达<strong>2048!</strong></p>
|
|
<a class="restart-button">新游戏</a>
|
|
</div>
|
|
|
|
<div class="game-container">
|
|
<div class="game-message">
|
|
<p></p>
|
|
<div class="lower">
|
|
<a class="keep-playing-button">继续</a>
|
|
<a class="retry-button">重试</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-row">
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
</div>
|
|
<div class="grid-row">
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
</div>
|
|
<div class="grid-row">
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
</div>
|
|
<div class="grid-row">
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
<div class="grid-cell"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tile-container">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<p class="game-explanation">
|
|
<strong class="important">如何玩:</strong> 用你的<strong>方向键</strong> 移动方块。当两个具有相同数字的方块接触时，它们会<strong>合并为一个！</strong>数字到达2048即为胜利~
|
|
</p>
|
|
<hr>
|
|
<!-- Footer -->
|
|
<footer id="footer">
|
|
<p class="copyright" align="center">© RainSun <a href="https://lacus.site">WebSite</a>.</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="media" style="position:absolute; left: -9999px;">
|
|
<audio id="Mp3Me" style="clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);" autoplay autobuffer controls>
|
|
<source src="/2048/media/du.mp3">
|
|
</audio>
|
|
|
|
<audio id="Mp3Me2" style="clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);" autoplay autobuffer controls>
|
|
<source src="/2048/media/bo.mp3">
|
|
</audio>
|
|
|
|
<audio id="Mp3Me3" style="clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);" autoplay autobuffer controls>
|
|
<source src="/2048/media/win.mp3">
|
|
</audio>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// document.getElementById("container").addEventListener("click", GuitarTrack, false)
|
|
|
|
function MoveTrack() {
|
|
var mediaSrc = "/2048/media/du.mp3"
|
|
var Mp3Me = document.getElementById('Mp3Me');
|
|
|
|
if (Mp3Me.length > 1) { //2个元素正对不同浏览器兼容
|
|
Mp3Me[0].src = mediaSrc;
|
|
Mp3Me[1].src = mediaSrc;
|
|
}
|
|
if (Mp3Me.length == 1) {
|
|
Mp3Me[0].src = mediaSrc;
|
|
|
|
var node = document.getElementById('Mp3Me');
|
|
var newelem = document.createElement('source');
|
|
newelem.setAttribute('src', mediaSrc);
|
|
node.appendChild(newelem);
|
|
}
|
|
Mp3Me.load();
|
|
}
|
|
|
|
function MergeTrack() {
|
|
var mediaSrc = "/2048/media/bo.mp3"
|
|
var Mp3Me = document.getElementById('Mp3Me');
|
|
var Mp3Me2 = document.getElementById('Mp3Me2');
|
|
|
|
Mp3Me.pause();
|
|
if (Mp3Me.length > 1) { //2个元素正对不同浏览器兼容
|
|
Mp3Me2[0].src = mediaSrc;
|
|
Mp3Me2[1].src = mediaSrc;
|
|
}
|
|
if (Mp3Me2.length == 1) {
|
|
Mp3Me2[0].src = mediaSrc;
|
|
|
|
var node = document.getElementById('Mp3Me2');
|
|
var newelem = document.createElement('source');
|
|
newelem.setAttribute('src', mediaSrc);
|
|
node.appendChild(newelem);
|
|
}
|
|
Mp3Me2.load();
|
|
}
|
|
|
|
function WinTrack() {
|
|
var mediaSrc = "/2048/media/win.mp3";
|
|
var Mp3Me = document.getElementById('Mp3Me');
|
|
var Mp3Me2 = document.getElementById('Mp3Me2');
|
|
var Mp3Me3 = document.getElementById('Mp3Me3');
|
|
|
|
Mp3Me.pause();
|
|
Mp3Me2.pause();
|
|
if (Mp3Me.length > 1) { //2个元素正对不同浏览器兼容
|
|
Mp3Me3[0].src = mediaSrc;
|
|
Mp3Me3[1].src = mediaSrc;
|
|
}
|
|
if (Mp3Me3.length == 1) {
|
|
Mp3Me3[0].src = mediaSrc;
|
|
|
|
var node = document.getElementById('Mp3Me3');
|
|
var newelem = document.createElement('source');
|
|
newelem.setAttribute('src', mediaSrc);
|
|
node.appendChild(newelem);
|
|
}
|
|
Mp3Me3.load();
|
|
}
|
|
</script>
|
|
|
|
<script src="/2048/js/bind_polyfill.js"></script>
|
|
<script src="/2048/js/classlist_polyfill.js"></script>
|
|
<script src="/2048/js/animframe_polyfill.js"></script>
|
|
<script src="/2048/js/keyboard_input_manager.js"></script>
|
|
<script src="/2048/js/html_actuator.js"></script>
|
|
<script src="/2048/js/grid.js"></script>
|
|
<script src="/2048/js/tile.js"></script>
|
|
<script src="/2048/js/local_storage_manager.js"></script>
|
|
<script src="/2048/js/game_manager.js"></script>
|
|
<script src="/2048/js/application.js"></script>
|
|
</body>
|
|
|
|
</html>
|