この記事の例では、スネークゲームを実装するための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 マスタースレーブ サービスの実装例を構成する
序文データベースをバックアップするときは、データベース全体のバックアップを使用します。ただし、何らか...
目次コンストラクタインスタンスとプロトタイプの関係プロトタイププロパティ属性またはメンバーの検索原則...
序文私が作成中の Markodwn エディターに同期スクロール機能を追加する必要があります。Baid...
VueはPCカメラを呼び出してリアルタイムで写真を撮影します。参考までに、具体的な内容は次のとおりで...
この記事では、Linux 環境の Apache で https サービスを有効にする方法について説明...
開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...
擬似要素と擬似クラスところで、まずは疑似クラスセレクターと疑似要素セレクターについておさらいしておき...
目次導入効果のデモンストレーションは次のとおりです。 MChat コンポーネントのレンダリング: I...
公式サイトからダウンロードしたmysql-8.0.19-winx64 Windows (x86、64...
vue3コンポーネントの通信モードは次のとおりです。小道具$放出$expose / 参照$属性vモデ...
CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...
<marquee> タグはペアで表示されるタグです。最初のタグ <marquee...
1. コンポーネントの実装方法:組件名稱首字母必須大寫1. JS関数を通じてコンポーネントを実装...
1 MySQLの自動コミット設定MySQL はデフォルトで自動的にコミットします。つまり、各 DML...
次の2つの関数は、 FIND_IN_SETと同じように使用されます。使用する場合、 FIND_IN_...