欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript打字小游戲代碼

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

主要代碼設(shè)計(jì):
復(fù)制代碼 代碼如下:
 
//-------全局變量------- 
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();//隨機(jī)出現(xiàn)的 class樣式以數(shù)組中偶數(shù)存儲(chǔ),圖片以數(shù)組中奇數(shù)存儲(chǔ)
var now=new Date();
var Image; //隨機(jī)出現(xiàn)圖片
var Divs;//隨機(jī)出現(xiàn)層
var count=0;//積分系統(tǒng)
var key;//鍵盤的值
var amounts=1;//出現(xiàn)字母圖片的個(gè)數(shù)
var gametime=30;//控制游戲的時(shí)間
var gametimes;//時(shí)間為0
var gametimess=30;//顯示時(shí)鐘變量
var time1;//setInterval變量
var time2=5000;//設(shè)定setInterval的時(shí)間
var time3;
var tab;//用來記錄,傳遞tabindex焦點(diǎn)位置的值
//--------這樣寫為了兼容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í)間函數(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("游戲結(jié)束!你的得分為:"+count);
$("#main").empty();//清除main中的div
$(".gameapply").empty();
$("#select1").empty();
$("#select2").empty();
count=0;//得分清空為0
Score();//讓分?jǐn)?shù)框顯示為0
Focus();//重新生成菜單選項(xiàng)
}
}
//---------2.動(dòng)畫效果---------
function fun(){
datas.length=0;
for(var i=0;i<amounts;i++){
Image=parseInt(Math.random() * 26)+10;//隨機(jī)出現(xiàn)字母圖片
datas.push(Image);//圖片以數(shù)組中偶數(shù)存儲(chǔ),從零開始
Divs=parseInt(Math.random() * 8)+1;//隨機(jī)出現(xiàn)層的class樣式即層的不同位置
datas.push(Divs);//樣式以數(shù)組中奇數(shù)存儲(chǔ)
var time=parseInt(Math.random() * 2000)+3000;//完成動(dòng)畫的時(shí)間
if(time<5000){
var $divs=$("<div class='divPop"+Divs+"'>"+data[Image]+"</div>");
$("#main").append($divs);
//-----JQ動(dòng)畫函數(shù)----
$(".divPop"+Divs).animate(
{"top":$(window).height() - $(".divPop"+Divs).height() - $(".divPop"+Divs).position().top},time,function(){$("#main").empty()})
}
}
}
//--------3.設(shè)定字母圖片出現(xiàn)的時(shí)間------
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("可以在左側(cè)設(shè)置游戲選項(xiàng)");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里面樣式和圖片的值不重復(fù)(即奇數(shù)跟偶數(shù)的不可能重復(fù),m的值或者k的值要相差一定的值)
if(key==datas[j]+55){
$(".divPop"+datas[j+1]).hide();//key值相等,隱藏該層
delete datas[j]; //為了避免有重復(fù)的字母,所以數(shù)組里面每遍歷到一個(gè)(key==datas[j]+55)都要?jiǎng)h除這個(gè)值
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=\"游戲選項(xiàng)\"/></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>')
}
//---------開始時(shí)取得第一個(gè)input的焦點(diǎn)--------
$(".inputs:first").trigger("focus").addClass("input1");
tab=1;//因?yàn)榈谝粋€(gè)焦點(diǎn)是沒法輸入Enter,所以要調(diào)用鍵盤輸入事件
var tabIndex=1;
//----------獲取tr行數(shù),input個(gè)數(shù)--------
$("#tables").find("tr").each(function(r) {
$(this).find("input").attr("tabindex", r+1);//tabindex為焦點(diǎn)位置的值,賦初值為1,遍歷為1-2-3-4
});
//---------響應(yīng)input的鍵盤上下操作
$("#tables .inputs").bind("keydown", function(e){
tabIndex = parseInt($(this).attr("tabindex"));//取得當(dāng)前tabindex焦點(diǎn)的值
switch(e.which){
case 38://向上
tabIndex-=1;
tab=tabIndex;
break;
case 40://向下
tabIndex+=1;
tab=tabIndex;
break;
default:
return;
}
//--------判斷tabIndex焦點(diǎn)的值
if (tabIndex > 0 && tabIndex < 4) {
$(".inputs[tabindex=" + tabIndex + "]").focus().addClass("input1");//當(dāng)前input獲取焦點(diǎn)
for(var i=0;i<=4;i++)
{
if(i==tabIndex){
break;
}
else{
$(this).removeClass("input1");
}
}
keydown();
return false;
}
return true;
});
}
//--------7.游戲時(shí)間選項(xiàng)---------
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.顯示游戲時(shí)間-------
function countdown(){
var timeshows=document.getElementById("timeshow");
if(timeshows){//如果網(wǎng)頁(yè)速度很慢的話,可能定時(shí)器運(yùn)行的時(shí)候控件還沒有加載
if(gametimess<0){
clearInterval(time3);//停止計(jì)時(shí)器
}
else{
timeshows.value=gametimess;
gametimess--;
}
}
}
//--------9.游戲難度選項(xiàng)---------
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){ //初始化文本框分?jǐn)?shù)為0
sum.value=count;
}
}

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

相關(guān)文章

  • JavaScript多功能甘特圖組件jsGantt詳解

    JavaScript多功能甘特圖組件jsGantt詳解

    jsGantt是一個(gè)可定制的、靈活的、多語(yǔ)言的甘特圖組件,由原生 JavaScript構(gòu)建,它使用客戶端渲染以獲得快速的性能和動(dòng)態(tài)的交互性,非常適用于任何需要交互式時(shí)間線或時(shí)間表顯示的項(xiàng)目,本文就給大家介紹一下JavaScript多功能甘特圖組件jsGantt
    2023-07-07
  • javascript preload&lazy load

    javascript preload&lazy load

    最近需要用到預(yù)加載和延遲加載的東東,就參考寫了一個(gè)。支持跨頁(yè)面,支持超時(shí)設(shè)置與依賴設(shè)置。
    2010-05-05
  • js中switch語(yǔ)句的學(xué)習(xí)筆記

    js中switch語(yǔ)句的學(xué)習(xí)筆記

    在本文里小編給各位分享的是關(guān)于js中switch語(yǔ)句的使用方法及學(xué)習(xí)筆記內(nèi)容,有興趣的朋友們可以參考下。
    2020-03-03
  • 原生JS實(shí)現(xiàn)拖拽效果

    原生JS實(shí)現(xiàn)拖拽效果

    這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • 微信小程序中使用vant框架的具體步驟

    微信小程序中使用vant框架的具體步驟

    本文主要介紹了微信小程序中使用vant框架的具體步驟,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • 使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例(前端組件化)

    使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例(前端組件化)

    這篇文章主要介紹了使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例(前端組件化)本文重點(diǎn)講解如何從0搭建一個(gè)組件系統(tǒng),在這里我們會(huì)學(xué)習(xí)使用JSX來建立markup 的風(fēng)格,我們基于與React 一樣的 JSX 去建立我們組件的風(fēng)格
    2021-04-04
  • JavaScript基礎(chǔ)系列之函數(shù)和方法詳解

    JavaScript基礎(chǔ)系列之函數(shù)和方法詳解

    經(jīng)常談?wù)撈鸷瘮?shù)和方法,也常常搞不清楚它們之間的界限,經(jīng)常把兩個(gè)混用,這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)系列之函數(shù)和方法的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • 獲取JS中網(wǎng)頁(yè)各種高寬與位置的方法總結(jié)

    獲取JS中網(wǎng)頁(yè)各種高寬與位置的方法總結(jié)

    本文詳細(xì)羅列了如何在javascript獲取網(wǎng)頁(yè)各種高寬及位置,內(nèi)容比較全面,有需要的可以參考一下。
    2016-07-07
  • JavaScript Date對(duì)象功能與用法學(xué)習(xí)記錄

    JavaScript Date對(duì)象功能與用法學(xué)習(xí)記錄

    這篇文章主要介紹了JavaScript Date對(duì)象功能與用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript Date對(duì)象基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下
    2020-04-04
  • javascript replace()用法詳解附實(shí)例代碼

    javascript replace()用法詳解附實(shí)例代碼

    在javascript中,String的函數(shù)replace()簡(jiǎn)直太讓人喜愛了。它靈活而強(qiáng)大的字符替換處理能力,讓我不禁想向大家介紹它。
    2008-10-10

最新評(píng)論