温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html5如何实现俄罗斯方块游戏

发布时间:2022-02-22 15:35:23 来源:亿速云 阅读:172 作者:iii 栏目:开发技术

这篇“html5如何实现俄罗斯方块游戏”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“html5如何实现俄罗斯方块游戏”文章吧。

代码:

<!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[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; 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()
                    tetrisObj.move(-1)
                    tetrisObj.drawBlock(tetrisObj.type_color)
                    break
                case 39:  // 方向为右
                    tetrisObj.initBackground()
                    tetrisObj.move(1)
                    tetrisObj.drawBlock(tetrisObj.type_color)
                    break
            }    
        }

    </script>
</body>
</html>

以上就是关于“html5如何实现俄罗斯方块游戏”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI