龍星岑VS Code俄羅斯方塊maintain維護增加顯示方塊

339

340

學習心得

之前用STYLE區塊，現在獨立一個STYLE.CSS檔案。 之前用SCRIPT，現在獨立一個SCRIPT.JS檔案。

js 程式碼

let canvas = document.getElementById("tetris");

let scoreboard = document.getElementById("score");

let ctx = canvas.getContext("2d");

ctx.scale(30,30);

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 = [

    "lightgray","red","orange","yellow","darkgreen","blue","indigo","purple"];

const ROWS = 20;                    //列數ROWS

const COLS = 10;                    //欄數COLumnS

let grid = generateGrid();          //呼叫函數產生20x10格子

let fallingPieceObj = null;

let score = 0;

setInterval(newGameState,200);      //設定間隔500

function newGameState(){            //函數

    checkGrid();

    if(!fallingPieceObj){           //如果空的,產生新方塊

        fallingPieceObj = randomPieceObject();

        renderPiece();};                //新方塊

    moveDown();}   //繼續往下失效

function checkGrid(){ //函數逐列檢查是否滿格rowFiller?

    let count = 0;

    for(let i=0;i3){score+=100}    //刪4列100分

    document.getElementById("score").innerHTML = "劉任昌分數: " + score;}

function generateGrid(){        //函數一開始就設定格子

    let grid = [];              //宣告空白陣列[]

    for(let i=0; i=0 && p=0 && q0){ return true;};}

            else{ return true;}; }; };};

    return false;}

function renderGame(){

    for(let i=0; i