賴威愷VS Code俄羅斯方塊maintain維護增加顯示render物件

影片341

模仿印度開發人員

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

html程式碼

<meta charset="UTF-8"></meta>

<title>賴威愷改寫mohd-aman俄羅斯方塊</title>

<link href="./style.css" rel="stylesheet"></link>

<h1 id="score">分數: 0</h1>

<canvas height="600" id="tetris" width="430"></canvas>

<script src="./script.js"></script>

<h1>css程式碼</h1>

*{  margin: 0;

    padding: 0;

    box-sizing: border-box;}

body{

    display: flex;

    height: 90vh;

    align-items: center;

    justify-content: space-evenly;

    flex-direction: column;

    background-color: whitesmoke;}

#tetris{

    background-color: white;

    box-shadow: 0 0 10px 2px lightgrey;}

h2{background-color: black;

    color:white;

    border: solid 5px red;

}

css程式碼

*{  margin: 0;

    padding: 0;

    box-sizing: border-box;}

body{

    display: flex;

    height: 90vh;

    align-items: center;

    justify-content: space-evenly;

    flex-direction: column;

    background-color: whitesmoke;}

#tetris{

    background-color: white;

    box-shadow: 0 0 10px 2px lightgrey;}

h2{background-color: black;

    color:white;

    border: solid 5px red;

}