铁雪资源网 Design By www.gsvan.com
本文实例为大家分享了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] four = [rposition+3,0] } break; } positionList.push(one,two,three,four) return positionList } function clearRect(position,width){ ctx.clearRect(position[0]*k-1,position[1]*k-1,width+2,width+2) } function clearGraph(curGraphPositionList){ if(curGraphPositionList.length===0){ return } for(let item of curGraphPositionList){ clearRect(item,k) } } function clearGraphList(){ let graphList = [] for(let i = 0;i< blockGraph.length;i++){ for(let j =0;j< blockGraph[i].length;j++){ if(blockGraph[i][j]===1){ graphList.push([i,j]) } } } clearGraph(graphList) } function isTouchOtherBlock(position){ return blockGraph[position[0]][position[1]] === 1 } function updateBlockGraph(graphPositionList){ for(let i =0;i<graphPositionList.length;i++){ let x = parseInt(graphPositionList[i][0]) let y = parseInt(graphPositionList[i][1]) blockGraph[x][y] = 1 } let transformArray = [] for(let i=0;i<20;i++){ let arr = blockGraph.map((item)=>{ return item[i] }) transformArray.push(arr) } let flagList = [] for(let i in transformArray){ let flag = 1 for(let j in transformArray[i]){ if(transformArray[i][j]!==1){ flag = 0 break } } flagList.push(flag) } let score = flagList.filter((item)=>{ return item === 1 }) if(score.length>0){ grade = grade + score.length text.innerHTML = '当前分数:'+grade for(let i in transformArray){ if(flagList[i]===1){ for(let j in transformArray[i]){ transformArray[i][j]=undefined } } } let hasBlockList = [] for(let i in transformArray){ let flagOfHasBlock = 0 for(let j in transformArray[i]){ if(transformArray[i][j]!==undefined){ flagOfHasBlock = 1 break } } hasBlockList.push(flagOfHasBlock) } for(let i = transformArray.length -1 ;i>=0;i--){ if(hasBlockList[i]===1){ let count = 0 for(let j = i ;j<19;j++){ if(hasBlockList[j+1]===0){ count++ }else{ break } } if(count===0){ continue } for(let j in transformArray[i]){ if(transformArray[i][j]===1){ transformArray[i][j] = undefined transformArray[i+count][j] = 1 } } hasBlockList[i]=0 hasBlockList[i+count]=1 } } let newBlockGraph = [] for(let i=0;i<10;i++){ let arr = transformArray.map((item)=>{ return item[i] }) newBlockGraph.push(arr) } clearGraphList() blockGraph = newBlockGraph } } function movePosition(curGraphPositionList,direct){ switch(direct){ case 'left': let minL = Math.min(...curGraphPositionList.map((item)=>{ return item[0] })) if(minL-1<0){ return curGraphPositionList }else{ let changeFlag = true let next = curGraphPositionList.map((item)=>{ return [item[0]-1,item[1]] }) for(let item of next){ if(isTouchOtherBlock(item)){ changeFlag = false } } if(changeFlag){ return next }else{ return curGraphPositionList } } break; case 'right': let maxR = Math.max(...curGraphPositionList.map((item)=>{ return item[0] })) if(maxR+1>9){ return curGraphPositionList }else{ let changeFlag = true let next = curGraphPositionList.map((item)=>{ return [item[0]+1,item[1]] }) for(let item of next){ if(isTouchOtherBlock(item)){ changeFlag = false } } if(changeFlag){ return next }else{ return curGraphPositionList } } break; case 'down': let maxD = Math.max(...curGraphPositionList.map((item)=>{ return item[1] })) if(maxD>18){ updateBlockGraph(curGraphPositionList) restartFlag = true return curGraphPositionList }else{ let changeFlag = true let next = curGraphPositionList.map((item)=>{ return [item[0],item[1]+1] }) for(let item of next){ if(isTouchOtherBlock(item)){ changeFlag = false } } if(changeFlag){ return next }else{ updateBlockGraph(curGraphPositionList) restartFlag = true return curGraphPositionList } } break; } } function checkOver(positionList){ for(let i in positionList){ let x = positionList[i][0] let y = positionList[i][1] if(blockGraph[x][y]===1){ over() alert('游戏结束') return true } } return false } function drawGraphList(){ let graphList = [] for(let i = 0;i< blockGraph.length;i++){ for(let j =0;j< blockGraph[i].length;j++){ if(blockGraph[i][j]===1){ graphList.push([i,j]) } } } drawGraph(graphList) } function isComplexData (data) { if(data===null||data===undefined){ return false } let flag = data.constructor===Array||data.constructor===Object return flag } function deepCopy (data) { if(!isComplexData (data)){ return data } let result = null if(data.constructor===Array){ result = [] }else{ result = {} } for(let i in data){ result[i] = deepCopy (data[i]) } return result } function move(direct){ clearGraph(curGraphPositionList) curGraphPositionList = movePosition(curGraphPositionList,direct) if(restartFlag){ drawGraphList(blockGraph) }else{ drawGraph(curGraphPositionList) } } function transform (curtype) { let checkArr = deepCopy(curGraphPositionList) if(transformNum>=3){ transformNum = 0 }else{ transformNum++ } switch(curtype){ case 1: caseOne(checkArr) break; case 2: caseTwo(checkArr) break; case 3: caseThree(checkArr) break; case 4: caseFour(checkArr) break; case 5: caseFive(checkArr) break; case 6: caseSix(checkArr) break; case 7: caseSeven(checkArr) break; } //start check outside let outflag = false let xArr = checkArr.map((item)=>{ return item[0] }) let yArr = checkArr.map((item)=>{ return item[1] }) for(let item of xArr){ if(isOut(item,0)){ outflag = true } } for(let item of yArr){ if(isOut(item,1)){ outflag = true } } if(outflag){ if(transformNum<=0){ transformNum = 3 }else{ transformNum-- } return } //end check if(!checkTranfromTouchBlock(checkArr)){ if(transformNum<=0){ transformNum = 3 }else{ transformNum-- } return }else{ clearGraph(curGraphPositionList) curGraphPositionList = checkArr drawGraph(curGraphPositionList) } } function checkTranfromTouchBlock(checkArr){ let changeFlag = true for(let item of checkArr){ if(isTouchOtherBlock(item)){ changeFlag = false } } return changeFlag } function caseOne(checkarr){ switch(transformNum){ case 0: checkarr[0][0]=checkarr[0][0]+2 checkarr[1][0]=checkarr[1][0]-1 checkarr[1][1]=checkarr[1][1]-1 checkarr[3][0]=checkarr[3][0]+1 checkarr[3][1]=checkarr[3][1]+1 break; case 1: checkarr[0][1]=checkarr[0][1]+2 checkarr[1][0]=checkarr[1][0]+1 checkarr[1][1]=checkarr[1][1]-1 checkarr[3][0]=checkarr[3][0]-1 checkarr[3][1]=checkarr[3][1]+1 break; case 2: checkarr[0][0]=checkarr[0][0]-2 checkarr[1][0]=checkarr[1][0]+1 checkarr[1][1]=checkarr[1][1]+1 checkarr[3][0]=checkarr[3][0]-1 checkarr[3][1]=checkarr[3][1]-1 break; case 3: checkarr[0][1]=checkarr[0][1]-2 checkarr[1][0]=checkarr[1][0]-1 checkarr[1][1]=checkarr[1][1]+1 checkarr[3][0]=checkarr[3][0]+1 checkarr[3][1]=checkarr[3][1]-1 break; } } function caseTwo(checkarr){ switch(transformNum){ case 0: checkarr[0][1]=checkarr[0][1]-2 checkarr[1][0]=checkarr[1][0]-1 checkarr[1][1]=checkarr[1][1]-1 checkarr[3][0]=checkarr[3][0]+1 checkarr[3][1]=checkarr[3][1]+1 break; case 1: checkarr[0][0]=checkarr[0][0]+2 checkarr[1][0]=checkarr[1][0]+1 checkarr[1][1]=checkarr[1][1]-1 checkarr[3][0]=checkarr[3][0]-1 checkarr[3][1]=checkarr[3][1]+1 break; case 2: checkarr[0][1]=checkarr[0][1]+2 checkarr[1][0]=checkarr[1][0]+1 checkarr[1][1]=checkarr[1][1]+1 checkarr[3][0]=checkarr[3][0]-1 checkarr[3][1]=checkarr[3][1]-1 break; case 3: checkarr[0][0]=checkarr[0][0]-2 checkarr[1][0]=checkarr[1][0]-1 checkarr[1][1]=checkarr[1][1]+1 checkarr[3][0]=checkarr[3][0]+1 checkarr[3][1]=checkarr[3][1]-1 break; } } function caseThree(checkarr){ if(transformNum%2!==0){ checkarr[0][0]=checkarr[0][0]+1 checkarr[0][1]=checkarr[0][1]+1 checkarr[1][1]=checkarr[1][1]+2 checkarr[2][0]=checkarr[2][0]+1 checkarr[2][1]=checkarr[2][1]-1 }else{ checkarr[0][0]=checkarr[0][0]-1 checkarr[0][1]=checkarr[0][1]-1 checkarr[1][1]=checkarr[1][1]-2 checkarr[2][0]=checkarr[2][0]-1 checkarr[2][1]=checkarr[2][1]+1 } } function caseFour(checkarr){ if(transformNum%2!==0){ checkarr[0][0]=checkarr[0][0]+2 checkarr[1][0]=checkarr[1][0]+1 checkarr[1][1]=checkarr[1][1]+1 checkarr[3][0]=checkarr[3][0]-1 checkarr[3][1]=checkarr[3][1]+1 }else{ checkarr[0][0]=checkarr[0][0]-2 checkarr[1][0]=checkarr[1][0]-1 checkarr[1][1]=checkarr[1][1]-1 checkarr[3][0]=checkarr[3][0]+1 checkarr[3][1]=checkarr[3][1]-1 } } function caseFive(checkarr){ switch(transformNum){ case 0: checkarr[0][0]=checkarr[0][0]+1 checkarr[0][1]=checkarr[0][1]-1 checkarr[1][0]=checkarr[1][0]-1 checkarr[1][1]=checkarr[1][1]-1 checkarr[3][0]=checkarr[3][0]+1 checkarr[3][1]=checkarr[3][1]+1 break; case 1: checkarr[0][0]=checkarr[0][0]+1 checkarr[0][1]=checkarr[0][1]+1 checkarr[1][0]=checkarr[1][0]+1 checkarr[1][1]=checkarr[1][1]-1 checkarr[3][0]=checkarr[3][0]-1 checkarr[3][1]=checkarr[3][1]+1 break; case 2: checkarr[0][0]=checkarr[0][0]-1 checkarr[0][1]=checkarr[0][1]+1 checkarr[1][0]=checkarr[1][0]+1 checkarr[1][1]=checkarr[1][1]+1 checkarr[3][0]=checkarr[3][0]-1 checkarr[3][1]=checkarr[3][1]-1 break; case 3: checkarr[0][0]=checkarr[0][0]-1 checkarr[0][1]=checkarr[0][1]-1 checkarr[1][0]=checkarr[1][0]-1 checkarr[1][1]=checkarr[1][1]+1 checkarr[3][0]=checkarr[3][0]+1 checkarr[3][1]=checkarr[3][1]-1 break; } } function caseSix(checkarr){ return } function caseSeven(checkarr){ if(transformNum%2!==0){ checkarr[0][0]=checkarr[0][0]+2 checkarr[0][1]=checkarr[0][1]-2 checkarr[1][0]=checkarr[1][0]+1 checkarr[1][1]=checkarr[1][1]-1 checkarr[3][0]=checkarr[3][0]-1 checkarr[3][1]=checkarr[3][1]+1 }else{ checkarr[0][0]=checkarr[0][0]-2 checkarr[0][1]=checkarr[0][1]+2 checkarr[1][0]=checkarr[1][0]-1 checkarr[1][1]=checkarr[1][1]+1 checkarr[3][0]=checkarr[3][0]+1 checkarr[3][1]=checkarr[3][1]-1 } } function setTimer(speed) { clearInterval(timer) timer = setInterval(()=>{ move('down') if(restartFlag){ newBlock() } },speed) } function newBlock(){ restartFlag = false curGraphPositionList = randomRectShape() drawGraph(curGraphPositionList) let overflag = checkOver(curGraphPositionList) if(overflag){ return } setTimer(speed) } function start() { newBlock() } function over() { clearInterval(timer) } start() let pauseFlag = false document.addEventListener('keydown',(event)=>{ if(event.keyCode===37){ move('left') }else if(event.keyCode===39){ move('right') }else if(event.keyCode===40){ speed=30 setTimer(speed) }else if(event.keyCode===32){ pauseFlag = !pauseFlag if(pauseFlag){ over() }else{ setTimer(speed) } }else if(event.keyCode===38){ // clearGraph(curGraphPositionList) transform (curtype) } }) document.addEventListener('keyup',(event)=>{ if(event.keyCode===40){ speed=1000 setTimer(speed) } }) </script> </html>
更多有趣的经典小游戏实现专题,分享给大家:
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
javascript经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,canvas,俄罗斯方块
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无js canvas实现俄罗斯方块的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?