この記事では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 最初の写真 さっそく、コードをご紹介します。気に入ったら、ぜひ星を付けてください♥(ˆ◡ˆՅ) <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <タイトル></タイトル> <スタイル> * { マージン: 0; パディング: 0; } .l { フロート: 左; } .r { フロート: 右; } .clear_fix::after { コンテンツ: ''; 高さ: 0; 幅: 100%; 表示: ブロック; クリア: 両方; オーバーフロー: 非表示; 可視性: 非表示; } 。体 { マージン: 50px 0 0 50px; 幅: 700ピクセル; } .続き{ 幅: 500ピクセル; 高さ: 500px; 境界線: 1px 緑; 右マージン: 8px; 位置: 相対的; } .cont div { 位置: 絶対; 幅: 10px; 高さ: 10px; 背景色: オレンジ; 境界線: 1px実線 #000; ボックスのサイズ: 境界線ボックス; } .cont .snakeHead { 境界線の半径: 50%; } .cont スパン { 位置: 絶対; 表示: インラインブロック; 幅: 10px; 高さ: 10px; 境界線: 1px実線 #000; ボックスのサイズ: 境界線ボックス; 境界線の半径: 50%; 背景: 緑; } 。スコア { 幅: 188ピクセル; 高さ: 500px; 境界線: 1px 実線の赤; } .スコア p { テキスト配置: 中央; 高さ: 50px; 行の高さ: 50px; フォントサイズ: 30px; マージン: 20px 0; 色: ブラウン } .スコア .時間{ 色:シャルトリューズ; フォントサイズ: 20px; } .btn{ 左余白: 50px } .btn .active { 背景色: 緑; } ボタン { 幅: 100ピクセル; 高さ: 30px; フォントサイズ: 24px; } </スタイル> </head> <本文> <div id="wrap"> <div class="body clear_fix"> <div class="cont l"> </div> スコア: </br> <p>0 ポイント</p> <時間> 時間: <p class="time"></p> </div> </div> <div class="btn"> <button>開始</button> <button class="active">通常</button> <button>難しい</button> <button>地獄</button> </div> </div> <スクリプト> var スネーク = { /* グローバルイベントを初期化し、初期イベントリスナーを追加します*/ 初期化: 関数 () { this.btns = document.querySelectorAll('ボタン'); this.score = document.querySelector('p'); this.cont = document.querySelector('.cont'); // 時間表示用のコンテナ this.time = document.querySelector('.time'); // ヘビの方向、「r」は右を意味します。this.dir = 'r'; /* タイマー */ this.timer = ''; /* 初期の蛇の頭の位置 */ this.head = { l: 30, 10: 10 秒 } // 蛇のしっぽ this.ender = { l: ''、 t: '' }; this.foodItem = { l: ''、 t: '' }; //開始状態 this.isStart = false; /* スコアカウンター */ this.counter = 0; //簡単な状態は 1、難しい状態は 2、地獄状態は 3 this.status = 1; この速度 = 10 this.btns[0].onclick = this.startFn //開始または一時停止 this.btns[1].onclick = this.simpleFn //シンプルモードのリスニング this.btns[2].onclick = this.difcultFn //難しいモードのリスニング this.btns[3].onclick = this.hardFn //ヘルモードのリスニング this.initCreate(); this.getTime() //ランダムな食べ物 this.getfood() }, initCreate() { //初期の蛇の頭と3つの蛇の体を作成します for (let i = 0; i <= 3; i++) { item = document.createElement('div'); を作成します。 オブジェクト.assign(item.style, { 左: this.head.l - 10 * i + 'px'、 上: this.head.t + 'px', /* 境界半径: '50%' */ }) (i == 0) の場合 { アイテム.className = 'snakeHead' } snake.cont.appendChild(アイテム); } }, /* ヘビの体のセクションを追加します*/ スネークを作成: 関数 (obj) { クリアインターバル(snake.timer) var div = document.createElement('div'); div.style.left = snake.ender.l; div.style.top = snake.ender.t; div 要素を追加します。 コンソールにログ出力します。 スネークを移動します。 /* コンソール.log(snake.cont); */ }, /* 開始時刻かどうかをチェックする*/ startFn: 関数() { 開始の場合 スネークを移動します。 snake.btns[0].innerHTML = '一時停止'; 開始するには、次の手順を実行します。 } それ以外 { スネークを停止します。 snake.btns[0].innerHTML = '開始'; スネークが開始しない場合は false を返します。 } }, /* コアモジュールの移動開始 */ 移動: 関数 () { document.onkeydown = snake.controlFn; var itemsAll = snake.cont.children; /* console.log(アイテムすべて); console.log(itemsAll,itemsAll[0].nodeName); */ /* ヘビの体の各セクションを格納する配列*/ var アイテム = []; var スパン; /* var items = Array.from(itemsAll).filter(function (v, k) { v.nodeName === 'DIV' を返します }); */ /* コンソール.log(アイテム); */ /* div (ヘビの体) と span (食べ物) をフィルターします */ (var j = 0; j < itemsAll.length; j++) { if (itemsAll[j].nodeName == 'DIV') { アイテムをプッシュ(itemsAll[j]) } それ以外 { スパン = itemsAll[j] } } /* ヘビの頭の位置を取得します */ var l = snake.head.l; var t = snake.head.t; コンソールにログ出力します。 console.log(アイテム) クリアインターバル(snake.timer) /* キーボード監視 */ document.onkeydown = snake.controlFn /* 移動開始 */ snake.timer = setInterval(関数() { /* ヘビの尻尾の位置を記録し、ヘビの尻尾を格納しているオブジェクトに更新します*/ snake.ender.l = items[items.length - 1].style.left; snake.ender.t = items[items.length - 1].style.top; /* ヘビの位置を更新します*/ (var i = items.length - 1; i > 0; i--) { アイテム[i].style.left = アイテム[i - 1].style.left; アイテム[i].style.top = アイテム[i - 1].style.top; } /* ヘビの頭の方向を決定し、その位置を更新します*/ (snake.dir == 'l')の場合{ l -= ヘビの速度; } (snake.dir == 'r')の場合{ l += ヘビの速度; } (snake.dir == 't')の場合{ t -= ヘビの速度; } (snake.dir == 'b')の場合{ t += ヘビの速度; } /* 境界 y 外 */ (l < 0 || l > 490 || t < 0 || t > 490) の場合 { クリアインターバル(snake.timer) snake.reStart(confirm('スネークモンスター、壁にぶつかりました!最初からやり直しますか?')) } アイテム[0].style.left = l + 'px'; アイテム[0].style.top = t + 'px'; /* ヘビの頭を記録するオブジェクトを更新します*/ ヘビの頭l = l ヘビの頭t = t /* コンソール.log(items[0].style); */ /* ヘビの頭を挿入 */ snake.cont.appendChild(アイテム[0]) (var k = 1; k < items.length; k++) の場合 { /* ヘビの頭が自分自身を噛んでいるかどうかを判定する*/ if (items[0].style.left == items[k].style.left && items[0].style.top == items[k] .style.top) { snake.reStart(confirm('ヘビの怪物、あなたは自分自身を噛み殺しました、最初からやり直しますか?')) /* console.log(items[0].style.left,items[0].style.top); console.log(items[0].style.left,items[0].style.top); */ クリアインターバル(snake.timer) /* alert('ゲームオーバー!'); ウィンドウの位置を再読み込み(true) */ 戻る } /* ヘビの体を挿入します */ snake.cont.appendChild(アイテム[k]) } /* 食べ物を食べた */ コンソールにログ出力します。 /* console.log(l, '食べ物を食べる'); */ l == parseInt(span.style.left) && t == parseInt(span.style.top) の場合 { ヘビを食べる() } }, parseInt(300 / snake.status)) }, 食べる() { スネーク.createSnake() ヘビ.getfood() スネークカウンター++; snake.score.innerHTML = `${snake.counter*100} ポイント` }, /* ゲームが終了し、再開するかどうかを決定します*/ reStart: 関数 (値) { if (値) { ウィンドウの位置を再読み込み(true) } }, /* 食料を生産する */ getfood: 関数 () { document.querySelector('span') の場合 { console.log('入って来なさい'); document.querySelector('span').remove(); } var span = document.createElement('span'); var l = snake.randM(0, 49) * 10 var t = snake.randM(0, 49) * 10 console.log('食べ物を手に入れる', l, t); span.style.left = l + 'px'; span.style.top = t + 'px'; スネークの子要素を追加します。 (snake.isStart)の場合{ ヘビを移動します() } }, /* 乱数を生成する */ 取得時間() { 時間、h、m、s setInterval(関数() { 時間 = 新しい日付() h = 時間.getHours() m = time.getMinutes(); s = time.getSeconds(); (h < 10)の場合{ h = '0' + h } (m < 10)の場合{ m = '0' + m } (s < 10)の場合{ s = '0' + s } snake.time.innerHTML = `${h}: ${m}: ${s}` }, 1000) }, randM: 関数 (最小値, 最大値) { Math.round(Math.random() * (max - min) + min) を返します。 }, /* 一時停止*/ 停止: 関数 () { クリアインターバル(snake.timer) }, /* シンプルモード */ 単純な関数: 関数 () { スネークのステータス = 1; ヘビ.btnFn() snake.btns[1].className = 'アクティブ' }, /* 複合モード */ 差関数: 関数() { スネークのステータス = 3; ヘビ.btnFn() snake.btns[2].className = 'アクティブ' }, /* ヘルモード */ ハード関数: 関数() { スネークのステータス = 5; ヘビ.btnFn() snake.btns[3].className = 'アクティブ' }, btnFn: 関数() { snake.btns.forEach(関数(v, k) { v.className = '' }); (snake.isStart)の場合{ スネークを移動します。 } }, /* ヘビを動かすボタン*/ コントロール関数: 関数 (el) { var el = el || window.event; var code = el.keycode || el.which; console.log(コード); if ((コード == 40 || コード == 83)&&snake.dir != 't') { スネーク.dir = 'b' } if ((コード == 39 || コード == 68)&&snake.dir != 'l') { スネーク.dir = 'r' } if ((コード == 38 || コード == 87)&&snake.dir != 'b') { スネーク.dir = 't' } if ((コード == 37 || コード == 65)&&snake.dir != 'r') { スネーク.dir = 'l' } } } スネークを初期化します。 </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL で二重引用符の位置が誤っていたために起きた殺人事件の詳細な分析
>>: EasyUEFI を使用して Windows 10 で USB ドライブなしで Ubuntu 18 をインストールする
1つ。 wget https://dev.mysql.com/get/mysql57-communi...
基本構造:コードをコピーコードは次のとおりです。 <ダウンロード> <dt>...
アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...
この記事では、MySQL 5.7.21のインストールに関する注意事項をまとめ、皆さんと共有します。 ...
メインライブラリの構成1. MySQLを設定する vim /etc/my.cn # ファイルに次の内...
<br />オリジナルURL: http://www.lxdong.com/post/m...
MySQL はインストールが簡単で、高速で、豊富な機能を備えています。これはオープンソース運動のベン...
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...
目次1. 概要2. 名前フィールド3. バージョンフィールド4. 説明フィールド5. キーワードフィ...
目次導入ログ分類パラメータファイルエラーログファイル完全なログファイルスロークエリログバイナリログフ...
目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...
grubの起動時間を変更するためのオンライン検索は基本的に/etc/default/grubを変更す...
目次1. ダウンロード2. 展開1.Nginxのデプロイメント2. ModSecurityの展開3....
vue3コンポーネントの通信モードは次のとおりです。小道具$放出$expose / 参照$属性vモデ...
目次1. シーンの読み込み2. ノードを見つける1. ノード検索2. その他のノード操作3. 再生ア...