Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "html5 how to achieve Tetris Game", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "html5 how to achieve Tetris Game" article.

Code:

Es6- reconstructs Tetris (based on canvas) # tetris {margin: 10px 250px } current score: 0 / * [A complete design by magic_xiang of Tetris] * @ param {number} side [side length of each square (px), default 35] * @ param {number} width [number of squares contained in one line) Default 20] * @ param {number} height [number of blocks contained in a column, default 15] * @ param {number} speed [square falling speed (ms), default 400] * / class tetris {constructor (side=35, width=20, height=15) Speed=400) {this.side = side / / the side length of each square this.width = width / / the number of squares contained in a row this.height = height / / the number of squares contained in a column this.speed = speed / / square falling speed This.num_blcok / / numeric variable of current square type this.type_color / / string variable of current color type identification this.direction of this.ident / / setInterval = 1 / / square direction Initialize to 1 The default state this.grade = 0 / / is used to calculate the score this.over = false / / whether the game is over this.arr_bX = [] / / the X coordinate this.arr_bY for storing the current square = [] / / store the Y coordinates of the current square this.arr_store_X = [] / / store the X coordinates this.arr_store_Y = [] / / store the Y coordinates this.arr_store_color = [] / / reach the bottom of all squares at the bottom The color of all squares this.paints = document.getElementById ('tetris'). GetContext (' 2d') / / get brush self = this} / / Encapsulation paints method Make the code more concise paintfr (x, y, scale=1) {this.paints.fillRect (x*this.side, y*this.side, scale*this.side) Scale*this.side)} / / Game start gameStart () {this.init () this.run ()} / / initialize working init () {this.initBackground () this.initBlock () } / / the square automatically falls run () {this.ident = setInterval ("self.down_speed_up ()") This.speed)} / / initialize the map initBackground () {this.paints.beginPath () this.paints.fillStyle='#000000' / / the map fill color is black 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] ) this.paints.closePath ()} / / use array cubes 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 ()} / / the square drawStaticBlock () {this.arr_store_X.forEach ((item)) is already positioned. 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 ()})} / generate a random number to return the square type or color type createRandom (type) {let temp = this.width/2-1 if (type = = 'rBlock') {/ / if it is a square Type this.num_blcok = Math.round (Math.random () * 4x1) switch (this.num_blcok) {case 1: this.arr_bX.push (temp) Temp-1,temp,temp+1) this.arr_bY.push (0jue 1jue 1je 1) break case 2: this.arr_bX.push (temp,temp-1,temp-1,temp+1) this.arr_bY.push (1Jing 0 1 break case 1) break case 3: this.arr_bX.push (temp,temp-1,temp+1,temp+2) this.arr_bY.push (0d0) Break case 4: this.arr_bX.push (temp,temp-1,temp,temp+1) this.arr_bY.push (0d0) 1 break case 1) break case 5: this.arr_bX.push (temp,temp+1,temp,temp+1) this.arr_bY.push (0d0) 1 break}} if (type = = 'rColor') {/ / if it is a color type let num_color = Math.round (Math.random () * 831) 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} }} / / to determine whether squares collide (part two) And whether the lower boundary judgeCollision_down () {for (let I = 0) is crossed during deformation. 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[i] + 1 } } 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,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,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) 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; jmi -) {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')[xss_clean] = '当前成绩：'+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: / / the direction is lower tetrisObj.down_speed_up () break case 32: / / spaces change direction tetrisObj.initBackground () / / redraw the map tetrisObj.up_change_direction (tetrisObj.num_blcok) tetrisObj.drawBlock (tetrisObj.type_color) break case 37: / / left tetrisObj.initBackground () tetrisObj.move (- 1) TetrisObj.drawBlock (tetrisObj.type_color) break case 39: / / right tetrisObj.initBackground () tetrisObj.move (1) tetrisObj.drawBlock (tetrisObj.type_color) break}} This is the content of the article "how html5 implements Tetris Game". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.