最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript打字小游戲代碼

 更新時間:2011年12月26日 23:32:49   作者:  
上半年自學了JavaScript,然后就做了個打字小游戲玩玩
功能模塊:   程序設計:
   1.可選擇游戲時間,顯示倒計時       1.定義全局變量
   2.可選擇英文字母出現(xiàn)個數(shù)         2.控制游戲時間函數(shù)
   3.統(tǒng)計得分                3.動畫效果
   4.菜單選項                4.設定字母圖片出現(xiàn)的時間
                        5.判斷函數(shù)
                        6.游戲菜單
                        7.游戲時間選項
                        8.顯示游戲時間
                        9.游戲難度選項
                        10.游戲得分
  
  先上效果圖:(PS:美工是硬傷)

主要代碼設計:
復制代碼 代碼如下:
 
//-------全局變量------- 
var data={ 
"10":["<img src='images/A.gif'/>"],"11":["<img src='images/B.gif'/>"],"12":["<img src='images/C.gif'/>"],"13":["<img src='images/D.gif'/>"], 
"14":["<img src='images/E.gif'/>"],"15":["<img src='images/F.gif'/>"],"16":["<img src='images/G.gif'/>"],"17":["<img src='images/H.gif'/>"], 
"18":["<img src='images/I.gif'/>"],"19":["<img src='images/J.gif'/>"],"20":["<img src='images/K.gif'/>"],"21":["<img src='images/L.gif'/>"], 
"22":["<img src='images/M.gif'/>"],"23":["<img src='images/N.gif'/>"],"24":["<img src='images/O.gif'/>"],"25":["<img src='images/P.gif'/>"], 
"26":["<img src='images/Q.gif'/>"],"27":["<img src='images/R.gif'/>"],"28":["<img src='images/S.gif'/>"],"29":["<img src='images/T.gif'/>"], 
"30":["<img src='images/U.gif'/>"],"31":["<img src='images/V.gif'/>"],"32":["<img src='images/W.gif'/>"],"33":["<img src='images/X.gif'/>"], 
"34":["<img src='images/Y.gif'/>"],"35":["<img src='images/Z.gif'/>"]
};
var datas=new Array();//隨機出現(xiàn)的 class樣式以數(shù)組中偶數(shù)存儲,圖片以數(shù)組中奇數(shù)存儲
var now=new Date();
var Image; //隨機出現(xiàn)圖片
var Divs;//隨機出現(xiàn)層
var count=0;//積分系統(tǒng)
var key;//鍵盤的值
var amounts=1;//出現(xiàn)字母圖片的個數(shù)
var gametime=30;//控制游戲的時間
var gametimes;//時間為0
var gametimess=30;//顯示時鐘變量
var time1;//setInterval變量
var time2=5000;//設定setInterval的時間
var time3;
var tab;//用來記錄,傳遞tabindex焦點位置的值
//--------這樣寫為了兼容FF瀏覽器-------
var plug = {
addEvent:function(o,e,f){
if(o.addEventListener){
o.addEventListener(e,f,false);
}
else if(o.attachEvent){
o.attachEvent("on"+e,f);
}
}
}
plug.addEvent(window,"load",function(){Focus()});//兼容FF瀏覽器
//------1.控制游戲時間函數(shù)--------
function Gametime(){
for(gametimes=gametime;gametimes>=0;gametimes--) {
window.setTimeout('Show(' + gametimes + ')',(gametime-gametimes+2) * 1000);
}
}
function Show(gametimes){
if(gametimes==0){
clearInterval(time1);//停止游戲
alert("游戲結束!你的得分為:"+count);
$("#main").empty();//清除main中的div
$(".gameapply").empty();
$("#select1").empty();
$("#select2").empty();
count=0;//得分清空為0
Score();//讓分數(shù)框顯示為0
Focus();//重新生成菜單選項
}
}
//---------2.動畫效果---------
function fun(){
datas.length=0;
for(var i=0;i<amounts;i++){
Image=parseInt(Math.random() * 26)+10;//隨機出現(xiàn)字母圖片
datas.push(Image);//圖片以數(shù)組中偶數(shù)存儲,從零開始
Divs=parseInt(Math.random() * 8)+1;//隨機出現(xiàn)層的class樣式即層的不同位置
datas.push(Divs);//樣式以數(shù)組中奇數(shù)存儲
var time=parseInt(Math.random() * 2000)+3000;//完成動畫的時間
if(time<5000){
var $divs=$("<div class='divPop"+Divs+"'>"+data[Image]+"</div>");
$("#main").append($divs);
//-----JQ動畫函數(shù)----
$(".divPop"+Divs).animate(
{"top":$(window).height() - $(".divPop"+Divs).height() - $(".divPop"+Divs).position().top},time,function(){$("#main").empty()})
}
}
}
//--------3.設定字母圖片出現(xiàn)的時間------
function sets(){
time1 = setInterval(fun,time2);
}
//---------4.綁定鍵盤---------
//---------兼容FF瀏覽器---------
document.onkeydown = function keydown(e){
e = e||window.event;
var key = e.charCode||e.keyCode
select(key)
}
//---------5.判斷函數(shù)---------
function select(key){
if(key==13){
switch(tab){
case 0:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//開始游戲
case 1:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//開始游戲
case 2:alert("可以在左側設置游戲選項");break;
case 3:window.opener=null;window.open('','_self');window.close();break;//退出游戲
case 4:window.opener=null;window.open('','_self');window.close();break;//退出游戲
}
}
for(var j=0;j<datas.length;j=j+2){//為了讓data1里面樣式和圖片的值不重復(即奇數(shù)跟偶數(shù)的不可能重復,m的值或者k的值要相差一定的值)
if(key==datas[j]+55){
$(".divPop"+datas[j+1]).hide();//key值相等,隱藏該層
delete datas[j]; //為了避免有重復的字母,所以數(shù)組里面每遍歷到一個(key==datas[j]+55)都要刪除這個值
count+=10;
Score();
break;
}
}
}
//---------6.游戲菜單-------
function Focus(){
//---------初始化游戲界面--------
var $selects=$("<div id='select'><table id=\"tables\"><tr><td><input class=\"inputs\" type=\"text\"value=\"游戲開始\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"游戲選項\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"退出游戲\"/></td></tr></table></div>");
$(".gameapply").append($selects);
for(var i=30;i<=300;i=i+30){
$("#select1").append('<option>' + i+ '</option>')
}
for(var j=1;j<=9;j++){
$("#select2").append('<option>' + j+ '</option>')
}
//---------開始時取得第一個input的焦點--------
$(".inputs:first").trigger("focus").addClass("input1");
tab=1;//因為第一個焦點是沒法輸入Enter,所以要調(diào)用鍵盤輸入事件
var tabIndex=1;
//----------獲取tr行數(shù),input個數(shù)--------
$("#tables").find("tr").each(function(r) {
$(this).find("input").attr("tabindex", r+1);//tabindex為焦點位置的值,賦初值為1,遍歷為1-2-3-4
});
//---------響應input的鍵盤上下操作
$("#tables .inputs").bind("keydown", function(e){
tabIndex = parseInt($(this).attr("tabindex"));//取得當前tabindex焦點的值
switch(e.which){
case 38://向上
tabIndex-=1;
tab=tabIndex;
break;
case 40://向下
tabIndex+=1;
tab=tabIndex;
break;
default:
return;
}
//--------判斷tabIndex焦點的值
if (tabIndex > 0 && tabIndex < 4) {
$(".inputs[tabindex=" + tabIndex + "]").focus().addClass("input1");//當前input獲取焦點
for(var i=0;i<=4;i++)
{
if(i==tabIndex){
break;
}
else{
$(this).removeClass("input1");
}
}
keydown();
return false;
}
return true;
});
}
//--------7.游戲時間選項---------
function Gametimeselect(){
var option=document.getElementById("select1");
for(var i=0;i<option.length;++i){
if(option[i].selected) {
gametime=option.options[i].text;
gametimess=gametime;
}
}
}
//-----8.顯示游戲時間-------
function countdown(){
var timeshows=document.getElementById("timeshow");
if(timeshows){//如果網(wǎng)頁速度很慢的話,可能定時器運行的時候控件還沒有加載
if(gametimess<0){
clearInterval(time3);//停止計時器
}
else{
timeshows.value=gametimess;
gametimess--;
}
}
}
//--------9.游戲難度選項---------
function Gameselectamount(){
var option=document.getElementById("select2");
for(var i=0;i<option.length;++i){
if(option[i].selected) {
amounts=option.options[i].text;
}
}
}
//---------10.游戲得分-----------
function Score(){
var sum=document.getElementById("sum");
sum.value=count;
if(count==0){ //初始化文本框分數(shù)為0
sum.value=count;
}
}

總結:由于時間隔得比較久,代碼方面沒有優(yōu)化,有個地方做得不是很好,就是字母出現(xiàn)的時間間隔過長,有興趣的話可以嘗試修復。代碼僅供參考
在線演示:http://demo.jb51.net/js/2011/StarWars/
打包下載: http://m.fzitv.net/jiaoben/40902.html

相關文章

  • 原生js實現(xiàn)選項卡功能

    原生js實現(xiàn)選項卡功能

    本文主要介紹了原生js實現(xiàn)選項卡功能的實例,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • selenium 反爬蟲之跳過淘寶滑塊驗證功能的實現(xiàn)代碼

    selenium 反爬蟲之跳過淘寶滑塊驗證功能的實現(xiàn)代碼

    這篇文章主要介紹了selenium 反爬蟲之跳過淘寶滑塊驗證功能,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-08-08
  • 詳細聊聊閉包在js中充當著什么角色

    詳細聊聊閉包在js中充當著什么角色

    在js中,閉包是一個很重要又相當不容易完全理解的要點,下面這篇文章主要給大家介紹了關于閉包在js中充當著什么角色的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-01-01
  • 判斷iOS、Android以及PC端的示例代碼

    判斷iOS、Android以及PC端的示例代碼

    這篇文章主要給大家介紹了關于如何判斷iOS、Android以及PC端的相關資料,主要是利用navigator.userAgent來實現(xiàn),文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧
    2018-11-11
  • 深入探究JavaScript中for循環(huán)的效率問題及相關優(yōu)化

    深入探究JavaScript中for循環(huán)的效率問題及相關優(yōu)化

    這篇文章主要介紹了JavaScript中for循環(huán)的效率問題及相關優(yōu)化,文中談到了Underscore.js庫及循環(huán)在各個瀏覽器js解釋器下的表現(xiàn),需要的朋友可以參考下
    2016-03-03
  • bootstrap table復雜操作代碼

    bootstrap table復雜操作代碼

    這篇文章主要為大家詳細介紹了bootstrap table復雜操作代碼,生成外層表格,填充表格內(nèi)容,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • 在javascript中實現(xiàn)函數(shù)數(shù)組的方法

    在javascript中實現(xiàn)函數(shù)數(shù)組的方法

    js不進行類型檢查,數(shù)組可以存放任何東西。于是我就想數(shù)組里可否存放函數(shù)呢,下面就為大家詳細介紹下
    2013-12-12
  • js實現(xiàn)導航欄中英文切換效果

    js實現(xiàn)導航欄中英文切換效果

    本篇文章主要分享了javascript實現(xiàn)導航欄中英文切換效果的示例代碼,具有很好的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • javascript防篡改對象實例詳解

    javascript防篡改對象實例詳解

    這篇文章主要介紹了javascript防篡改對象,結合實例形式分析了防篡改對象的三個級別與具體使用技巧,需要的朋友可以參考下
    2017-04-04
  • JavaScript中Textarea滾動條不能拖動的解決方法

    JavaScript中Textarea滾動條不能拖動的解決方法

    這篇文章主要介紹了JavaScript中Textarea滾動條不能拖動的解決方法,主要針對IE瀏覽器中Textarea滾動條綁定了onfocus事件時分析對應的處理方法,需要的朋友可以參考下
    2015-12-12

最新評論

安庆市| 杭锦旗| 新沂市| 黄陵县| 庆元县| 波密县| 本溪| 金湖县| 昌乐县| 儋州市| 天柱县| 蓬安县| 江孜县| 疏勒县| 湄潭县| 壤塘县| 青川县| 公安县| 浦江县| 中阳县| 哈密市| 工布江达县| 湘潭市| 临清市| 上虞市| 台东县| 全州县| 确山县| 普兰店市| 阜城县| 凤冈县| 丰城市| 松桃| 陕西省| 惠州市| 本溪市| 东莞市| 基隆市| 尚志市| 宁远县| 曲水县|