js实现俄罗斯方块游戏效果-html代码-BFW代码库

js实现俄罗斯方块游戏效果

代码语言：html

所属分类：游戏

代码描述：js实现俄罗斯方块游戏效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #eee;
}

.block {
  box-sizing: border-box;
  position: absolute;
  transform: scale(0.85);
  border-radius: 6px;
}

.block--test {
  background-color: rgba(152, 152, 152, 0.514);
}

.block--block {
  animation-name: drop;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  background: linear-gradient(#E6DADA, #FFB88C, #FFAFBD, #606c88);
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-attachment: fixed;
}

.block--invalid {
  background-color:  #e538357e;
}

@keyframes drop {
  from {
    transform: translateY(-100vh) scale(0.85);
  }
  to {
    transform: translateY(0) scale(0.85);
  }
}
</style>

</head>
<body translate="no">

<script >
/*
  Automatic and responsive Tetris
  can be made to clear the full lines
  but it's more fun to watch when it doesn't
  control it with the below 3 variables
  Created for my website https://kkmet.com
*/
const blockSize = 35
const stepSpeed = 70
const fallSpeed = 1500
const container = document.body

const viewWidth = window.innerWidth
const viewHeight = window.innerHeight

const xBlockCount = Math.ceil(viewWidth / blockSize)
const yBlockCount = Math.ceil(viewHeight / blockSize)
let currentYIndex = 0

con.........完整代码请登录后点击上方下载按钮下载查看