js_javascript スキルを使って「Snake」の小さなゲームを作成する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js_javascript スキルを使って「Snake」の小さなゲームを作成する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:25 PM

js ゲーム蛇

スネークの子供時代の思い出、今日学んだばかりなので、作ったばかりなので、私も学んだ、マスターする必要がある知識:

1. JS 関数の習熟度、

2. JS 配列のアプリケーション、

3. JS と AJAX の一部を学習する

4. JS でのスプライス、シフト、その他の関数の適用、

基本的には以上です。重要なポイントは次のとおりです。
フロントエンドページは単独でレイアウトできます。ここでは独自のレイアウトを提供します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">                     
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>贪吃蛇</title>
  <link rel="stylesheet" type="text/css" href="./css.css">
  <script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="./js.js"></script>
</head>
<body>
  <div id="info">  
    <div id="score">0</div>
    <form action="" id="form" name="form">
      <input type="radio" name='time' value="500" checked='checked'/>简单
      <input type="radio" name='time' value="300"/>中等
      <input type="radio" name='time' value="150"/>高级
      <input type="radio" name='time' value="50"/>神速
      <input type="button" value="开始" class="button" id="start"/>
      <input type="button" value="重玩" class="button" id="res"/> 
    </form>
     
  </div>
  <div id="main">
    <div id="home">
      <!--<div style="background:url(./images/snake0.png) no-repeat;"></div>
      <div style="background:url(./images/snake1.png) no-repeat; left:20px;"></div>
      <div style="background:url(./images/snake2.png) no-repeat; left:40px;"></div>
      <div style="background:url(./images/snake3.png) no-repeat; left:60px;"></div>-->
    </div>
    <div class="wall left"></div>
    <div class="wall right"></div>
    <div class="wall top"></div>
    <div class="wall bottom"></div>
  </div>                            
</body> 
</html>

ログイン後にコピー

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

*{padding: 0px; margin: 0px;font-size: 12px}
body{background: #ccc}
input.button{
  width: 60px;
  cursor: pointer;
}
#info{
  width: 540px;
  height: 30px;
  margin: 30px auto 5px;
  line-height: 30px;
}
#score{
  width: 73px;
  height: 28px;
  padding-left: 64px;
  background: url(./images/score.png) no-repeat;
  float: left;
  font-size: 14px;
  font-weight: 700;
  font-style:italic;
  font-family: '微软雅黑';
}
#form{
  float: right;
}
#form input{
  vertical-align: middle;
  margin-right: 5px;
}
#main{
  width: 540px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  /*background: #71a000*/
 
}
#main div{
  width: 20px;
  height: 20px;
  position: absolute;
}
#main #home{
  width: 500px;
  height: 460px;
  left: 20px;
  top: 20px;
  position: relative;
  background: url(./images/background.jpg) no-repeat;
}
#main #home div{
  position: absolute;
}
#main div.wall{
  width: 540px;
  height: 20px;
  background: url("./images/div.jpg") repeat-x;
  position: absolute;
}
#main div.top{
  left:0px;
  top:0px;
}
 
#main div.bottom{
  left:0px;
  top:480px;
}
#main div.left{
  width: 20px;
  height: 500px;
  background: url(./images/div.jpg) repeat-y;
  left:0px;
  top:0px;
}
#main div.right{
  width: 20px;
  height: 500px;
  background: url(./images/div.jpg) repeat-y;
  left:520px;
  top:0px;
}
 
.l{
  -moz-transform:rotate(0deg);  
  -o-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
  /* IE8+ - must be on one line, unfortunately */  
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";   
  /* IE6 and 7 */ 
  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=1,      M12=0,      M21=0,      M22=1,      SizingMethod='auto expand');
}
.t{
  -moz-transform:  rotate(90deg);   -o-transform:   rotate(90deg);   -webkit-transform: rotate(90deg);   transform:     rotate(90deg);
  /* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1.8369701987210297e-16, M12=-1, M21=1, M22=-1.8369701987210297e-16, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=-1.8369701987210297e-16,      M12=-1,      M21=1,      M22=-1.8369701987210297e-16,      SizingMethod='auto expand');
 
}
.r{
  -moz-transform:  rotate(180deg);   -o-transform:   rotate(180deg);   -webkit-transform: rotate(180deg);   transform:     rotate(180deg);
   /* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=-1,      M12=1.2246467991473532e-16,      M21=-1.2246467991473532e-16,      M22=-1,      SizingMethod='auto expand');
 
}
.b{
  -moz-transform:  rotate(270deg);   -o-transform:   rotate(270deg);   -webkit-transform: rotate(270deg);   transform:     rotate(270deg);
  /* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=6.123233995736766e-17,      M12=1,      M21=-1,      M22=6.123233995736766e-17,      SizingMethod='auto expand');
   
}

ログイン後にコピー

JS 公開ファイル

var home = $('#home');
  var snakeArr = [];
  var direcation = 'l';
  var speed = 0;
  var timer = '';
  //460/20
  var rows = 23;
  var cols = 25;
  var die = false;      //用于判断是否game over
  var food = [];
  var sorce = 0;       //得分的显示

ログイン後にコピー

まず、ヘビを飼いたい場合は、ヘビを作成する必要があります。

for( var i=0; i<4; i++ ){
    //var snakeDiv = document.createElement("div");
    //snakeDiv.style = 'background:url(./images/snake' + i + '.png) no-repeat;';
    var snakeDiv = $('<div style="background:url(./images/snake' + i + '.png) no-repeat;z-index:999"></div>');
    home.append(snakeDiv);
    snakeArr[i] = {r : 10, c : 10 + i, div : snakeDiv, d : direcation};
    setPosition(snakeArr[i]); 
  }

ログイン後にコピー

ヘビが現れたら、次のように動くのが自然です:

function move(){
    var timer = setInterval(function(){
    for( var i=snakeArr.length -1; i>0; i-- ){
      snakeArr[i].c = snakeArr[i-1].c;
      snakeArr[i].r = snakeArr[i-1].r;
      snakeArr[i].d = snakeArr[i-1].d;
      }
 
      switch(direcation){
      case 'l' :
        snakeArr[0].c--;
        snakeArr[0].d = 'l';
        break;
 
      case 'r' :
        snakeArr[0].c++;
        snakeArr[0].d = 'r';
        break;
 
      case 't' :
        snakeArr[0].r--;
        snakeArr[0].d = 't';
        break;
 
      case 'b' :
        snakeArr[0].r++;
        snakeArr[0].d = 'b';
        break;
    }
 
    //snake的方向控制
    $(window).keydown(function(event){
      switch(event.keyCode){
        case 37 :
          direcation = 'l';
          break;
 
        case 38 :
          direcation = 't';
          break;
 
        case 39 :
          direcation = 'r';
          break;
 
        case 40 :
          direcation = 'b';
          break;
      }
    });
 
      //snake事故
      //1. snake撞墙
      if( snakeArr[0].c < 0 || snakeArr[0].r < 0 || snakeArr[0].c >= cols || snakeArr[0].r >= rows ){
          clearInterval(timer);
          die = true;
          alert('GAME OVER');
      }
 
      //2. snake撞到自己
      for( var i=1; i<snakeArr.length; i++ ){
        if( snakeArr[0].c == snakeArr[i].c && snakeArr[0].r == snakeArr[i].r ){
           clearInterval(timer);
           die = true;
           alert('GAME OVER');
        }
      }
 
      //snake吃水果
      if( snakeArr[0].c == food[0].c && snakeArr[0].r == food[0].r ){
        food[0].div.css({background : 'url(./images/snake2.png) no-repeat'});
        snakeArr.splice(snakeArr.length - 1, 0, food[0]);
        food.shift();
        sorce += 10;
        $('#score').html(sorce);
      }
 
      //snake产生水果
      if( food.length == 0 ){
        createFood(); 
      }
 
 
      for(var i = 0; i < snakeArr.length; i++){
        setPosition(snakeArr[i]);
      }
    },speed);
 
}

ログイン後にコピー

食品の生産:

function createFood(){
    var r = parseInt(rows * Math.random());
    var c = parseInt(cols * Math.random());
    var casrsh = false;
     
    //2个水果出现的位置不能一样
    while( food.length == 0 ){
      //判断snake的位置，不能与snake相撞
      for( var i = 0; i < snakeArr.length; i++ ){
        if( r == snakeArr[i].r && c == snakeArr[i].c ){
          casrsh = true;
        }
      }
      //当位置不重叠的时候，产生水果
      if( !casrsh ){
        var i = parseInt(4 * Math.random());
        var foodDiv = $('<div style="background:url(./images/fruit'+ i +'.png);"></div>');
        home.append(foodDiv);
        food.push({r : r, c : c, div : foodDiv});
        setPosition(food[0]);
      }
    }
     
  }

ログイン後にコピー

もう 1 つの重要な機能は、位置をリセットすることです:

function setPosition(obj){
    obj.div.css({left : obj.c * 20, top : obj.r * 20}); 
    obj.div.removeClass().addClass(obj.d);
  }
  createFood();  //那页面一被加载出来就显示出食物！

ログイン後にコピー

この記事が、JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

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

ホットツール

ホットトピック

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

7619

CakePHP チュートリアル

1389

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

136

Related knowledge

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

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

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 上のゲームをクラッシュさせる

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

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

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 サイトを参照するか、カスタマーサービスにお問い合わせください。スラストマへのアクセス方法

PC または Xbox 上の Call of Duty: Ghosts がロード画面でスタック、クラッシュ、またはフリーズする Feb 19, 2024 pm 12:03 PM

Call of Duty: Ghosts はスタート画面から動かなくなったり、クラッシュしたりフリーズしたりしますか?多くのプレイヤーが、自分のデバイスでのゲームのパフォーマンスが低いと報告しています。起動時に空白の黒い画面が表示され続けたり、途中でフリーズしたり、ランダムにクラッシュしたりします。これらの問題は、PC と Xbox コンソールの両方で報告されています。あなたが影響を受けるユーザーの場合、この記事は Call of Duty: Ghosts のパフォーマンスの問題を解決するのに役立ちます。 Call of Duty: Ghosts が読み込み画面でスタックする、PC または Xbox でクラッシュまたはフリーズする読み込み画面で途切れが発生する場合、またはゲームがフリーズし続ける場合は、次の解決策が Ghost の問題の解決に役立つ可能性があります。ホストまたはコンピューターが CodGhost のシステム要件を満たしていることを確認してください。本体を再起動します。タスク管理で

See all articles

js_javascript スキルを使って「Snake」の小さなゲームを作成する

ホット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版

ホットトピック