如何用canvas实现俄罗斯方块

最新推荐文章于 2023-12-28 10:00:00 发布

no bug no life

最新推荐文章于 2023-12-28 10:00:00 发布

阅读量1.2w

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51364599/article/details/108950604

版权

我的游戏系列

技术比较菜，用了要600多行代码完成，内容涉及完完全全只有canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="margin: 0;">
    <canvas id="tetris" style="border: 1px solid #000;"></canvas>
    <div id="text" style='color: red;font-size: 30px;'>当前分数：0</div>
</body>
<script>
    let cav = document.getElementById('tetris')
    let text = document.getElementById('text')
    let ctx = cav.getContext('2d')
    let k = 40 //倍数
    let speed = 1000
    let grade = 0
    let restartFlag = false
    let timer = null
    let curGraphPositionList = []
    let curtype = undefined
    let transformNum = 0
    let blockGraph = Array(10)
    let beforeUpdateGraph = []
    for(let i = 0;i<blockGraph.length;i++){
    
        blockGraph[i] = Array(20)
    }
    cav.width = 10*k 
    cav.height = 20*k
    ctx.fillStyle="yellow"
    ctx.strokeStyle="black"
    function ramdomRectType(){
    
        return Math.floor((Math.random()*7)+1)
    }
    function randomXposition(){
    
        return Math.floor(Math.random()*10)
    }
    function drawRect(position,width){
    
        ctx.beginPath()
        ctx.rect(position[0],position[1],width,width)
        ctx.fill();
        ctx.stroke()
    }
    function drawGraph(positionList){
    
        if(positionList.length===0){
    
            return
        }
        for(let item of positionList){
    
           let x= item[0]*k
           let y= item[1]*k
           let position = [x,y]
           drawRect(position,k)
        }
    }
    function isOut(position,xOry){
    //x:0,y:1
        if(xOry===0){
    
            if(position<0||position>9){
    
                return true
            }else{
    
                return false
            }
        }else{
    
            if(position<0||position>19){
    
                return true
            }else{
    
                return false
            }
        }
    }
    function randomRectShape(){
    
        let rposition = randomXposition()
        let type = ramdomRectType()
        curtype = type
        transformNum = 0
        let positionList = []
        let one = []
        let two = []
        let three = []
        let four = []
        switch(type){
    
            case 1:
                if(isOut(rposition+2,0)){
    
                    return randomRectShape()
                }else{
    
                    one = [rposition+2,0]
                    two = [rposition,1]
                    three = [rposition+1,1]
                    four = [rposition+2,1]
                }
                break;
            case 2:
                if(isOut(rposition+2,0)){
    
                    return randomRectShape()
                }else{
    
                    one = [rposition,0]
                    two = [rposition,1]
                    three = [rposition+1,1]
                    four = [rposition+2,1]
                }
                break;
            case 3:
                if(isOut(rposition+2,0)){
    
                    return randomRectShape()
                }else{
    
                    one = [rposition+1,0]
                    two = [rposition+2,0]
                    three = [rposition,1]
                    four = [rposition+1,1]
                }
                break;
            case 4:
                if(isOut(rposition+2,0)){
    
                    return randomRectShape()
                }else{
    
                    one = [rposition,0]
                    two = [rposition+1,0]
                    three = [rposition+1,1]
                    four = [rposition+2,1]
                }
                break;
            case 5:
                if(isOut(rposition+2,0)){
    
                    return randomRectShape()
                }else{
    
                    one = [rposition+1,0]
                    two = [rposition,1]
                    three = [rposition+1,1]
                    four = [rposition+2,1]
                }
                break;
            case 6:
                if(isOut(rposition+1,0)){
    
                    return randomRectShape()
                }else{
    
                    one = [rposition,0]
                    two = [rposition+1,0]
                    three = [rposition,1]
                    four = [rposition+1,1]
                }
                break;
            case 7:
                if(isOut(rposition+3,0)){
    
                    return randomRectShape()
                }else{
    
                    one = [rposition,0]
                    two = [rposition+1,0]
                    three = [rposition+2,0

最低0.47元/天解锁文章

no bug no life

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
如何用canvas实现俄罗斯方块

我的游戏系列技术比较菜，用了要600多行代码完成，内容涉及完完全全只有canvas<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫