謝宸峰VS code編輯HTML,CSS,JS俄羅斯方塊

改寫自印度程式設計師

模仿與利用Code with Scaler製作的俄羅斯方塊遊戲，它的過程是使用VS Code編輯HTML, CSS, JS三個檔案。我們去理解它，然後改善它，將程式寫得更有效率，然後增加功能，例如預告下一個方塊、增加音效等。寫程式不可能順利，一定會錯誤，然後在解決問題的過程中，讓自己變得更強大。 接下來學習的重點是陣列，例如T型的變數 [[1,1,1], [0,1,0], [0,0,0]] ;//二維陣列

w3school學習二微陣列JavaScript Arrays

利用w3schools學習JavaScript Arrays

賽保,富豪,寶馬,謝宸峰 0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0 0,1,0,0,1,0,1,1,0 0,1,0,0,1,0,0,1,1 1,1,0,0,1,1,0,0,0 0,1,1,1,1,0,0,0,0 1,1,1,0,1,0,0,0,0 1,1,1,1 undefined white red orange yellow darkgreen #29296e indigo purple

影片335

影片336

影片337

在撰寫模式下貼上程式碼

<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>/*css共用幾乎有*/

const FOUR = [                  //二維矩陣設定

    [[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]],//I紅

    [[0,1,0],  [0,1,0],  [1,1,0]],            //J橘

    [[0,1,0],  [0,1,0],  [0,1,1]],            //L黃

    [[1,1,0],  [0,1,1],  [0,0,0]],            //Z綠

    [[0,1,1],  [1,1,0],  [0,0,0]],            //S藍

    [[1,1,1],  [0,1,0],  [0,0,0]],            //T靛

    [[1,1],    [1,1],]];             //M紫,正方形,以上共7個

const COLORS = [   "white","red","orange","yellow","darkgreen","#29296e","indigo","purple"];

const cars = ["賽保", "富豪", "寶馬", "劉任昌"];//一維array

document.getElementById("demo").innerHTML = cars;

tmp1=""; tmp2="";

for(i=0; i < COLORS.length; i++)

{tmp1 += FOUR[i];tmp1 += "<br>";

tmp2 += COLORS[i];tmp2 += "<br>"}

document.getElementById("demo1").innerHTML = tmp1;

document.getElementById("demo2").innerHTML = tmp2

</script>