この記事では、参考までに、jsで書かれたシンプルなスネークゲームの具体的なコードを紹介します。具体的な内容は次のとおりです。 コードは次のとおりです。HTML 5 パート <!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> <スタイル> #シーン{ 幅: 800ピクセル; 高さ: 600px; 境界線: 1px実線 #000; マージン: 50px 自動; 背景色: アリスブルー; 位置: 相対的; オーバーフロー: 非表示; } 。頭{ 位置: 絶対; 幅: 20px; 高さ: 20px; 背景色: #000; } 。しっぽ{ 位置: 絶対; 幅: 20px; 高さ: 20px; 背景色: グレー; } </スタイル> </head> <本文> <div id="シーン"> </div> </本文> </html> <script src="tools.js"></script> <script src="../贪吃蛇/snake.js"></script> <script src="food.js"></script> <script src="game.js"></script> js部分 ツール.js 関数 getStyle(ele, styleObj) { for (const key in styleObj) { ele.style[キー] = styleObj[キー]; } } 関数 getRandom(a, b) { Math.floor(Math.random() * (b - a) + a +1) を返します。 } スネーク 関数Snake() { this.scence = document.querySelector('#scence'); this.body = [ [0, 0, '灰色', null], [0, 1, '灰色', null], [0, 2, '#000', null] ]; this.dir = '右'; this.lastdir = '右'; 幅 = 20; this.height = 20; scence_w = scence.offsetWidth; scence_h = scence.offsetHeight; } Snake.prototype.found = 関数 () { (i = 0 とします; i < this.body.length; i++) { this.body[i][3] == nullの場合{ this.body[i][3] = document.createElement('div'); } getStyle(this.body[i][3], { 幅: this.width + 'px', 高さ: this.height + 'px', 位置: '絶対'、 上: this.height * (this.body[i][0]) + 'px', 左: this.width * (this.body[i][1]) + 'px'、 背景色: this.body[i][2] }); this.scence.appendChild(this.body[i][3]); } } //移動 function Snake.prototype.move = function () { var length = this.body.length; (i = 0; i < 長さ - 1; i++) の場合 { this.body[i][0] = this.body[i + 1][0]; this.body[i][1] = this.body[i + 1][1]; } スネークヘッド = this.body[長さ - 1]とします。 スイッチ (this.dir) { ケース 'right': スネークヘッド[1] += 1; 壊す; ケース「左」: スネークヘッド[1] -= 1 壊す; ケース「上」: スネークヘッド[0] -= 1 壊す; ケース「ダウン」: スネークヘッド[0] += 1 壊す; } this.lastdir = this.dir; ヘビが見つかりました(); } // タイミングの動き Snake.prototype.shift = function () { document.onkeydown = (e) => { e = e || ウィンドウイベント; キーをe.keyCodeとします。 スイッチ(キー){ ケース39: if (this.lastdir == 'left') { this.dir = '左' } それ以外 { this.dir = '右' }; 壊す; ケース37: if (this.lastdir == 'right') { this.dir = '右' } それ以外 { this.dir = '左' }; 壊す; ケース38: if (this.lastdir == 'down') { this.dir = '下' } それ以外 { this.dir = '上' }; 壊す; ケース40: if (this.lastdir == 'up') { this.dir = '上' } それ以外 { this.dir = '下' }; 壊す; } } } //ゲームオーバー Snake.prototype.over = function () { top = this.body[this.body.length - 1][0]とします。 left = this.body[this.body.length - 1][1]とします。 幅を this.scence_w / this.width - 1 とします。 高さを this.scence_w / this.height - 1 とします。 上 < 0 || 左 < 0 || 上 > 幅 || 左 > 高さ) { clearInterval(タイムID) 警告('ゲームオーバー'); } (i = 0 とします; i < this.body.length - 1; i++) { 上 == this.body[i][0] && 左 == this.body[i][1]) { clearInterval(タイムID) 警告('ゲームオーバー'); } } } snake = new Snake(); ヘビが見つかりました(); ヘビ.shift(); timeid = setInterval(関数() { スネークを移動します。 食べ物を食べる(); スネークオーバー() }, 100) 食べ物.js 関数 Food() { this.scence = document.querySelector('#scence'); 幅 = 20; this.height = 20; this.body = [-1, -1, '赤', null]; scence_w = scence.offsetWidth; scence_h = scence.offsetHeight; } // 食品生成 Food.prototype.crteate = function () { this.body[1] = getRandom(0, this.scence_w / this.width-1); this.body[0] = getRandom(0, this.scence_h / this.height-1); this.body[3] = document.createElement('div'); getStyle(this.body[3], { 幅: this.width + 'px', 高さ: this.height + 'px', 位置: '絶対'、 上: this.height * (this.body[0] ) + 'px', 左: this.width * (this.body[1] ) + 'px'、 背景色: this.body[2], 境界半径: '50%', }); this.scence.appendChild(this.body[3]); } //ヘビが餌を食べる Food.prototype.eat=function(){ // 定数 new = [0, 0, 'grey', null] if(snake.body[snake.body.length-1][0]==this.body[0] && snake.body[snake.body.length-1][1]==this.body[1]){ this.scence.removeChild(this.body[3]); this.create(); snake.body.unshift([-1,-1,"grey",null]) } } food = new Food(); とします。 food.create(); 食べ物を食べる(); 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux コマンド sort、uniq、tr ツールの詳細な説明
>>: MySQLのビューとインデックスの使い方と違いの詳細な説明
目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...
目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...
テーブルページを作成するときに、td に設定された幅が無効になることがあります。td の幅は常に内部...
SQL はメイントランクです。なぜ私はこのように理解するのでしょうか。技術的な観点からリレーショナル...
この記事では、例を使用して、MySQL イベントの変更 (ALTER EVENT)、イベントの無効化...
CLion のプロセス全体を最初から説明します。CLion は、JetBrains がリリースした新...
成果を達成するコードは次のとおりですhtml <テンプレート> <div> ...
序文JS に触れるすべての開発者は、必然的に for ループを扱うことになります。結局のところ、fo...
今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...
この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...
最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...
多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...
これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...
1. ダウンロードして解凍します: /Users/xiechunping/Softwares/mys...
Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...