JSを使って三目並べゲームを作る方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JSを使って三目並べゲームを作る方法

php中世界最好的语言

May 28, 2018 pm 02:40 PM

javascript ゲーム

今回は、JS を使用して三目並べゲームを作成する方法と、JS を使用して三目並べゲームを作成するための注意点について説明します。ここでは実際的なケースを見てみましょう。見て。

最近授業が終わったので、

JavaScriptを使って三目並べゲームを作る必要がありました。まず、インターフェイスは HTML で書くだけなので特に問題はありません。主に人間とコンピューターのチェスゲームで使用される AI アルゴリズムについて、コンピューターをどのように賢くするかについて考える価値があります。ゲーム開始後、プレイヤーが先攻となります。コンピューターの観点からは、複数の状況を分析し、重要性に応じて重み付けすることができます。

状況は次のとおりです:

1. 同じ行 (行、列、対角線) にあるチェスの駒は 2 つだけであり、勝つためにさらに一歩踏み出す限り、それらは両方とも自分のものです。次に、残りのポジションの重みが最高、

優先度最大になります。第 1 レベルの重みを割り当てます。

2. 同じ行 (行、列、対角線) にあるチェスの駒は 2 つだけで、どちらも相手 (つまりプレイヤー) のものです。一歩進めばプレイヤーは成功します。私はブロックする必要があり、残りのポジションには二次的な重みが与えられます。

3. コンピューター側は後退するため、賢い場合は常にプレイヤー側をブロックする必要があります。したがって、連続するチェスの駒が 1 つだけで、それがプレイヤーの駒である場合は、重みがかかります。行内の他の位置はレベル 3 に設定されます。

4. レベル 4 の重み: あなた自身 (コンピューター側) のチェスの駒だけが並んでいます。

5. レベル 5 の権限: 相手の駒と自分の駒を含めて、同じ列にチェスの駒はありません。

実装すると、各位置のチェスの駒は

二次元配列full で表すことができ、各位置の重みも 2 次元配列 val で表すことができます。プレイヤーがプレイを終了すると、AI 側の関数が呼び出され、AI 側が移動する前に、まず重みを更新し、次に重みが最大のポジション (最適解) を選択します。 AI であれ、プレイヤーであれ、各手の後に勝ちか負けかを判断する必要があります。結果を出力するには、alert() 関数を使用します。 sourceソースコードから送信する必要があるため、CSSスタイルとJava JSファイルを分離することはできませんでした。不備がある場合は、批判や修正を歓迎します。

ソースコードは次のとおりです:

<html>
<head>
<meta charset="utf-8">
<title>井字棋</title>
<script>
//定义全局变量
var full=[[0,0,0],[0,0,0],[0,0,0]];//0表示null，1表示我下的，2表示电脑下的
var val=[[1,1,1],[1,1,1],[1,1,1]];//表示每个位置的权值
function judge(){
   //检测是否有人赢
   //行
   for(var i=0;i<3;i++){
     if(full[i][0]==full[i][1]&&full[i][1]==full[i][2]&&full[i][0]!=0){
             if(full[i][0]==1){
                window.alert("you win!");
                return true;
             }
             else {
                window.alert("you lose");
                return true;
             }                
     }
   }
   //列
   for(var i=0;i<3;i++){
     if(full[0][i]==full[1][i]&&full[1][i]==full[2][i]&&full[0][i]!=0){
             if(full[0][i]==1){
                window.alert("you win!"); 
                return true;
             }
             else {
                window.alert("you lose");  
                return true;
             }                
     }
   }
   //主对角线
   if(full[0][0]==full[1][1]&&full[1][1]==full[2][2]&&full[0][0]!=0){
             if(full[0][0]==1){
                window.alert("you win!");
                return true;
            }
             else {
                window.alert("you lose");
                return true;
            }                
   }
   if(full[0][2]==full[1][1]&&full[2][0]==full[1][1]&&full[0][2]!=0){
             if(full[0][2]==1){
                window.alert("you win!");
                return true;
            }
             else {
               window.alert("you lose");
               return true;
            }
   }
   for(var i=0;i<3;i++){
     for(var j=0;j<3;j++){
      if(full[i][j]==0)
        return false;//说明还没结束
       if(i==2&&j==2)
        {window.alert("平局！");  
        return true;
        }        
     }
   }
   return false;//无结果
}
function bn(i,j){
   //如果已经下过，则无效
   if(full[i][j]!=0){
      return 0;
   }else{
      //没下过
      full[i][j]=1;
      num1=(i*3+j+1)+"";
      document.getElementById(num1).value="X";
      if(judge()==true){
        return;
      }
      ai();//切换
   }
}
//重置权值：
function resetValue(){
   for(var i=0;i<3;i++){
      for(var j=0;j<3;j++){
        if(full[i][j]!=0)
          val[i][j]=0;
        else{
      //看行和列：  
         //最高权值
         if(((full[0][j]+full[1][j]+full[2][j])==4)&&(full[0][j]*full[1][j]*full[2][j])==0
         &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==-1)
            val[i][j]=val[i][j]+10000;
         if(((full[i][0]+full[i][1]+full[i][2])==4)&&(full[i][0]*full[i][1]*full[i][2])==0
         &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==-1)
            val[i][j]=val[i][j]+10000;
         //次级权值
         if(((full[0][j]+full[1][j]+full[2][j])==2)&&(full[0][j]*full[1][j]*full[2][j])==0
         &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==0)
            val[i][j]=val[i][j]+1000;
         if(((full[i][0]+full[i][1]+full[i][2])==2)&&(full[i][0]*full[i][1]*full[i][2])==0
         &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==0)
            val[i][j]=val[i][j]+1000;
         //三级权值（一排只有一个X）
         if(((full[0][j]+full[1][j]+full[2][j])==1)&&(full[0][j]*full[1][j]*full[2][j])==0
         &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==0)
            val[i][j]=val[i][j]+10;
         if(((full[i][0]+full[i][1]+full[i][2])==1)&&(full[i][0]*full[i][1]*full[i][2])==0
         &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==0)
            val[i][j]=val[i][j]+10;
         //四级权值（一排只有一个O）
         if(((full[0][j]+full[1][j]+full[2][j])==2)&&(full[0][j]*full[1][j]*full[2][j])==0
         &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==1)
            val[i][j]=val[i][j]+5;
         if(((full[i][0]+full[i][1]+full[i][2])==2)&&(full[i][0]*full[i][1]*full[i][2])==0
         &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==1)
            val[i][j]=val[i][j]+5;
         //五级权限（该行没有X或O）
         if(((full[0][j]+full[1][j]+full[2][j])==0)&&(full[0][j]*full[1][j]*full[2][j])==0
         &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==-1)
            val[i][j]=val[i][j]+2;
         if(((full[i][0]+full[i][1]+full[i][2])==0)&&(full[i][0]*full[i][1]*full[i][2])==0
         &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==-1)
            val[i][j]=val[i][j]+2;
    //主对角线：同上
          if((i==0&&j==0)||(i==2&&j==2)||(i==1&&j==1)){
            if(((full[0][0]+full[1][1]+full[2][2])==4)&&(full[0][0]*full[1][1]*full[2][2])==0
            &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==-1)
            val[i][j]=val[i][j]+10000;
         //次级权值
         if(((full[0][0]+full[1][1]+full[2][2])==2)&&(full[0][0]*full[1][1]*full[2][2])==0
         &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==0)
            val[i][j]=val[i][j]+1000;
         //三级权值（一排只有一个X）
         if(((full[0][0]+full[1][1]+full[2][2])==1)&&(full[0][0]*full[1][1]*full[2][2])==0
         &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==0)
            val[i][j]=val[i][j]+10;
         //四级权值（一排只有一个O）
         if(((full[0][0]+full[1][1]+full[2][2])==2)&&(full[0][0]*full[1][1]*full[2][2])==0
         &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==1)
            val[i][j]=val[i][j]+5;
         //五级权值（该行没有X或O）
         if(((full[0][0]+full[1][1]+full[2][2])==0)&&(full[0][0]*full[1][1]*full[2][2])==0
         &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==-1)
            val[i][j]=val[i][j]+2;
        }
     //副对角线(同上)
        if((i==0&&j==2)||(i==2&&j==0)||(i==1&&j==1)){
            //一级
           if(((full[0][2]+full[1][1]+full[2][0])==4)&&(full[0][2]*full[1][1]*full[2][0])==0
           &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==-1)
            val[i][j]=val[i][j]+10000;
            //二级
            if(((full[0][2]+full[1][1]+full[2][0])==2)&&(full[0][2]*full[1][1]*full[2][0])==0
            &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==0)
            val[i][j]=val[i][j]+1000;
            //三级权值（一排只有一个X）
            if(((full[0][2]+full[1][1]+full[2][0])==1)&&(full[0][2]*full[1][1]*full[2][0])==0
            &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==0)
            val[i][j]=val[i][j]+10;
            //四级权值（一排只有一个O）
            if(((full[0][2]+full[1][1]+full[2][0])==2)&&(full[0][2]*full[1][1]*full[2][0])==0
            &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==1)
            val[i][j]=val[i][j]+5;
            //五级权值（该行没有X或O）
            if(((full[0][2]+full[1][1]+full[2][0])==0)&&(full[0][2]*full[1][1]*full[2][0])==0
            &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==-1)
            val[i][j]=val[i][j]+2;
           }
          }
      }
   }  
}
function ai(){
   if(judge()==true){
     return;
   }
   //挑选权值最大的
   resetValue();
   var mi=0,mj=0,temp=0;
   for(var i=0;i<3;i++)
     for(var j=0;j<3;j++){
       if(val[i][j]>temp){
         temp=val[i][j];
         mi=i;
         mj=j;
       }
     }
     full[mi][mj]=2;
     num1=(mi*3+mj+1)+"";
     document.getElementById(num1).value="O";
     if(judge()==true){
     return;
   }
}
function lose(){
window.alert("you lose");
location.reload();
}
</script>
</head>
<body>
<h1 align=center> 井字棋</h1>
<table border=2px bordercolor="blue"width="300"height="300" style="font-size:50 " align=center>
<tr>
<td><input type="button" id="1" Style="width:100px;height:100px;" value=" " onclick="bn(0,0)"/></td>
<td><input type="button" id="2" Style="width:100px;height:100px;" value=" " onclick="bn(0,1)"/></td>
<td><input type="button" id="3" Style="width:100px;height:100px;" value=" " onclick="bn(0,2)"/></td>
</tr>
<tr>
<td><input type="button" id="4" Style="width:100px;height:100px;" value=" " onclick="bn(1,0)"/></td>
<td><input type="button" id="5" Style="width:100px;height:100px;" value=" " onclick="bn(1,1)"/></td>
<td><input type="button" id="6" Style="width:100px;height:100px;" value=" " onclick="bn(1,2)"/></td>
</tr>
<tr >
<td><input type="button" id="7" Style="width:100px;height:100px;" value=" " onclick="bn(2,0)"/></td>
<td><input type="button" id="8" Style="width:100px;height:100px;" value=" " onclick="bn(2,1)"/></td>
<td><input type="button" id="9" Style="width:100px;height:100px;" value=" " onclick="bn(2,2)"/></td>
</tr>
</table>
<p ><input type="button" style="position:relative;left:500px;top:5px;width:100px;height:50px;" value="重新开始" onclick="location.reload() "/>
   <input type="button" style="position:relative;left:550px;top:5px;width:100px;height:50px;" value="认  输" onclick="lose()"/>
</p>
<body>
</html>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS は最も単純な検索、並べ替え、重複排除アルゴリズムを実装します

jQuery を使用してランダムな色を取得する方法

以上がJSを使って三目並べゲームを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7682

Java チュートリアル

1639

CakePHP チュートリアル

1393

Laravel チュートリアル

1286

PHP チュートリアル

1229

Related knowledge

ゲーム時の CPU 使用率はどのくらいあるべきですか? Feb 19, 2024 am 11:21 AM

ゲームは多くのリソースを消費するため、コンピューターの速度が低下するのが一般的です。ゲーム時の CPU 使用率を理解し、過負荷を避けることが重要です。したがって、適切な CPU 使用率を追跡することが、ゲーム体験をスムーズに保つための鍵となります。この記事では、ゲームの実行中に達成すべき適切な CPU 使用率について説明します。ゲーム中の CPU 使用率 CPU 使用率はプロセッサのワークロードの重要な指標であり、CPU のパフォーマンス仕様に依存します。一般に、より強力な CPU ほど使用率が高くなります。より多くのコアとスレッドを備えた CPU は、システム全体のパフォーマンスを向上させることができます。マルチスレッドのサポートは、CPU の潜在能力を最大限に引き出すのに役立ちます。ゲームでは、CPU 使用率はプロセッサー使用率に依存し、ゲームに影響を与える可能性があります。

ゲームの NAT ブーストと Qos、どちらが優れていますか? Feb 19, 2024 pm 07:00 PM

ほぼすべてのゲームがオンラインになっている今日の状況では、ホームネットワークの最適化を無視することはお勧めできません。ほぼすべてのルーターには、ユーザーのゲーム体験を向上させるために設計された NATBoost および QoS 機能が装備されています。この記事では、NATBoost と QoS の定義、利点、欠点について説明します。ゲームの NATBoost と Qos、どちらが優れていますか? NATBoost は、ネットワークアドレス変換ブーストとも呼ばれ、ルーターのパフォーマンスを向上させるためにルーターに組み込まれている機能です。これは、ゲームデバイスとサーバーの間でデータが転送されるのにかかる時間であるネットワーク遅延を短縮するのに役立つため、ゲームにとって特に重要です。 NATBoostはルーター内のデータ処理方式を最適化することで、データ処理速度の高速化と遅延の低減を実現し、

Nvgpucomp64.dll は Windows PC ゲームをクラッシュさせます。 Mar 26, 2024 am 08:20 AM

Nvgpucomp64.dll が原因でゲームが頻繁にクラッシュする場合は、ここで提供される解決策が役立つ可能性があります。この問題は通常、グラフィックカードドライバーが古いか破損していること、ゲームファイルが破損していることなどが原因で発生します。これらの問題を修正すると、ゲームのクラッシュに対処するのに役立ちます。 Nvgpucomp64.dll ファイルは、NVIDIA グラフィックスカードに関連付けられています。このファイルがクラッシュすると、ゲームもクラッシュします。これは通常、LordsofttheFallen、LiesofP、RocketLeague、ApexLegends などのゲームで発生します。 N の場合、Nvgpucomp64.dll が Windows PC 上のゲームをクラッシュさせる

NVIDIA が RTX HDR 機能を開始: サポートされていないゲームは AI フィルターを使用して HDR の豪華な視覚効果を実現します Feb 24, 2024 pm 06:37 PM

2 月 23 日のこの Web サイトのニュースによると、NVIDIA は昨夜 NVIDIA アプリケーションを更新してリリースし、プレイヤーに新しい統合 GPU コントロールセンターを提供し、プレイヤーはゲーム内フローティングによって提供される強力な記録ツールを通じて素晴らしい瞬間をキャプチャできるようになりました。窓。このアップデートでは、NVIDIA も RTXHDR 機能を導入しました。公式の紹介文はこのサイトに添付されています: RTXHDR は、ハイダイナミックレンジ (HDR) のゴージャスな視覚効果をゲームにシームレスに導入できる、AI を活用した新しいフリースタイルフィルターです。もともとHDRをサポートしています。この機能をさまざまな DirectX および Vulkan ベースのゲームで使用するには、HDR 互換モニターが必要です。プレーヤーが RTXHDR 機能を有効にすると、HD をサポートしていなくてもゲームが実行されます。

スーパーピープルゲームのダウンロードとインストール方法の紹介 Mar 30, 2024 pm 04:01 PM

superpeople ゲームは、steam クライアントを通じてダウンロードできます。このゲームのサイズは約 28G です。ダウンロードとインストールには通常 1 時間半かかります。ここでは、具体的なダウンロードとインストールのチュートリアルを紹介します。グローバルクローズドテストへの新しい申請方法 1) Steamストア(Steamクライアントダウンロード)で「SUPERPEOPLE」を検索 2) 「SUPERPEOPLE」ストアページ下部にある「SUPERPEOPLEクローズドテストへのアクセスをリクエスト」をクリック 3) request accessボタン、Steamライブラリで「SUPERPEOPLECBT」ゲームが確認できます 4)「SUPERPEOPLECBT」内のインストールボタンをクリックしてダウンロード

win11のスパイダーソリティアはどこにありますか win11でスパイダーソリティアゲームをプレイする方法 Mar 01, 2024 am 11:37 AM

AAA の傑作やモバイルゲームを十分にプレイした友人の皆さん、子供の頃のコンピューターゲームを追体験してみませんか?それでは、Windows 11 のスパイダーソリティアを一緒に探してみましょう!インターフェイスの [スタート] メニューをクリックし、[すべてのアプリ] ボタンをクリックし、[すべてのアプリ] をクリックします。 Microsoft のソリティアシリーズゲームアプリケーションである「MicrosoftSolitaireCollection」を見つけて選択します; ソリティアシリーズゲームの選択。ロードが完了したら、選択インターフェイスに入り、「スパイダーソリティア」を見つけて、「スパイダーソリティア」を選択します。インターフェースは若干変更されていますが、以前と同じです。

Thrustmaster コントロールパネルが動作しない、または正しく表示されない [修正済み] Feb 19, 2024 am 10:45 AM

Thrustmaster は、ゲームホイールやその他のゲームアクセサリの製造を専門とする会社で、そのホイール製品はゲームコミュニティで非常に人気があります。 Thrustmaster ホイール設定は、Thrustmaster コントロールパネルを使用してインストールおよび調整できます。コントロールパネルが動作しない、または表示されないという問題が発生した場合、ゲーム体験に影響を与える可能性があります。したがって、この問題が発生した場合は、接続が正常であるかどうかを確認し、ソフトウェアドライバーが正しくインストールされ、最新バージョンに更新されていることを確認する必要があります。さらに、考えられる障害を解決するために、デバイスの再起動やデバイスの再接続を試みることもできます。問題が発生した場合は、Thrustmaster の公式 Web サイトを参照するか、カスタマーサービスにお問い合わせください。スラストマへのアクセス方法

ASUS、Intelの第13/14世代プロセッサーでのゲームの安定性を向上させるBIOSアップデートをリリース Apr 20, 2024 pm 05:01 PM

4月20日の当サイトのニュースによると、ASUSは最近、Intelの第13/14世代プロセッサでゲームを実行する際のクラッシュなどの不安定性を改善するBIOSアップデートをリリースしたとのこと。同サイトは以前、バンダイナムコの格闘ゲーム「鉄拳8」のPCデモ版を実行すると、コンピュータに十分なメモリとビデオメモリがある場合でもシステムがクラッシュし、メモリ不足を示すエラーメッセージが表示されるなどの問題がプレイヤーから報告されたと報告していた。同様のクラッシュの問題は、「バトルフィールド 2042」、「レムナント 2」、「フォートナイト」、「ロードオブザフォールン」、「ホグワーツレガシー」、「ザファイナル」などの多くのゲームでも発生しています。 RADは今年2月に長い記事を公開し、ゲームクラッシュの問題はBIOS設定、高いクロック周波数、Intelプロセッサの高い消費電力の組み合わせであると説明した。

See all articles

JSを使って三目並べゲームを作る方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック