この記事の例では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 完成までに2時間かかりました。ちょっと粗雑です。 効果を直接確認してください。デバッグ パネルを開き、リソース パネルに新しいスニペットを作成します。 次のコードを貼り付け、スニペットを右クリックして実行します。 タイマーの間隔をクリアします。 ドキュメントのbody要素を空のままにしておくと、 // 1 秒間に何マス移動するか let speed = 10; speedUpMul = 3 とします。 //壁を通り抜けられますか? let isThroughTheWall = true; //行数 let row = 40; headColor を 'red' にします。 bodyColor を 'green' とします。 foodColor を 'yellow' とします。 borderColor を 'grey' にします。 //ゲームのグローバル変数 let hasFood = false; //ゲームステータス let gamestaus = 'start'; hasAccelerate を false にします。 mainContainer を document.createElement("div"); にします。 mainContainer.style.width = 20 * 行 + 1 + "px"; mainContainer.style.height = 20 * 行 + 1 + "px"; mainContainer.style.margin = "0 自動"; mainContainer.style.position = "相対"; mainContainer.style.border = "1px ソリッド " + borderColor; document.body.appendChild(メインコンテナ); for(let i = 0;i<row;i++){ marginTop = 20 * i + "px" とします。 for(j = 0; j < row; j++) { marginLeft = j * 20 + "px"とします。 tempDiv = document.createElement('div'); とします。 tempDiv.style.width = "19px"; tempDiv.style.height = "19px"; tempDiv.style.marginTop = marginTop; tempDiv.style.marginLeft = marginLeft; tempDiv.style.border = "0.5px ソリッド " + borderColor; tempDiv.style.position = "絶対"; tempDiv.id = j + "div" + i; mainContainer.appendChild(tempDiv); } } クラス Cell{ コンストラクタ(x, y, 色){ if (isThroughTheWall) { x < 0 の場合、x = 行-1; x > 行 - 1 の場合、x = 0; y < 0 の場合、y = 行 - 1; y > 行 - 1 の場合、y = 0; }それ以外{ if(x < 0 || y < 0 || x > 行 - 1 || y > 行 - 1){ タイマーの間隔をクリアします。 alert('ゲームオーバー'); 戻る; } } this.x = x; y = y; this.color = 色; tempDiv = document.getElementById(x + 'div' + y); とします。 if(tempDiv) tempDiv.style.backgroundColor = color; } } ヘビ = { 頭 : {}、 体 : []、 ダイレ:1 } headx = Math.floor(Math.random() * 14) + 3 とします。 heady = Math.floor(Math.random() * 14) + 3 とします。 snake.head = 新しいセル(headx、heady、headColor); //上、右、下、左、方向 = [1, 2, 3, 4] とします snake.dire = direction[Math.floor(Math.random() * 4)]; snake.direct == 1の場合 snake.body.push(新しいセル(snake.head.x、snake.head.y+1、bodyColor)); snake.body.push(新しいセル(snake.head.x、snake.head.y+2、bodyColor)); snake.body.push(新しいセル(snake.head.x、snake.head.y+3、bodyColor)); } snake.direct == 2の場合 snake.body.push(新しいセル(snake.head.x-1、snake.head.y、bodyColor)); snake.body.push(新しいセル(snake.head.x-2、snake.head.y、bodyColor)); snake.body.push(新しいセル(snake.head.x-3、snake.head.y、bodyColor)); } スネークダイレクトの場合 3 snake.body.push(新しいセル(snake.head.x、snake.head.y-1、bodyColor)); snake.body.push(新しいセル(snake.head.x、snake.head.y-2、bodyColor)); snake.body.push(新しいセル(snake.head.x、snake.head.y-3、bodyColor)); } snake.direct == 4の場合 snake.body.push(新しいセル(snake.head.x+1、snake.head.y、bodyColor)); snake.body.push(新しいセル(snake.head.x+2、snake.head.y、bodyColor)); snake.body.push(新しいセル(snake.head.x+3、snake.head.y、bodyColor)); } 関数ゲーム(){ if(ゲームステータス == '一時停止'){ 戻る; } if(ゲームステータス == 'ゲームオーバー'){ タイマーの間隔をクリアします。 alert('ゲームオーバー'); 戻る; } フードを初期化します。 snakeHeadX = snake.head.x とします。 snakeHeadY = snake.head.y とします。 色を '' とします。 snake.direct == 1の場合 tempDiv = document.getElementById(snakeHeadX + 'div' + (snakeHeadY-1)); とします。 if(tempDiv) color = tempDiv.style.backgroundColor; snake.head = 新しいセル(snakeHeadX、snakeHeadY - 1、headColor); } snake.direct == 2の場合 tempDiv = document.getElementById((snakeHeadX + 1) + 'div' + snakeHeadY); とします。 if(tempDiv) color = tempDiv.style.backgroundColor; snake.head = 新しいセル(snakeHeadX + 1、snakeHeadY、headColor); } スネークダイレクトの場合 3 tempDiv = document.getElementById(snakeHeadX + 'div' + (snakeHeadY+1)); とします。 if(tempDiv) color = tempDiv.style.backgroundColor; snake.head = 新しいセル(snakeHeadX、snakeHeadY + 1、headColor); } snake.direct == 4の場合 tempDiv = document.getElementById((snakeHeadX - 1) + 'div' + snakeHeadY); とします。 if(tempDiv) color = tempDiv.style.backgroundColor; snake.head = 新しいセル(snakeHeadX - 1、snakeHeadY、headColor); } snake.body.unshift(新しいセル(snakeHeadX、snakeHeadY、bodyColor)); if(color && color == foodColor){ フードがある = false; フードを初期化します。 }そうでない場合(色 && 色 == ボディカラー){ gamestaus = 'ゲームオーバー'; }それ以外{ lastBody を snake.body.pop() とします。 新しいセル(lastBody.x、lastBody.y、''); } } var timer = setInterval(ゲーム、10 / 速度 * 100) /** * 食べ物を初期化する */ 関数initFood(){ while(!hasFood){ x = Math.floor(Math.random() * row); とします。 y = Math.floor(Math.random() * row); とします。 snakeBody を snake.body とします。 enable = true とします。 ヘビの頭のx == x && ヘビの頭のy == y){ 有効 = false; } for(sBody of snakeBody){ sBody.x == x && sBody.y == yの場合{ 有効 = false; 壊す; } } if(有効){ 新しいセル(x, y, foodColor); 食べ物がある = true; } } } document.onkeydown = function(e){ if(e.keyCode == 38){ //if(snake.dire != 3 && snake.dire != 1){ ヘビ.dire = 1; }そうでない場合(snake.direct == 1){ 加速がある場合 タイマーの間隔をクリアします。 加速する = true; 速度 = 速度 * speedUpMul; タイマー = setInterval(ゲーム、10 / 速度 * 100) } } } if(e.keyCode == 39){ //正しいif(snake.dire != 4 && snake.dire != 2){ ヘビ.dire = 2; }そうでない場合(snake.dire == 2){ 加速がある場合 タイマーの間隔をクリアします。 加速する = true; 速度 = 速度 * speedUpMul; タイマー = setInterval(ゲーム、10 / 速度 * 100) } } } キーコード == 40 の場合 //Nextif(snake.dire != 1 && snake.dire != 3){ ヘビ.dire = 3; }そうでない場合(snake.dire == 3){ if(!hasAccelerate){ タイマーの間隔をクリアします。 加速する = true; 速度 = 速度 * speedUpMul; タイマー = setInterval(ゲーム、10 / 速度 * 100) } } } if(e.keyCode == 37){ // 左 if (snake.dire != 2 && snake.dire != 4) { ヘビ.dire = 4; }そうでない場合(snake.dire == 4){ if(!hasAccelerate){ タイマーの間隔をクリアします。 加速する = true; 速度 = 速度 * speedUpMul; タイマー = setInterval(ゲーム、10 / 速度 * 100) } } } //スペースバーで一時停止 if(e.keyCode == 32){ if(ゲームステータス == '開始'){ gamestaus = '一時停止'; }それ以外の場合(ゲームステータス == '一時停止'){ gamestaus = '開始'; } } } document.onkeyup = function(e){ if(e.keyCode == 38){ // if (snake.dire == 1 && hasAccelerate) { タイマーの間隔をクリアします。 加速あり = false; 速度 = 速度 / speedUpMul; タイマー = setInterval(ゲーム、10 / 速度 * 100) } } if(e.keyCode == 39){ // Rightif(snake.dire == 2 && hasAccelerate){ タイマーの間隔をクリアします。 加速あり = false; 速度 = 速度 / speedUpMul; タイマー = setInterval(ゲーム、10 / 速度 * 100) } } キーコード == 40 の場合 //Nextif(snake.dire == 3 && hasAccelerate){ タイマーの間隔をクリアします。 加速あり = false; 速度 = 速度 / speedUpMul; タイマー = setInterval(ゲーム、10 / 速度 * 100) } } if(e.keyCode == 37){ // 左 if (snake.dire == 4 && hasAccelerate) { タイマーの間隔をクリアします。 加速あり = false; 速度 = 速度 / speedUpMul; タイマー = setInterval(ゲーム、10 / 速度 * 100) } } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Mysql マスタースレーブ サービスの実装例を構成する
目次Nginx は 2 つの socket.io サーバーをプロキシします。 socket.ioの動...
次のサンプル コードでは、Tomcat が XML を解析し、リフレクションを通じてオブジェクトを作...
Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...
MySQLデータベースをダウンロードするには、https://dev.mysql.com/down...
目次序文REDOログの生成REDOログ送信REDOログの保存と通知ユーザースレッドに通知要約する序文...
Xhtml には、あまり使用されないが非常に便利なタグが多数あります。半分の労力で 2 倍の結果を達...
この記事では、MySQL 8.0.23のインストールと設定方法を参考までに紹介します。具体的な内容は...
Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...
この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...
この記事では、MySQL 8.0.12のインストールされていないバージョンを設定して起動するための具...
目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...
PHP7 がリリースされてからかなり時間が経ちますが、パフォーマンスが大幅に向上したことはよく知られ...
目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...
後悔を癒す薬は世の中にある、考えてみる気さえあれば!コンテナを再作成する必要はもうありません。 m2...
1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...