ウェブサイトで簡単なスネーク ゲームをホストする

コードとホスティング サービスを使用して、単純なスネーク ゲームを Web サイトで簡単にホストできます.コーディングや一部のプログラミング言語の名前さえ知らないかもしれません.しかし、心配しないでください.既に存在するコードを使用して、それを行うことができます.あなたがしなければならないのは、それらをリンクしてホストすることだけです.私のを見てください.

いいえ、これを行うのにもお金は必要ありません.かっこいいですね.では、先に進みましょう.

無料アカウントを作成するために infinityfree.net を使用しました.これを始める前に、そこにもサインアップすることをお勧めします.

私たちがしなければならないことは、大きく2つあります.これについて説明しましょう.

ゲームを実行するためのコードを取得し、それらを適切にリンクします.

インターネットでホストします.

パート 1: コードの準備。

まずはコードを取得しましょう.ここでは、簡単な例を使用しているので、Freecodecamp の Web サイトから引用しました. Fakorede Damilola によって書かれた article からのものです.彼は Javascript を使用してゲーム コードを作成しました.

それは主に3つのコンポーネントです.

1. HTML 部分

参考までに、ここにコードをコピーして貼り付けました.

<h1>Nokia 3310 snake</h1> <div class="scoreDisplay"></div> <div class="grid"></div> <div class="button"> <button class="top">top</button> <button class="bottom">bottom</button> <button class="left">left</button> <button class="right">right</button> </div> <div class="popup"> <button class="playAgain">play Again</button> </div>

2.CSS部分

これは、蛇と蛇が動く領域のスタイリング用です.

body { background: rgb(212, 211, 211); } .grid { width: 200px; height: 200px; border: 1px solid red; margin: 0 auto; display: flex; flex-wrap: wrap; } .grid div { width: 20px; height: 20px; /\*border:1px black solid; box-sizing:border-box\*/ } .snake { background: blue; } .apple { background: yellow; border-radius: 20px; } .popup { background: rgb(32, 31, 31); width: 100px; height: 100px; position: fixed; top: 100px; left: 100px; display: flex; justify-content: center; align-items: center; }

3. Javascript 部分

これは少しトリッキーな側面です.しかし、読んでください.不可能ではありません.

便宜上、Javascript の全体をここにコピーします.各コードブロックを勉強したい場合は、 article を参照することをお勧めします.

let grid = document.querySelector(".grid") let popup = document.querySelector(".popup"); let playAgain = document.querySelector(".playAgain"); let scoreDisplay = document.querySelector(".scoreDisplay") let left = document.querySelector(".left") let bottom = document.querySelector(".bottom") let right = document.querySelector(".right") let up = document.querySelector(".top") let width=10; let currentIndex = 0 let appleIndex=0 let currentSnake=\[2,1,0\] let direction =1 let score = 0 let speed = 0.8 let intervalTime =0 let interval =0 document.addEventListener("DOMContentLoaded",function(){ document.addEventListener("keyup",control) createBoard() startGame() playAgain.addEventListener("click", replay); }) function createBoard(){ popup.style.display = "none"; for(let i=0;i<100;i++){ let div =document.createElement("div") grid.appendChild(div) } } function startGame(){ let squares =document.querySelectorAll(".grid div") randomApple(squares) //random apple direction =1 scoreDisplay.innerHTML=score intervalTime=1000 currentSnake =\[2,1,0\] currentIndex = 0 currentSnake.forEach(index=>squares\[index\].classList.add("snake")) interval = setInterval(moveOutcome,intervalTime) } function moveOutcome (){ let squares =document.querySelectorAll(".grid div") if(checkForHits(squares)){ alert("you hit something") popup.style.display="flex" return clearInterval(interval) }else{ moveSnake(squares) } } function moveSnake(squares){ let tail = currentSnake.pop() squares\[tail\].classList.remove("snake") currentSnake.unshift(currentSnake\[0\]+direction) // movement ends here eatApple(squares,tail) squares\[currentSnake\[0\]\].classList.add("snake") } function checkForHits(squares){ if( (currentSnake\[0\] + width >=(width\*width) && direction === width) || (currentSnake\[0\] % width ===width -1 && direction ===1) || (currentSnake\[0\] % width === 0 && direction === -1) || (currentSnake\[0\] - width <= 0 && direction === -width) || squares\[currentSnake\[0\] + direction\].classList.contains("snake") ){ return true }else{ return false } } function eatApple(squares,tail){ if(squares\[currentSnake\[0\]\].classList.contains("apple")){ squares\[currentSnake\[0\]\].classList.remove("apple") squares\[tail\].classList.add("snake") currentSnake.push(tail) randomApple(squares) score++ scoreDisplay.textContent = score clearInterval(interval) intervalTime = intervalTime \*speed interval = setInterval(moveOutcome,intervalTime) } } function randomApple(squares){ do{ appleIndex =Math.floor(Math.random() \* squares.length) }while(squares\[appleIndex\].classList.contains("snake")) squares\[appleIndex\].classList.add("apple") } function control(e){ if (e.keycode===39){ direction = 1 // right }else if (e.keycode===38){ direction = -width //if we press the up arrow, the snake will go ten divs up }else if (e.keycode===37){ direction = -1 // left, the snake will go left one div }else if (e.keycode===40){ direction = +width // down the snake head will instantly appear 10 divs below from the current div } } up.addEventListener("click",()=>direction= -width ) bottom.addEventListener("click",()=>direction= +width ) left.addEventListener("click",()=>direction= -1 ) right.addEventListener("click",()=>direction= 1 ) function replay() { grid.innerHTML="" createBoard() startGame() popup.style.display = "none"; }

これで、記事から 3 つのコード ブロックを取得できました.しかし、それをどのように使用する必要があるか知っていますか?ここでは、プログラムが機能するようにコードを使用してリンクする方法を説明します.

ステップ1

HTML コードをメモ帳ファイルにコピーします.このような.代わりに Visual Studio も使用できます.コードの記述には問題なく機能します.

ステップ2

前に入力した HTML コードの上にタグを追加します.その中にタグを追加します.

次に、タグの間に CSS コードをコピーします.このような.



貼り付けた HTML コードの上に、このようになっている必要があります. HTML コードが始まる部分を強調表示しました.

ステップ 3

次に、このファイルに Javascript 部分を追加しましょう.作成した HTML スクリプトの最後に移動します.で終了します.タグを作成し、タグの間に Javascript コードをコピーして貼り付けます.これがイラストです.わかりやすくするために、HTML コードを選択しました.



次に、このファイルを任意の名前で保存し、「.html」拡張子を追加します.テキストファイルとして保存しないでください.動作するかどうかをテストするために、マシンで開いてみてください.これがあなたの画面になります.コードに自分の名前を追加したので、表示されます.

HTML コードを編集して、独自のものを追加することもできます.

パート 2: コードのホスティング。

コードの準備ができたので、ホストしましょう. infinityfree.net にアクセスし、作成したアカウントにログインします.

下の図に示すように、[アカウントの作成] ボタンをクリックします.



一意のドメイン名とその拡張子を選択します.続行.



そのパスワードを作成して続行します.



これが表示される画面です.

話を戻しましょう.ファイルマネージャーをクリックして開きます.このような:



これが表示されます. htdocs フォルダを開き、.HTML ファイルをそこにアップロードします.パート1で作成したものです.という名前になっていることを確認します.または、ゲームがリンクからロードされない場合があります.

infinityfree.net アカウントで作成したリンクに移動し、ゲームにアクセスします.ファイルの内容はいつでも変更でき、アカウント内のファイルを更新できます.



この記事が、コードのホスティングについて理解するのに役立つことを願っています.