HTML5是當前最新版本的HTML代碼,它優化了網頁開發的功能和性能。其中,HTML5的canvas標簽、audio標簽和video標簽等功能使得網頁變得更加豐富和生動。
俄羅斯方塊游戲是一款經典的游戲,它的基本元素是由四塊小正方形組成的不同形狀的圖形,玩家需要將這些圖形拼接起來填滿一行或多行并消除,以此來獲得分數。
<canvas id="tetris" width="240" height="400"></canvas> var canvas = document.getElementById('tetris'); var context = canvas.getContext('2d'); context.scale(20, 20); function drawSquare(x, y, color) { context.fillStyle = color; context.fillRect(x, y, 1, 1); } var board = []; for (var i = 0; i< 20; i++) { board[i] = []; for (var j = 0; j< 12; j++) { board[i][j] = 'black'; } } var piece = [ [1, 1], [1, 1] ]; function drawBoard() { for (var i = 0; i< board.length; i++) { for (var j = 0; j< board[i].length; j++) { drawSquare(j, i, board[i][j]); } } } function drawPiece() { for (var i = 0; i< piece.length; i++) { for (var j = 0; j< piece[i].length; j++) { if (piece[i][j]) { drawSquare(j + 3, i, 'red'); } } } } drawBoard(); drawPiece();
上面的代碼使用了HTML5中的canvas標簽,通過JavaScript來控制畫布上的圖形。首先,定義了一個20x12的網格,并填充成黑色,這就是游戲的場地。然后,定義了一個大小為2x2,由紅色方塊構成的圖形,每個方塊大小為20x20像素。下面的代碼用來繪制這個場地和圖形,并將其描繪在畫布上。
HTML5的canvas標簽還有很多其他的功能,如動畫、漸變、陰影和圖像處理等,它為網頁開發帶來了更多的可能性和創造性。俄羅斯方塊游戲就是其中的一個很好的例子。