この記事では、参考までに、JSでスネークゲームを書くための具体的なコードを紹介します。具体的な内容は次のとおりです。 私はちょうど js の学習を終えたところで、チュートリアルを真似て独自の js ネイティブ アプレットを作成しました。 HTML部分 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <link rel="スタイルシート" href="./css/index.css" > </head> <本文> <div class="content"> <!-- ゲーム開始ボタン--> <div class="btn startBtn"><ボタン></ボタン></div> <!-- 蛇の体 --> <div id="snakeWrap"></div> </div> <!-- 外部 js ファイルをインポート--> <script src="./js/index.js"></script> </本文> </html> CSS部分 /* 全体的なスタイル */ 。コンテンツ{ 幅: 640ピクセル; 高さ: 640px; マージン: 100px 自動; 位置: 相対的; } .btn{ 幅: 100%; 高さ: 100%; 位置: 絶対; 左: 0; 上: 0; 背景色: rgba(0, 0, 0, 0.3); zインデックス: 2; } .btn ボタン{ 背景: なし; 境界線: なし; 背景サイズ: 100% 100%; カーソル: ポインタ; アウトライン: なし; 位置: 絶対; 左: 50%; 上位: 50%; } .startBtn ボタン{ 幅: 200ピクセル; 高さ: 80px; 背景: url(../images/Snipaste_2021-05-08_08-52-45.png) 繰り返しなし; 背景サイズ: 含む; 左マージン: -100px; 上マージン: 222px; } #スネークラップ{ 幅: 600ピクセル; 高さ: 600px; 背景: #73aad4; 境界線: 20px 実線 #13649c; 位置: 相対的; } .snakeHead{ 背景色: 黄緑; 境界線の半径: 50%; } .snakeBody{ 背景色: 黒; 境界線の半径: 50%; } 。食べ物{ 背景色: 赤; 境界線の半径: 50%; } js部分 var sw = 20, //ブロックの幅 sh = 20, //ブロックの幅 tr = 30, //行数 td = 30; //列数 var snake = null, //スネークインスタンスを生成 food = null; //フードインスタンスを生成 game = null; //ゲームインスタンスを作成 //全体を小さなブロックの移動として扱い、ブロックを作成および削除します(後続のブロックはすべて呼び出されます) // 正方形コンストラクタ関数 Square(x,y,classname){ // CSS の 3 つの蛇のスタイル (蛇の頭、蛇の胴体、蛇の尾) に対応します sw を次のように書き換えます。 y を y に置き換える this.class = クラス名; this.viewContent = document.createElement('div'); this.viewContent.className = this.class; // 作成された div に対応する CSS スタイルを追加します。 this.parent = document.getElementById('snakeWrap'); } //ブロックコンストラクタのプロトタイプチェーンにcreateメソッドを作成し、新しいdivの特定の情報を決定します //これはSquareを指します Square.prototype.create = 関数(){ this.viewContent.style.position = '絶対'; this.viewContent.style.width = sw + 'px'; this.viewContent.style.height = sh + 'px'; this.viewContent.style.left = this.x + 'px'; this.viewContent.style.top = this.y + 'px'; this.parent.appendChild(this.viewContent); // 新しく作成した div をページに追加します} // ブロックコンストラクタのプロトタイプチェーンに削除メソッドを作成し、移動時にブロックを削除します。Square.prototype.remove = function(){ this.parent.removeChild(this.viewContent); } //スネーク関数Snake(){ this.head = null; // ヘビの頭の情報を保存します this.tail = null; // ヘビの尻尾の情報を保存します this.pos = []; // ヘビの各ブロックの位置を保存します this.directionNum = { // ヘビが歩いている方向を保存します left : { x : -1, 年:0 }, 右 : { x : 1, 年:0 }, 上 : { x : 0, y : -1 }, 下 : { x : 0, 年:1 } } } //これはSnakeを指します Snake.prototype.init = function(){ // 初期化 // スネークヘッドを作成 var snakeHead = new Square(2,0,'snakeHead'); スネークヘッドを作成します。 this.head = スネークヘッド; this.pos.push([2,0]); // ヘビの頭の情報を保存する // ヘビの体 1 を作成する var snakeBody1 = new Square(1,0,'snakeBody'); スネークボディ1を作成します。 this.pos.push([1,0]); // ヘビの体の情報を保存します // ヘビのしっぽを作成します var snakeBody2 = new Square(0,0,'snakeBody'); スネークボディ2を作成します。 this.tail = snakeBody2; this.pos.push([0,0]); /ヘビの尻尾の信頼度を保存する//リンクリストの関係を形成する//ヘビの頭、胴体、尻尾の関係 snakeHead.last = null; スネークヘッドの次のコード スネークボディ1.last = スネークヘッド; ヘビのボディ1.next = ヘビのボディ2; スネークボディ2.last = スネークボディ1; スネークボディ2.next = null; // ヘビのデフォルトの方向を右に追加します。this.direction = this.directionNum.right; } // 蛇の頭の次の位置に対応する要素を取得します(これは蛇を指します) // 次の点の座標を取得し、nextPos配列に格納します。Snake.prototype.getNextPos = function(){ var 次の位置 = [ this.head.x/sw + this.direction.x, //this.direction.x, y 以下は、方向をキーボードイベントにバインドして、次のポイントの位置を決定します this.head.y/sh + this.direction.y ] // 次のポイントはあなた自身です。自分自身と衝突するとゲームは終了します。var selfCollied = false; this.pos.forEach(function(value){ //forEachは配列を走査し、2つの配列を比較して重複する座標があるかどうかを確認します。if (value[0] == nextPos[0] && value[1] == nextPos[1]){ 自己コリッド = true; } }) //自分自身を攻撃するとゲームは終了します if (selfCollied) { これ。、 .die.call(これを); 戻る; } // 次のポイントは壁ゲーム終了 if (nextPos[0] > 29 || nextPos[0] < 0 || nextPos[1] > 29 || nextPos[1] < 0) { this.strategies.die.call(これを); 戻る; } // 次のポイントは食べる食べ物です if(food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]){ this.strategies.eat.call(これを); 戻る; } // 次のポイントは何もありませんので、this.strategies.move.call(this); に進みます。 } // 衝突後に何をするか Snake.prototype.strategies = { move : function(format){ // パラメータは、蛇の尻尾を削除するかどうかを決定するために使用されます // 新しいボディを作成し、蛇の頭を削除します var newBody = new Square(this.head.x/sw,this.head.y/sh,'snakeBody') 新しいボディーの次を this.head.next に置き換えます。 新しいボディを次に示します。 newBody.last = null; this.head.remove(); 新しいボディを作成します。 // 新しいヘビの頭を作成します。var newx = this.head.x/sw + this.direction.x; var newy = this.head.y/sh + this.direction.y; var newHead = new Square(newx,newy,'snakeHead') 新しいボディを作成します。 新しいボディー.last = 新しいヘッド; newHead.last = null; 新しいヘッドを作成します。 // ヘビの体の座標を更新します this.pos.splice(0,0,[newx,newy]); this.head = newHead; //falseの場合は、if(!format){ this.tail.remove(); this.tail = this.tail.last; this.pos.pop(); } }, 食べる:関数(){ this.strategies.move.call(this,true); ゲームスコア++; フードを作成します。 }, 死ぬ:関数(){ ゲームオーバー(); } } スネーク = 新しいSnake(); // 食べ物を作成する function createFood(){ // 食品キューブの座標 var x = null; var y = null; var include = true; while(含める){ x = Math.round(Math.random()*(td - 1)); y = Math.round(Math.random()*(tr - 1)); snake.pos.forEach(関数(値){ if(x != 値[0] && y != 値[1]){ 含める = false; } }); } // 食べ物を生成 food = new Square(x,y,'food'); 食べ物の位置 = [x,y]; var foodDom = document.querySelector('.food'); if(foodDom){ foodDom.style.left = x * sw + 'px'; foodDom.style.top = y * sh + 'px'; }それ以外{ food.create(); } } // ゲームロジック関数を作成する Game(){ this.timer = null; this.スコア = 0; } Game.prototype.init = 関数(){ スネークを初期化します。 フードを作成します。 //以前のe.keycode e.whichはここで無効になっています。e.keyを使用してください window.addEventListener('keydown',function(e){ if(e.key == 'ArrowLeft' && snake.direction != snake.directionNum.right){ 左から右へ }else if(e.key == 'ArrowUp' && snake.direction != snake.directionNum.down){ 方向 = 上方向; }それ以外の場合、e.key == 'ArrowRight' && snake.direction != snake.directionNum.left){ ヘビの方向 = ヘビの方向Num.right; }else if(e.key == 'ArrowDown' && snake.direction != snake.directionNum.up){ ヘビの方向 = ヘビの方向Num.down; } }); これを開始(); } Game.prototype.start = function(){ this.timer = setInterval(関数(){ スネークの次の位置を取得します。 },0.00000000000000001) } Game.prototype.over = function(){ タイマー間隔をクリアします。 alert('あなたのスコアは' + this.score); // ゲームは初期状態に戻ります var snakeWrap = document.getElementById('snakeWrap'); snakeWrap.innerHTML = ''; スネーク = 新しいSnake(); ゲーム = 新しいゲーム(); var startBtnWrap = document.querySelector('.startBtn'); startBtnWrap.style.display = 'ブロック'; } // ゲームを開始します game = new Game(); var startBtn = document.querySelector('.startBtn ボタン'); startBtn.onclick = 関数(){ startBtn.parentNode.style.display = 'なし'; ゲームを初期化します。 } これは簡単なゲームです。質問があれば、ぜひ教えてください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Windows システムの MySQL が中国語を入力および表示できない問題の解決方法
>>: Docker コンテナ入門から夢中になるまで(推奨)
目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...
目次予備的注釈問題の再現データ削除の原則データの再利用どの操作がデータホールの原因になりますか?表領...
公式の MySQL ダンプ ツールで、特定のデータベースのみを復元するにはどうすればよいですか?完全...
この記事では、ツリーテーブルを実装するためのVueの具体的なコードを例として紹介します。具体的な内容...
HTML を使用してコンテンツをマークアップする目的は、Web ページにセマンティクスを与えることで...
今日は、すべてのブラウザ (主に IE 9 以上と Chrome) と互換性のある自分のホームページ...
バージョン間でのコマンドの違い: innodb ステータスを表示\G mysql-5.1 エンジン ...
apache: ポートに基づいて仮想ホストを作成する仮想ホスト(a、b、c)の作成を例に挙げます1)...
MySQL トリガー構文の詳細: トリガーは、特定のテーブル内のデータが挿入、削除、または更新される...
簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...
開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...
React で国際化を実現するにはどうすればよいでしょうか? react-intlプラグインは、Re...
目次1. ウィザードに従って仮想マシンを作成します2. オペレーティングシステムをインストールします...
土曜日、本番サーバー上の Redis サーバーが利用できなくなり、エラー メッセージは次のようになり...
MultiTail は、tail コマンド機能と同様に、複数のドキュメントを同時に監視するために使用...