俄罗斯方块学习

Html

Css

body {
	position:absolute;
	margin:0;
	padding:10px;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
}
#tetrisMap {
	background-color:rgb(175,179,179);
	position:absolute;
	left:calc(50% - 300px);
}
#previewEntity {
	background-color:rgb(175,179,179);
	position:absolute;
	left:calc(25% - (150px ));
}

var canvas = document.getElementById('tetrisMap') // 俄罗斯方块地图
 var previewEntityCanvas = document.getElementById('previewEntity') // 预览俄罗斯方块
 var ctx = canvas.getContext('2d')
 var previewCtx = previewEntityCanvas.getContext('2d')

// 实体方块
 var entityDiamonds = {
     longEst: function() {
         var nums = this.Nums
         var strNums = nums.join('')
         var max = 1
         var maxIndex = 1
         for (var i = 0; i < 3; i++) {
             let k = strNums.substring(i * 3, (i * 3) + 3)
             let k1 = k.indexOf('1')
             let k2 = k.lastIndexOf('1')
             if (k2 - k1 >= 2) {
                 this.widthLong = 3
                 this.maxIndex = maxIndex = 3
                 return 3
             }
             max = k1 < 0 ? max : Math.max(max, ((k2 - k1) + 1))
             maxIndex = Math.max(maxIndex, k2 + 1)
         }
         this.maxIndex = maxIndex
         this.widthLong = max
     },
     setNums: function(nums) {
         this.Nums = nums
     },
     // 旋转
     rotateEntity: function() {
         var nums = this.Nums
         const oneSegmen = [0, 0, 2, 8, 6, 0]
         const towSegmen = [1, 1, 5, 7, 3, 0]
         for (var i = 0; i < 4; i++) {
             var temp = nums[oneSegmen[i]]
             nums[oneSegmen[i]] = nums[oneSegmen[i + 1]]
             nums[oneSegmen[i + 1]] = temp

var temp1 = nums[towSegmen[i]]
             nums[towSegmen[i]] = nums[towSegmen[i + 1]]
             nums[towSegmen[i + 1]] = temp1
         }
     }
 }

// 创建实体
 var tiEntity = Object.create(entityDiamonds)
 tiEntity.setNumsTask = function(nums) {
     this.setNums(nums)
 }

// 数组
 var nums = [0, 1, 0, 0, 1, 0, 0, 1, 1]
 tiEntity.setNums(nums)

function init() {

var leftOrRight = 6
     var i = 0

// [number] average = 15 // 将该正方体分成多少等分
     // [number] paddSpace = 10 // 绘制上下文的内边距
     // [Canvas Object] context 绘制的2d上下文
     // [numver] width 所要绘制的canvas宽度
     var drawMap = (function(average = 0, paddSpace = 0, context, width) {
         context.beginPath()
         const widthOrHeight = width // 该正方体的宽度及高度
         const everySpace = (widthOrHeight - paddSpace * 2) / average // 得到每等分之间的距离

for (var i = 0; i <= average; i++) {
             context.moveTo(paddSpace, i * everySpace + paddSpace)
             context.lineTo(widthOrHeight - paddSpace, i * everySpace + paddSpace);

context.moveTo(i * everySpace + paddSpace, paddSpace)
             context.lineTo(i * everySpace + paddSpace, widthOrHeight - paddSpace);
         }
         context.closePath();
         context.stroke();

// 将该属性绑定至实体上下文当中
         context.entityInfo = {
             average: average,
             paddSpace: paddSpace,
             width: width,
             everySpace: everySpace
         }
     })

// 绘制方块
     var drawEntity = (function(nums, context, startSpace = 0, isStart = true, startSpaceY = 0) {
         var entityInfo = context.entityInfo
         if (entityInfo.average > 3 && isStart) startSpace = entityInfo.everySpace * ((entityInfo.average - 3) / 2)
         startSpaceY = entityInfo.everySpace * startSpaceY
         var min = entityInfo.paddSpace
         var max = 15 * entityInfo.everySpace

for (var i = 0, j = nums.length; i < j; i++) {
             if (nums[i] != 0) {
                 var iSpace = Math.floor(i / 3)

context.fillStyle = 'black'
                 let circleX = startSpace + (i * entityInfo.everySpace + entityInfo.paddSpace) - ((iSpace * 3) * entityInfo.everySpace)
                 let circleY = startSpaceY + entityInfo.paddSpace + iSpace * entityInfo.everySpace

if (circleX < min) circleX = min
                 if (circleX >= max) circleX = max

context.fillRect(circleX, circleY, entityInfo.everySpace, entityInfo.everySpace);
                 context.fill();

// context.font = '48px serif';
                 // context.fillStyle = 'red'
                 // context.fillText(nums[i], circleX + entityInfo.everySpace / 4, circleY + entityInfo.everySpace);

}
         }
     })

// 每次移动的位置
     var leftPage = (function() {
         var widthLong = tiEntity.widthLong
         var maxIndex = tiEntity.maxIndex
         var changeLong1 = (15 - widthLong)
         var changeLong2 = (3 - widthLong)

if (widthLong >= 3) {
             if (leftOrRight >= 12) {
                 leftOrRight = 12
             }
             if (leftOrRight <= 0) {
                 leftOrRight = 0
             }
         }

if (widthLong == 2 && maxIndex == 3) {
             if (leftOrRight >= 12) {
                 leftOrRight = 12
             }
             if (leftOrRight < -1) {
                 leftOrRight = -1
             }
         }

if (widthLong == 2 && maxIndex == 2) {
             if (leftOrRight >= 13) {
                 leftOrRight = 13
             }
             if (leftOrRight <= 0) {
                 leftOrRight = 0
             }
         }

if (widthLong == 1 && maxIndex == 0) {
             if (leftOrRight >= 14) {
                 leftOrRight = 14
             }
         }

if (widthLong == 1 && maxIndex == 2) {
             if (leftOrRight >= 13) {
                 leftOrRight = 13
             }
             if (leftOrRight <= -1) {
                 leftOrRight = -1
             }
         }

if (widthLong == 1 && maxIndex == 3) {
             if (leftOrRight >= 12) {
                 leftOrRight = 12
             }
             if (leftOrRight <= -1) {
                 leftOrRight = -1
             }
         }
     })

// 清空画板
     var clearCanvas = (function(context) {
         context.height = context.height
     })

document.onkeydown = function(e) {
         // console.log(leftOrRight)
         tiEntity.longEst()
         if (e.keyCode === 32) {
             tiEntity.rotateEntity()
         } else if (e.keyCode === 39) {
             leftOrRight++
         } else if (e.keyCode === 40) {

} else if (e.keyCode === 37) {
             leftOrRight--
         }
     }

let oldTime = new Date()

// 绘制
     function timeLoad() {
         let newTime = new Date()
         let t = newTime - oldTime
         if (t > 1000) {
             i++
             oldTime = newTime
         }
         if (i > 12) i = 0
         leftPage()
         animation()
         requestAnimationFrame(timeLoad)
     }

// 每次绘制渲染
     function animation() {
         clearCanvas(previewEntityCanvas)
         drawMap(3, 10, previewCtx, previewEntityCanvas.width) // 绘制预览
         drawMap(15, 10, ctx, canvas.width) // 绘制游戏地图
         drawEntity(tiEntity.Nums, previewCtx)

clearCanvas(canvas)
         drawEntity(tiEntity.Nums, ctx, leftOrRight * (580 / 15), false, i) // 设置每一次的位置
         drawMap(15, 10, ctx, canvas.width) // 绘制游戏地图
     }

drawMap(15, 10, ctx, canvas.width) // 绘制游戏地图
     drawMap(3, 10, previewCtx, previewEntityCanvas.width) // 绘制预览

drawEntity(tiEntity.Nums, previewCtx)
     drawEntity(tiEntity.Nums, ctx)

timeLoad()
 }

init()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

俄罗斯方块学习



代码描述：里面有很多可以学习的点，代码有注释通俗易懂，技术栈非常基础可供学习使用，代码非常易懂，以面向委托设计模式编写拓展强，

更新时间：2020-07-27 01:06:56
代码非常易懂，以面向委托设计模式编写拓展强，可供学习，达到十个喜欢更新完善所有的玩法

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

010

相关代码

俄罗斯方块学习

最新