第一次寫俄羅斯方塊的時候已經是1年多前了，也是我剛學js不久。
為了加強對js的理解又加上對遊戲的愛好，於是在沒有參考他人的想法和程式碼下，自己用最基本的js程式碼寫出了基於canvas的俄羅斯方塊。
在大三的暑假，我又用了es6的語法進行了改進，包含了class的語法糖、箭頭函數等，進一步增加自己對es6的理解，程式碼有400+行
想要做這個小遊戲，必須先熟悉H5的canvas，js對陣列的處理，鍵盤事件監聽處理，計時器的使用等，其他的就是基本的邏輯處理了。
遊戲的規則就是核心，也是我們程式碼的重中之重
這裡的邏輯核心是需要判斷方塊是否碰撞（當前運動的方塊和已經定位好的方塊有碰撞以致於當前的運動的方塊不能在向下走，因為我們的方塊默認是向下走的，如果不能向下走，是視為已經定位好的方塊，然後在產生一個新的方塊從初始位置繼續往下走）。
而這個碰撞還需要應用在方塊變形的時候，同樣地，如果方塊在變形的過程中和其他定位好的方塊進行碰撞，則我們應該阻止這個方塊進行變形成功，
附上程式碼，歡迎討論和指正
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>es6-重建俄羅斯方塊(基於canvas)</title> <style type=text/css> #tetris{ margin: 10px 250px;} </style></head><body> <canvas width=700 height=525 id=tetris></canvas> <div id=text style='color: red;font-size: 30px;'>目前分數：0</div> <script type=text/javascript> /** * [一個完整的俄羅斯方塊類別design by magic_xiang] * @param {number} side [每個方塊邊長(px),預設35] * @param {number} width [一行包含的方塊數(個),預設20] * @param {number} height [一列包含的方塊數(個),預設15] * @param {number} speed [方塊下落移動速度(ms),預設400] */ class tetris{ constructor(side=35, width=20, height=15, speed=400){ this.side = side //每個方塊邊長this.width = width // 一行包含的方塊數this.height = height // 一列包含的方塊數this.speed = speed // 方塊下落移動速度this.num_blcok // 當前區塊類型的數字變數this.type_color // 目前顏色類型的字串變數this.ident // setInterval的識別this.direction = 1 // 方塊方向,初始化為1，預設狀態this.grade = 0 // 用來計算分數this.over = false // 遊戲是否結束this.arr_bX = [] // 存放目前方塊的X座標this.arr_bY = [] // 存放目前方塊的Y座標this.arr_store_X = [] // 存放到達底部所有方塊的X座標this.arr_store_Y = [] // 存放到達底部所有方塊的Y座標this.arr_store_color = [] //存放到達底部所有方塊的顏色this.paints = document.getElementById('tetris').getContext('2d') //取得畫筆self = this } // 封裝paints方法，讓程式碼更簡潔paintfr(x, y, scale=1){ this.paints.fillRect(x*this.side, y*this.side, scale*this.side, scale*this.side) } // 遊戲開始gameStart(){ this.init() this.run() } // 初始化工作init(){ this.initBackground() this.initBlock() } // 方塊自動下落run(){ this.ident = setInterval(self.down_speed_up(), this.speed) } // 初始化地圖initBackground(){ this.paints.beginPath() this.paints.fillStyle='#000000' //地圖填滿顏色為黑色for(let i = 0; i < this.height; i++){ for(let j = 0; j < this .width; j++){ this.paintfr(j, i) } } this.paints.closePath() } //初始化方塊的位置和顏色initBlock(){ this.paints.beginPath() this.createRandom('rColor') //產生顏色字串， this.paints.fillStyle = this.type_color this.createRandom('rBlock') / /產生方塊類型數字this.arr_bX.forEach((item, index) => { this.paintfr(item, this.arr_bY[index], 0.9) }) this.paints.closePath() } // 利用陣列畫方塊drawBlock(color){ this.paints.beginPath() this.paints.fillStyle = color this.arr_bX.forEach( (item, index) => { this.paintfr(item, this.arr_bY[index], 0.9) }) this.paints.closePath() } // 畫已經在定位好的方塊drawStaticBlock(){ this.arr_store_X.forEach((item, index) => { this.paints.beginPath() this.paints. fillStyle = this.arr_store_color[index] this.paintfr(item, this.arr_store_Y[index], 0.9) this.paints.closePath() }) } // 產生隨機數回傳方塊型別或顏色型別createRandom(type){ let temp = this.width/2-1 if (type == 'rBlock'){ //如果是方塊類型this.num_blcok = Math.round(Math.random()*4+1) switch(this.num_blcok){ case 1: this.arr_bX.push(temp,temp-1,temp,temp+1) this.arr_bY.push(0,1,1,1) break case 2: this.arr_bX. push(temp,temp-1,temp-1,temp+1) this.arr_bY.push(1,0,1,1) break case 3: this.arr_bX.push(temp,temp-1,temp+1,temp+2) this.arr_bY.push(0,0,0,0) break case 4: this.arr_bX.push(temp,temp-1, temp,temp+1) this.arr_bY.push(0,0,1,1) break case 5: this.arr_bX.push(temp,temp+1,temp,temp+1) this.arr_bY.push(0,0,1,1) break } } if (type == 'rColor'){ //如果是顏色類型let num_color = Math.round(Math.random()*8+1) switch(num_color){ case 1: this.type_color='#3EF72A' break case 2: this.type_color='yellow' break case 3: this.type_color='#2FE0BF' break case 4: this.type_color='red' break case 5: this.type_color='gray' break case 6: this. type_color='#C932C6' break case 7: this.type_color= '#FC751B' break case 8: this.type_color= '#6E6EDD' break case 9: this.type_color= '#F4E9E1' break } } } // 判斷方塊之間是否碰撞(下)，以及變形時是否越過下邊界judgeCollision_down() { for(let i = 0; i < this.arr_bX.length; i++){ if (this.arr_bY[i] + 1 == this.height){ //變形時是否越過下邊界return false } if (this.arr_store_X.length != 0) { //判斷方塊之間是否碰撞(下) for(let j = 0; j < this.arr_store_X.length; j++){ if (this.arr_bX[i] == this.arr_store_X[j]) { if (this.arr_bY[i] + 1 == this.arr_store_Y[j]) { return false } } } } } return true } //判斷方塊之間是否碰撞(左右)，以及變形時是否越過左右邊界judgeCollision_other( num){ for(let i = 0; i < this.arr_bX.length; i++){ if (num == 1) { //變形時是否越過右邊界if (this.arr_bX[i] == this.width - 1) return false } if (num == -1) { //變形時是否越過左邊界if (this.arr_bX[i] == 0) return false } if (this.arr_store_X.length != 0) { //判斷方塊之間是否碰撞(左右) for(let j = 0; j < this.arr_store_X.length; j++){ if (this.arr_bY[i] == this.arr_store_Y[j]) { if (this.arr_bX[i] + num == this.arr_store_X[j]) { return false } } } } } return true; } //方向鍵為下的加速函數down_speed_up(){ let flag_all_down = true flag_all_down = this.judgeCollision_down() if (flag_all_down) { this.initBackground() for(let i = 0; i < this.arr_bY.length; i++){ this.arr_bY[i] = this.arr_bY.length; i++){ this.arr_bY[i] = this.arr_bY[i] + 11 } } else{ for(let i=0; i < this.arr_bX.length; i++){ this.arr_store_X.push(this.arr_bX[i]) this.arr_store_Y.push(this.arr_bY[i]) this.arr_store_color.push(this.type_color) } this.arr_bX.splice(0,this. arr_bX.length) this.arr_bY.splice(0,this.arr_bY.length) this.initBlock() } this.clearUnderBlock() this.drawBlock(this.type_color) this.drawStaticBlock() this.gameover() } //方向鍵為左右的左移動函數move(dir_temp){ this.initBackground() if (dir_temp == 1) { //右let flag_all_right = true flag_all_right = this.judgeCollision_other(1) if (flag_all_right) { for(let i = 0; i < this.arr_bY.length; i++){ this.arr_bX[i] = this.arr_bX[i]+1 } } } else{ let flag_all_left = true flag_all_left = this.judgeCollision_other(-1) if (flag_all_left) { for(let i=0; i < this.arr_bY.length; i++){ this.arr_bX[i] = this.arr_bX[i]-1 } } } this.drawBlock(this.type_color) this. drawStaticBlock() } //方向鍵為空格的變換方向函數up_change_direction(num_blcok){ if (num_blcok == 5) { return } let arr_tempX = [] let arr_tempY = [] //因為不知道是否能夠變形成功，所以先儲存起來for(let i = 0;i < this.arr_bX.length; i++) { arr_tempX.push(this.arr_bX[i]) arr_tempY.push(this.arr_bY[i]) } this.direction++ //將中心座標提取出來，變形都以當前中心為準let ax_temp = this.arr_bX[0] let ay_temp = this.arr_bY[0] this.arr_bX.splice(0, this.arr_bX.length) //將陣列清空this.arr_bY.splice(0, this.arr_bY.length) if (num_blcok == 1) { switch(this.direction%4){ case 1: this.arr_bX.push(ax_temp,ax_temp-1,ax_temp,ax_temp+1) this.arr_bY.push(ay_temp,ay_temp+1,ay_temp+1) this.arr_bY.push(ay_temp,ay_temp+1,ay_temp+1 ,ay_temp+1) break case 2: this.arr_bX.push(ax_temp,ax_temp-1,ax_temp,ax_temp) this.arr_bY.push(ay_temp,ay_temp,ay_temp-1,ay_temp+1) break case 3: this.arr_bX.push(ax_temp,ax_temp-1,axax_ax_temp-1,ax ax_temp,ax_temp+1) this.arr_bY.push(ay_temp,ay_temp,ay_temp+1,ay_temp) break case 0: this.arr_bX.push(ax_temp,ax_temp,ax_temp,ax_temp+1) this.arr_bY.push(ay_temp,ay_temp-1,ay_temp+ 1,ay_temp) break } } if (num_blcok == 2) { switch(this.direction%4){ case 1: this.arr_bX.push(ax_temp,ax_temp-1,ax_temp-1,ax_temp+1) this.arr_bY.push(ay_temp,ay_temp,ay_temp-1,ay_temp) break case 2: this.arr_bX.push(ax_temp,ax_temp,ax_temp,ax_temp-1) this.arr_bY.push(ay_temp,ay_temp-1,ay_temp+1,ay_temp+1) break case 3: this.arr_bX.push(ax_temp,ax_temp-1,ax_temp+1,ax_temp+1) this.arr_bY.push( ay_temp,ay_temp,ay_temp,ay_temp+1) break case 0: this.arr_bX.push(ax_temp,ax_temp,ax_temp,ax_temp+1) this.arr_bY.push(ay_temp,ay_temp-1,ay_temp+1,ay_temp-1) break } } if (num_blcok == 3) { switch(this .direction%4){ case 1: this.arr_bX.push(ax_temp,ax_temp-1,ax_temp+1,ax_temp+2) this.arr_bY.push(ay_temp,ay_temp,ay_temp,ay_temp) break case 2: this.arr_bX.push(ax_temp,ax_temp,ax_temp,ax_temp,ax_temp,ax_ ax_temp) this.arr_bY.push(ay_temp,ay_temp-1,ay_temp+1,ay_temp+2) break case 3: this.arr_bX.push(ax_temp,ax_temp-1,ax_temp+1,ax_temp+2) this.arr_bY.push( ay_temp,ay_temp,ay_temp,ay_temp) break case 0: this.arr_bX.push(ax_temp,ax_temp,ax_temp,ax_temp) this.arr_bY.push(ay_temp,ay_temp-1,ay_temp+1,ay_temp+2) break } } if (num_blcok == 4) { switch(this.direction %4){ case 1: this.arr_bX.push(ax_temp,ax_temp-1,ax_temp,ax_temp+1) this.arr_bY.push(ay_temp,ay_temp,ay_temp+1,ay_temp+1) break case 2: this.arr_bX.push(ax_temp,ax_temp, ax_temp+1,ax_temp+1) this.arr_bY.push(ay_temp,ay_temp+1,ay_temp,ay_temp-1) break case 3: this.arr_bX.push(ax_temp,ax_temp,ax_temp-1,ax_temp+1) this.arr_bY.push(ay_temp,ay_temp- 1,ay_temp,ay_temp-1) break case 0: this.arr_bX.push(ax_temp,ax_temp,ax_temp+1,ax_temp+1) this.arr_bY.push(ay_temp,ay_temp-1,ay_temp,ay_temp+1) break } } if (! (this.judgeCollision_other(-1) && this.judgeCollision_down() && this.judgeCollision_other(1) )) { //如果變形不成功則執行下面程式碼this.arr_bX.splice(0, this.arr_bX.length) this.arr_bY.splice(0, this.arr_bY.length) for(let i=0; i< arr_tempX.length ; i++){ this.arr_bX.push(arr_tempX[i]) this.arr_bY.push(arr_tempY[i]) } } this.drawStaticBlock() } //一行滿了清空方塊，上面方塊Y座標+1 clearUnderBlock(){ //刪除低層方塊let arr_row=[] let line_num if (this.arr_store_X.length != 0) { for(let j = this.height-1; j >= 0; j--){ for(let i = 0; i < this.arr_store_color.length; i++){ if (this.arr_store_Y[i] == j) { arr_row.push(i) } } if (arr_row.length = = this.width) { line_num = j break }else{ arr_row.splice(0, arr_row.length) } } } if (arr_row.length == this.width) { //計算成績grade this.grade++ document.getElementById('text').innerHTML = '當前成績：'+this.grade for(let i = 0; i < arr_row. length; i++){ this.arr_store_X.splice(arr_row[i]-i, 1) this.arr_store_Y.splice(arr_row[i]-i, 1) this.arr_store_color.splice(arr_row[i]-i, 1) } //讓上面的方塊往下掉一格for(let i = 0; i < this.arr_store_color.length; i++){ if (this.arr_store_Y[i] < line_num) { this.arr_store_Y[i] = this.arr_store_Y[i]+1 } } } } //判斷遊戲結束gameover(){ for(let i=0; i < this.arr_store_X.length; i++){ if (this. arr_store_Y[i] == 0) { clearInterval(this.ident) this.over = true } } } } let tetrisObj = new tetris() tetrisObj.gameStart() //方向鍵功能函數document.onkeydown = (e) => { if (tetrisObj.over) return switch(e.keyCode){ case 40: // 方向為下tetrisObj.down_speed_up( ) break case 32: // 空格換方向tetrisObj.initBackground() //重畫地圖tetrisObj.up_change_direction(tetrisObj.num_blcok) tetrisObj.drawBlock(tetrisObj.type_color) break case 37: // 方向為左tetrisObj.initBackground() tetrisObrawmovem（jt.Obj. break case 39: // 方向為右邊tetrisObj.initBackground() tetrisObj.move(1) tetrisObj.drawBlock(tetrisObj.type_color) break } } </script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。