DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 小游戲之見縫插針HTML5版
小游戲之見縫插針HTML5版
編輯:HTML5教程     
今天給大家帶來的就是一款叫做《見縫插針》的游戲。有空你就往裡插,直到你無處可插!看你能過多少關!

簡潔大氣 黑白搭配
游戲畫面非常的簡潔,米白色的背景中央,放置著一個不斷旋轉的太陽狀的球體,周邊網狀似的放射連接著許多小球,又有點宇宙中星球的感覺,所有球體均以黑色為主,與米白色的背景產生出了鮮明的對比,在一定程度上,為玩家帶來了一定的視覺沖擊感。

試玩一下:http://hovertree.com/texiao/game/

不停轉動 點擊粘球
游戲的玩法非常簡單,當黑色的球體不停轉動的時候,大家只需通過點擊屏幕,讓屏幕下方帶有數字的小球粘到大球上,直的所有帶有數字的球都粘完即可。看似簡單的操作及玩法,但想讓帶有數字的小球不撞擊旁邊的小球,游戲也將宣告結束。


難度遞增 極具挑戰
本作采用關卡形式呈現,難度自然隨著關卡的深入不斷遞增,每關中的玩法並不是千篇一律的,為了緩解大家的膩煩感,數字球體時而變多,時而變少,球體轉動的速度也是時而變快時而緩慢,或者快慢結合,大家千萬別以為速度變慢是好事哦,速度變慢反而大家放松警惕,容易撞擊。

評測
總結:休閒娛樂玩一下
一番體驗下來,見縫插針確實是一款非常容易上瘾的休閒娛樂小游戲,小編何問起已經玩到根本停不下來了。雖然虐心,卻十分享受見縫插針般的刺激樂趣,很適合休閒娛樂時刻用來打發時間,無需聯網的它,同時具有不占內存的優點,會是一款可以隨時隨地拿出來體驗的佳作,怪不得如此受歡迎,喜歡挑戰的小伙伴們,不容錯過喲。


代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>虐心小游戲 見縫插針 - 何問起</title><base target="_blank" />
<meta charset="utf-8" />
<style>
body {
background-color: #c8c8c8;
overflow:scroll;
padding: 0;
margin: 0;
font-family:Helvetica;
font-family: Lato;
}
.center-box {
text-align: center;
position: absolute;
width: 300px;
height: 400px;
margin: -200px 0 0 -150px;
left: 50%;
top: 400px;
}
.title {
font-size: 50px;
}
.button {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin: -100px 0 0 -50px;
border: 2px solid #666;
color: #fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
font-size: 50px;
background: orange;
cursor:pointer
}
.button .text {
font-size: 15px;
padding: 15px 10px;
width: 80px
}
.tips {
position: absolute;
width: 300px;
height: 63px;
left: 100px;
top: 27%;
margin: -50px 0 0 -100px;
}
.lee_button1
{
z-index: 999;
border: 1px solid #0e0e0e;
border-radius: 10px;
color: #242424;
display: block;
font-size: 18px;
height: 37px;
left: 48%;
line-height: 37px;
margin: -100px 0 0 -75px;
position: absolute;
top: 93%;
width: 160px;
cursor:pointer;
display:none
}
.lee_button2
{
border: 1px solid #0e0e0e;
border-radius: 10px;
color: #242424;
display: block;
font-size: 18px;
height: 37px;
left: 48%;
line-height: 37px;
margin: -100px 0 0 -75px;
position: absolute;
top: 106%;
width: 160px;
cursor:pointer;
}
.lee_button3
{
border: 1px solid #fd3207;
border-radius: 10px;
color: #fd3207;
display: block;
font-size: 18px;
height: 37px;
left: 48%;
line-height: 37px;
margin: -100px 0 0 -75px;
position: absolute;
top: 80%;
width: 160px;
z-index: 999;
display:none
}
#lvnew
{
position:absolute;
top: 93%;
left:48%;
margin: -100px 0 0 -40px;
}
#btnReset{cursor:pointer}
.hvtholder{width:789px;margin:2px auto;}a{color:blue}
</style>
</head>
<body>

<canvas style="display:none;" id="stage"></canvas>
<div class="hvtholder">
<br /> <a href="http://hovertree.com">首頁</a>
<a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/hvtart/bjae/gbsam8un.htm">原文</a>
</div>
<div id="begin">
<section class="center-box">
<span class="title">見縫插針</span>

<div class="button">
<div id="txtAr"></div>
<div class="text"></div>
</div>

<span name="btnFW" class="lee_button1" id="btnFW">炫耀一下</span>

<a id="rehovertree" class="lee_button2">重頭再來</a>

<span class="lee_button3" id="btnGuanzhu" onclick="pay()" ontouchstart="pay()">跳過本關</span>

<div id="lvnew" style="font-size:14px;color:#555;margin-top: 10px;display:none;">
<span id="btnReset" ontouchstart="document.getElementById('lvnew').style.display='none';return false;">確定</span>
<a ontouchstart="document.getElementById('lvnew').style.display='none';return false;" id="cancelhovertree" style="display:inline-block;margin-left:30px;color:#666;cursor:pointer" class="btn_lee">取消</a>
<div id="tip" style="font-size:14px;color:#555;margin-top: 15px;display:none;"></div>
</div>

</section>

<section id="wxArrow" style="display: none;">
<div style="position:absolute;width:100%;height:100%;opacity: 0.7;background-color:#000">
</div>
</section>
</div>
<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script src="http://hovertree.com/texiao/game/index/jfczhovertree.js"></script>
<script>
$("#cancelh"+"overtree").on("click", function () { document.getElementById('lvnew').style.display = 'none'; return false; })
$("#rehovertr" + "ee").on("click", function () { document.getElementById('lvnew').style.display = 'block'; return false; })
$("#btnReset").on("click", function () { document.getElementById('lvnew').style.display = 'none'; return false; })
</script>

</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved