劉任昌HTML,CSS,Javascript俄羅斯方塊

維基百科VS Code PIXEL畫素

HTML原始碼

<meta charset="UTF-8">

<title>去有風的地方改寫mohd-aman俄羅斯方塊</title>

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

<h1 id="score">去有風的地方分數: 0</h1>

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

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

<!HTML的註解是後面都不執行>

<!CSS的註解是/*被包圍的文字是註解*/>

<!JavaScript與其他程式語言//或/*被包圍的文字是註解*/>

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;

}

JavaScript原始碼

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

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

let ctx = canvas.getContext("2d");/*canvas帆布,繪圖套件名稱*/

ctx.scale(30,30);

const FOUR = [     //使用陣列array,註解兩條斜線或/*包圍*/

    [[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;i<grid.length;i++){     //逐列檢查

        let rowFilled = true;           //預設有填滿

        for(let j=0;j<grid[0].length;j++){

            if(grid[i][j] == 0){       //若存在維持0者

                rowFilled = false;};}; //沒有填滿

        if(rowFilled){                 //若填滿

            count++;

            grid.splice(i,1);          //移除第i列僅移除1列

            grid.unshift([0,0,0,0,0,0,0,0,0,0]);};}; //利用generateRow結果rows

    if(count == 1){score+=1;}      //刪1列10分

    else if(count == 2){score+=10;} //刪2列30分

    else if(count == 3){score+=100;} //刪3列50分

    else if(count>3){score+=100000}    //刪4列100分

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

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

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

    for(let i=0; i<ROWS; i++){  //產生列

        grid.push([]);

        for (let j=0; j<COLS;j++){

            grid[i].push(0);}       //利用generateRow結果rows

    }

    return grid;}

function randomPieceObject(){       //函數產生方塊組,可以簡化

    let ran = Math.floor(Math.random()*7);

    let piece = FOUR[ran];

    let colorIndex = ran+1;

    let x = 4;

    let y = 0;

    return {piece,colorIndex,x,y};} //產生一個物件

function renderPiece(){             //函數填滿俄羅斯方塊

    let piece = fallingPieceObj.piece;

    for(let i=0;i<piece.length;i++){

        for(let j=0;j<piece[i].length;j++){

            if(piece[i][j] == 1){

            ctx.fillStyle = COLORS[fallingPieceObj.colorIndex];

            ctx.fillRect(fallingPieceObj.x+j,fallingPieceObj.y+i,1,1);};};};}

function moveDown(){

    if(!collision(fallingPieceObj.x,fallingPieceObj.y+1))

        fallingPieceObj.y += 1;             //往下一格

    else{let piece = fallingPieceObj.piece; //碰到底

        for(let i=0;i<piece.length;i++){

            for(let j=0;j<piece[i].length;j++){

                if(piece[i][j] == 1){

                    let p = fallingPieceObj.x+j;//圖形第一個座標x往右

                    let q = fallingPieceObj.y+i;//矩陣第一個座標q往下

                    grid[q][p] = fallingPieceObj.colorIndex;};};};

        if(fallingPieceObj.y == 0){

            alert("遊戲結束，自動開始！");

            grid = generateGrid();          //遊戲重新開始

            score = 0;};

        fallingPieceObj = null; };

    renderGame();}

function moveLeft(){

    if(!collision(fallingPieceObj.x-1,fallingPieceObj.y))

        fallingPieceObj.x -= 1;

    renderGame();}

function moveRight(){

    if(!collision(fallingPieceObj.x+1,fallingPieceObj.y))

        fallingPieceObj.x+=1;

    renderGame();}

function rotate(){

    let rotatedPiece = [];

    let piece = fallingPieceObj.piece;

    for(let i=0;i<piece.length;i++){

        rotatedPiece.push([]);

        for(let j=0;j<piece[i].length;j++){

            rotatedPiece[i].push(0);}; };

    for(let i=0;i<piece.length;i++){

        for(let j=0;j<piece[i].length;j++){

            rotatedPiece[i][j] = piece[j][i]};};

    for(let i=0;i<rotatedPiece.length;i++){

        rotatedPiece[i] = rotatedPiece[i].reverse();};

    if(!collision(fallingPieceObj.x,fallingPieceObj.y,rotatedPiece))

        fallingPieceObj.piece = rotatedPiece

    renderGame()}

function collision(x,y,rotatedPiece){       //函數檢查是否不能轉

    let piece = rotatedPiece || fallingPieceObj.piece

    for(let i=0;i<piece.length;i++){

        for(let j=0;j<piece[i].length;j++){

            if(piece[i][j] == 1){

            let p = x+j;

            let q = y+i;

            if(p>=0 && p<COLS && q>=0 && q<ROWS){

                if(grid[q][p]>0){ return true;};}

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

    return false;}

function renderGame(){

    for(let i=0; i<grid.length ;i++){

        for(let j=0; j<grid[i].length; j++){

            ctx.fillStyle = COLORS[grid[i][j]];

            ctx.fillRect(j,i,1,1);};};

    renderPiece();}

document.addEventListener("keydown",function(e){

    let key = e.key;

    if(key == "ArrowDown"){moveDown();}

    else if(key == "ArrowLeft") {moveLeft();}

    else if(key == "ArrowRight"){moveRight();}

    else if(key == "ArrowUp")   {rotate();};})