2. 程式人生 > >HTML5小遊戲之見縫插針

HTML5小遊戲之見縫插針

阿新 • • 發佈：2019-01-18

今天給大家帶來的就是一款叫做《見縫插針》的遊戲。有空你就往裡插，直到你無處可插！看你能過多少關！

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

程式碼如下：

<!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>

相關推薦

HTML5小遊戲之見縫插針

今天給大家帶來的就是一款叫做《見縫插針》的遊戲。有空你就往裡插，直到你無處可插！看你能過多少關！ 簡潔大氣 黑白搭配遊戲畫面非常的簡潔，米白色的背景中央，放置著一個不斷旋轉的太陽狀的球體，周邊網狀似的放射連線著許多小球，又有點宇宙中星球的感覺，所有球體均以黑色為主，與米白色的背景產生出了鮮明的對比，在一定程

微信HTML5小遊戲之推箱子

經典的推箱子是一個來自日本的古老遊戲，目的是在訓練你的邏輯思考能力。在一個狹小的倉庫中，要求把木箱放到指定的位置，稍不小心就會出現箱子無法移動或者通道被堵住的情況，所以需要巧妙的利用有限的空間和通道，合理安排移動的次序和位置，才能順利的完成任務。推箱子游戲是一種老少皆宜的益

HTML5 經典小遊戲之坦克（二）

上次寫到坦克只能發出子彈 今天讓坦克連續發射子彈 並擊中敵人的坦克 那麼問題來了？如何讓子彈飛起來呢？ 思路: 1.動起來 --- 必然會用到定時器 2.在那用？按空格發子彈後 3.子彈動起來的思路：按鈕的時候，先每隔50毫秒改變子彈的參考點的座標，再重新整理畫布，每隔10

[知了堂學習筆記]_JS小遊戲之打飛機（3）-飛機之間的互相撞擊，boss的出現，以及控制boss死亡

時間 i++ score console function sss 間隔 app tint 我的小飛機和敵軍小飛機撞擊的效果的實現： 1 /** 2 * 定義我的飛機與敵機碰撞的方法： 3 */ 4 function destoryMyPlane(){ 5

Python小遊戲之 - 飛機大戰美女 !

TP 飛機大戰 inf info ima com 圖片 大戰 .com 用Python寫的"飛機大戰美女"小遊戲 Python小遊戲之 - 飛機大戰美女 !

HTML5小遊戲-簡單抽獎小遊戲

ice orm store scrip stroke meta for oct 樣式 　　換了新工作以後，專註前端開發，平常空閑時間也比較多，可以多鉆研一下技術，寫一下博客。最近在學習canvas，參考網上的slotmachine插件，用canvas實現了一個簡單抽獎小遊戲

JavaScript前端開發小遊戲之智慧拼圖

HTML部分 <!DOCTYPE html> <html lang="en">     <head>         <meta charset="utf-8" /

使用JS和Canvas做一個html5小遊戲

這是一個很簡單的html5遊戲，通過學習原博文自己做了些改造， 這是遊戲的截圖： 1.有計算抓住的怪物的數量 2.有背景，英雄，怪物。 第一步：建立html檔案和js檔案 建立一個games資料夾，在資料夾中建立js資料夾，images資料夾，以

python的一個小遊戲之五子棋

原始碼如下： from tkinter import * root = Tk() canvas = Canvas(root,width = 400,height = 300) ###global clounm curwho= 1 ##1 yellow -1 blue o

C++小遊戲之2048

#include<iostream> #include<ctime> using namespace std; int map[4][4] = { 0 }; //因為2048是一個4X4的小方塊集合，所以定義一個二維陣列與之對應 void print(); //列印數組裡的數字

android簡單小遊戲之《猜猜雞蛋在哪隻鞋裡》

這是一個比較簡單的android小遊戲，實現的思路比較簡單。 實現效果圖： 下面是來看看具體實現的過程原始碼： package com.example.administrator.mygame; import android.support.v4.content.C

Java小遊戲之小迷宮遊戲

遊戲規則 按照位置為0的路線移動，上下左右方向鍵依次為 8、2、4、6 遊戲編碼 編碼思路：   定義一個二維陣列，七個一維陣列，每個一維陣列七個元素，並且按照遊戲規則設定0，1，初始值位置列印陣列，

Java小遊戲之鬥地主遊戲例項Map集合

Map的特點是什麼？ 1、Map物件是一個雙列的容器 2、兩列分別對應key和value，二者一一對應，是對映關係 3、Map中的資料以鍵值對的形式儲存 4、鍵值是唯一的，不能重複的 HashSet()和HashMap()之間的關係？ HashSet()底層是HashMap

C++ 小遊戲之推箱子

做完C的貪吃蛇遊戲後，感覺還不錯，剛好記得在HDU上做過一道關於推箱子游戲的演算法題目，即雙BFS。 所以我決定來做做C++的小遊戲推箱子，由於剛學C++，對C++還是不很熟練，但是思路還是很清楚的， 編寫程式碼還是很舒服的。！ 現在晒晒我的程式碼和詳細解釋，希望多交流~

12、Cocos2dx 3.0遊戲開發找小三之3.0中的生命周期分析

ide () mil and 地理 splay ioe ase ima 重開發人員的勞動成果。轉載的時候請務必註明出處：http://blog.csdn.net/haomengzhu/article/details/27706303 生命周期分析 在前面文章中我

【2048小遊戲】——CSS/原生js爬坑之純CSS模態對話框&遊戲結束

函數 一半 窗口 內容 href 標準 tex true 存儲空間 引言：2048小遊戲的結束界面，使用純CSS制作模態對話框，一般做模態對話框都會使用BootStrap自帶的模態對話框組件方便使用，但在制作要運行在移動端的小項目時，就不能使用BootStrap，因為文件太

Egret之微信小遊戲初體驗

Egret 微信 小遊戲 一 : 首先介紹2個命令: ①:發布小遊戲 egret public --target wxgame ②:用微信開發者工具打開 egret run --target wxgame 二 : 步驟 ① : 使用egret 5.1.2及其以上的版本創建一個EUI的遊戲項目我使用

Egret之微信小遊戲基礎Bug修復

Egret 微信小遊戲 小遊戲 問題 基礎 一 : 第三方類庫未定義如 : smallLib類庫 解決方案: 找到wxgame.ts , 在onFile方法中加入 if(filename == "libs/modules/smallLib/smallLib.j

初學JavaScript之顏色小遊戲

20px inf time select 改變顏色 interval one 準備 顏色 /*老師布置的的顏色小遊戲的作業，根據問題顯示的文字找出對應的顏色判斷小遊戲，可能有很多需要改進的代碼，後面會多多改進的，謝謝2018-07-15 12:45:59*/<!DO

Python學習之easygui實現簡單小遊戲

import random, easyguisecret = random.randint(1, 99)guess = 0tries = 0easygui.msgbox("""Hi! I'm the Dread Pirate Roberts, and I have a secret!It is a numbe