機能モジュール: プログラム設計:
1. ゲーム時間を選択し、カウントダウンを表示できます 1. グローバル変数を定義します
2. 英語の文字数を選択できます 2. ゲーム時間関数を制御します
3. 統計スコア 3.アニメーション効果
4. メニューオプション 4. 文字絵が表示される時間を設定
5. 判定機能
6. ゲームメニュー
7. ゲーム時間オプション
（追記：アートは欠陥です）
//-------全局变量-------
var data={
"10":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/A.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"11":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/B.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"12":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/C.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"13":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/D.gif'/ alt="JavaScript タイピング ゲーム コード" >"],
"14":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/E.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"15":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/F.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"16":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/G.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"17":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/H.gif'/ alt="JavaScript タイピング ゲーム コード" >"],
"18":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/I.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"19":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/J.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"20":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/K.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"21":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/L.gif'/ alt="JavaScript タイピング ゲーム コード" >"],
"22":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/M.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"23":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/N.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"24":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/O.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"25":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/P.gif'/ alt="JavaScript タイピング ゲーム コード" >"],
"26":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/Q.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"27":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/R.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"28":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/S.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"29":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/T.gif'/ alt="JavaScript タイピング ゲーム コード" >"],
"30":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/U.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"31":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/V.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"32":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/W.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"33":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/X.gif'/ alt="JavaScript タイピング ゲーム コード" >"],
"34":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/Y.gif'/ alt="JavaScript タイピング ゲーム コード" >"],"35":["<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40" class="lazy" src='images/Z.gif'/ alt="JavaScript タイピング ゲーム コード" >"]
};
var datas=new Array();//随机出现的 class样式以数组中偶数存储，图片以数组中奇数存储
var now=new Date();
var Image; //随机出现图片
var Divs;//随机出现层
var count=0;//积分系统
var key;//键盘的值
var amounts=1;//出现字母图片的个数
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.控制游戏时间函数--------
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();//让分数框显示为0
Focus();//重新生成菜单选项
}
}
//---------2.动画效果---------
function fun(){
datas.length=0;
for(var i=0;i<amounts;i++){
Image=parseInt(Math.random() * 26)+10;//随机出现字母图片
datas.push(Image);//图片以数组中偶数存储,从零开始
Divs=parseInt(Math.random() * 8)+1;//随机出现层的class样式即层的不同位置
datas.push(Divs);//样式以数组中奇数存储
var time=parseInt(Math.random() * 2000)+3000;//完成动画的时间
if(time<5000){
var $divs=$("<div class='divPop"+Divs+"'>"+data[Image]+"</div>");
$("#main").append($divs);
//-----JQ动画函数----
$(".divPop"+Divs).animate(
{"top":$(window).height() - $(".divPop"+Divs).height() - $(".divPop"+Divs).position().top},time,function(){$("#main").empty()})
}
}
}
//--------3.设定字母图片出现的时间------
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.判断函数---------
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里面样式和图片的值不重复（即奇数跟偶数的不可能重复，m的值或者k的值要相差一定的值）
if(key==datas[j]+55){
$(".divPop"+datas[j+1]).hide();//key值相等,隐藏该层
delete datas[j]; //为了避免有重复的字母，所以数组里面每遍历到一个(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，所以要调用键盘输入事件
var tabIndex=1;
//----------获取tr行数，input个数--------
$("#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){//如果网页速度很慢的话，可能定时器运行的时候控件还没有加载
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){ //初始化文本框分数为0
sum.value=count;
}
}
概要: 時間間隔が比較的長いため、コードがうまく最適化されていない場所が 1 つあります。それは、文字が表示される時間間隔です。興味のある方は修理してみてはいかがでしょうか。コードは参考用です
JavaScript タイピング ゲーム コードに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AMPythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AMPythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AMC/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AMさまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前By尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前ByDDD
Will R.E.P.O.クロスプレイがありますか？
1 か月前By尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
ドリームウィーバー CS6
ビジュアル Web 開発ツール
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
