JavaScript でテトリス ゲームを実装するためのアイデアと方法

「プログラミングの美しさ」を見る: 「プログラムを書くのは難しいですが、美しいです。プログラムを上手に書くには、プログラミング言語、データ構造、アルゴリズムなどの基本的な知識が必要です。プログラムを上手に書くと、 , 厳密な論理的思考スキルとプログラミングの優れた基礎が必要であり、プログラミング環境やプログラミング ツールに精通していることも必要です。」

数年間コンピューターを勉強した後、プログラミングに夢中になったことはありますか?言い換えれば、自分でゲームを書いてみたことがない人は、プログラミングがあまり好きではないということです。

テトリスがもたらしたセンセーションと経済的価値は、ゲームの歴史において大きな出来事と言えます。シンプルに見えますが、無限に変化に富み、中毒性があります。私のクラスメートのほとんどは、かつては食べ物やお茶について考えるのをやめたほど夢中になっていたと思います。

ゲーム ルール

1. 小さな正方形を配置するための平坦な仮想会場: 標準サイズ: 行幅 10、列高さ 20、各小さな正方形。単位。

2. 4 つの小さな正方形で構成される規則的なグラフィックのセット。英語ではテトロミノと呼ばれ、中国語では一般に正方形として知られています。正方形は S、Z、L、J、I の 7 種類あります。 、O、T。文字の形から名付けられました。

I: 一度に最大 4 つのレイヤーを削除

J (左右): 最大 3 つのレイヤーを削除、または 2 つのレイヤーを削除

L: 最大 2 つのレイヤーを削除3層まで、または2層除去

O: 1～2層除去

S(左右): 2層まで、穴ができやすい

Z (左右）：2層まで、穴ができやすい

T：2層まで

エリアの上からゆっくりとブロックが落ちてきます。プレイヤーはブロックを90度単位で回転させたり、ブロックをグリッド単位で左右に動かしたりして、ブロックの落下を加速させることができます。ブロックがエリアの一番下に移動したり、他のブロックに着地して移動できなくなると、そのブロックはそこで固定され、エリア上に新たなブロックが出現して落下し始めます。エリア内の水平グリッドの列が正方形で完全に埋まると、列が消えてプレイヤーのスコアになります。同時に削除される列が多いほど、スコアインデックスは増加します。

分析と解決策

各ブロックが落ちたら、次のことができます:

1) 適切な方向に回転します

2 ) 特定の列に水平に移動

3) 垂直に下にドロップ

まず、2 次元配列を使用する必要があります。area[18][10] は 18*10 を表します。ゲームエリア。このうち、配列の値 0 は空を意味し、値 1 はブロックがあることを意味します。

ブロックは全部で7種類あり、それぞれ4方向あります。 activeBlock[4] を定義します。この配列の値はコンパイル前に事前に計算され、プログラムで直接使用されます。

困難

1) 境界確認。

//检查左边界,尝试着朝左边移动一个,看是否合法。
function checkLeftBorder(){ 
  for(var i=0; i<activeBlock.length; i++){ 
    if(activeBlock[i].y==0){ 
      return false; 
    } 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y-1)){ 
      return false; 
    } 
  } 
  return true; 
} //同理，需要检测右边界和底边界

2) 回転には数学的論理、つまりある点を別の点に対して 90 度回転させる問題が必要です。
3) タイミングとキーボード イベントの監視メカニズムにより、ゲームが自動的に実行されます。

//开始 
function begin(e){ 
  e.disabled = true; 
  status = 1; 
  tbl = document.getElementById("area"); 
  if(!generateBlock()){ 
    alert("Game over!"); 
    status = 2; 
    return; 
  } 
  paint(); 
  timer = setInterval(moveDown,1000); 
} 
document.onkeydown=keyControl;

プログラム プロセス

1) ユーザーは、[開始]、[アクティブ グラフィックの構築] の順にクリックし、タイマーを設定します。

//当前活动的方块, 它可以左右下移动, 变型。当它触底后, 将会更新area; 
var activeBlock; 
//生产方块形状, 有7种基本形状。 
function generateBlock(){ 
  activeBlock = null; 
  activeBlock = new Array(4); 
  //随机产生0-6数组，代表7种形态。
  var t = (Math.floor(Math.random()*20)+1)%7; 
  switch(t){ 
    case 0:{ 
      activeBlock[0] = {x:0, y:4}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:0, y:5}; 
      activeBlock[3] = {x:1, y:5}; 

      break; 
    } 
    //省略部分代码..............................
    case 6:{ 
      activeBlock[0] = {x:0, y:5}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:1, y:5}; 
      activeBlock[3] = {x:1, y:6}; 
      break; 
    } 
  } 
  //检查刚生产的四个小方格是否可以放在初始化的位置. 
  for(var i=0; i<4; i++){ 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y)){ 
        return false; 
      } 
    } 
  return true; 
}

2) 下に移動するたびに、底に到達したかどうかを確認します。底に到達した場合は、その列を消去してみます。

//消行 
function deleteLine(){ 
  var lines = 0; 
  for(var i=0; i<18; i++){ 
    var j=0; 
    for(; j=0; k--){ 
        area[k+1] = area[k]; 
      } 
    } 
    area[0] = generateBlankLine(); 
    } 
  } 
  return lines; 
}

3) 終了後、アクティブなグラフィックを構築し、タイマーを設定します。

最適化対象

1) さまざまな形状のブロックの色を設定します。

アイデア: ブロック作成関数で、activeBlockColor の色を設定します。ブロックの 7 つの異なる形状には、異なる色があります (generateBlock メソッドの変更に加えて、paintarea メソッドも変更する必要があります。最初はよく考えて行を削除します。最後に、色を統一しながら四角形を再描画します。これにより、表の n 行を削除し、四角形の整合性を確保するために上部に n 行を追加することを検討できます。)

2) 現在のブロックが落ちた場合、次のブロックを事前に確認できます。

アイデア:generateBlock メソッドを 2 つの部分に分割します。1 つの部分は次のブロックをランダムに試行するために使用され、もう 1 つの部分は描画される現在のブロックをキャッシュするために使用されます。現在のブロックが底に達して固定されると、次のブロックの描画が開始され、再び新しいブロックがランダムに生成されます。繰り返し。

上記はこの記事で皆さんに共有した内容のすべてです。気に入っていただければ幸いです。

【おすすめ関連チュートリアル】

1. JavaScript ビデオチュートリアル
2. JavaScript オンラインマニュアル
3.ブートストラップ チュートリアル