HTML5 实现的一个俄罗斯方块实例代码
网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要介绍了HTML5 实现的一个俄罗斯方块实例代码的相关资料,需要的朋友可以参考下
示例简单，运行地址为http://chendd./demo/html/canvas/elsfk.html，得需要支持html5浏览器的环境。
实现的功能方块旋转（W键）、自动下落、移动（ASD）、消行、快速下落（空格键）、下落阴影、游戏结束。
为实现功能消行时的计分、等级、以及不同等级的下落速度等。
学习了xiaoE的Java版本的俄罗斯方块后，自己动手使用html5的canvas实现的，
参考效果图如下
详细代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>俄罗斯方块</title>
<style type="text/css">
/整个画布/
#tetris {
border: 6px solid grey;
}
/游戏面板/
</style>
</head>
<body>
<canvas id="tetris" width="565" height="576"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("tetris");
var context = canvas.getContext("2d");
var padding = 6,
size = 32,
minX = 0,
maxX = 10,
minY = 0,
maxY = 18,
score = 0,
level = 1;
var gameMap = new Array(); //游戏地图，二维数组
var gameTimer;
initGameMap();
//绘制垂直线条
drawGrid();
var arrays = basicBlockType();
var blockIndex = getRandomIndex();
//随机画一个方块意思意思
var block = getPointByCode(blockIndex);
context.fillStyle = getBlockColorByIndex(blockIndex);
drawBlock(block);
/
初始化游戏地图
/
function initGameMap() {
for (var i = 0; i < maxY; i++) {
var row = new Array();
for (var j = 0; j < maxX; j++) {
row[j] = false;
}
gameMap[i] = row;
}
}
/
方块旋转
顺时针
A.x =O.y + O.x - B.y
A.y =O.y - O.x + B.x
/
function round() {
//正方形的方块不响应旋转
if (blockIndex == 4) {
return;
}
//循环处理当前的方块，找新的旋转点
for (var i = 1; i < block.length; i++) {
var o = block[0];
var point = block[i];
//旋转后的位置不能与现有格子的方块冲突
var tempX = o.y + o.x - point.y;
var tempY = o.y - o.x + point.x;
if (isOverZone(tempX, tempY)) {
return; //不可旋转
}
}
clearBlock();
//可以旋转，设置新的旋转后的坐标
for (var i = 1; i < block.length; i++) {
var o = block[0];
var point = block[i];
//旋转后的位置不能与现有格子的方块冲突
var tempX = o.y + o.x - point.y;
var tempY = o.y - o.x + point.x;
block[i] = {
x: tempX,
y: tempY
};
}
drawBlock();
}
function moveDown() {
var overFlag = canOver();
if(overFlag){
//如果不能向下移动了，将当前的方块坐标载入地图
window.clearInterval(gameTimer);
add2GameMap();
//清除游戏区域内的不同颜色的格子，使用单一颜色重新绘制地图堆积物
redrawGameMap();
return;//游戏结束
}
var flag = moveTo(0, 1);
//如果可以移动，则继续移动
if (flag) {
return;
}
//如果不能向下移动了，将当前的方块坐标载入地图
add2GameMap();
//进行消行动作
clearLines();
//清除游戏区域内的不同颜色的格子，使用单一颜色重新绘制地图堆积物
redrawGameMap();
//如果不能向下移动，则继续下一个方块
nextBlock();
}
/
消行动作，返回消除的行数
/
function clearLines() {
var clearRowList = new Array();
for (var i = 0; i < maxY; i++) {
var flag = true;
for (var j = 0; j < maxX; j++) {
if (gameMap[i][j] == false) {
flag = false;
break;
}
}
if (flag) {
clearRowList.push(i); //记录消除行号的索引
}
}
var clearRows = clearRowList.length;
//所谓的消行就是将待消除行的索引，下方所有的格子上移动
for (var x = 0; x < clearRows; x++) {
var index = clearRowList[x];
for (var i = index; i > 0; i--) {
for (var j = 0; j < maxX; j++) {
gameMap[i][j] = gameMap[i - 1][j];
}
}
}
if (clearRows > 0) {
for (var i = 0; i < maxY; i++) {
//此处可以限制满足相关条件的方块进行清除操作&& j < clearRowList[clearRows - 1]
for (var j = 0; j < maxX; j++) {
if (gameMap[i][j] == false) {
clearBlockByPoint(i, j);
}
}
}
}
}
/
重绘游戏地图
/
function redrawGameMap() {
drawGrid();
for (var i = 0; i < maxY; i++) {
for (var j = 0; j < maxX; j++) {
if (gameMap[i][j]) {
roadBlock(j, i);
}
}
}
}
/
打印阴影地图
/
function drawShadowBlock() {
var currentBlock = block;
var shadowPoints = getCanMoveDown();
if (shadowPoints != null && shadowPoints.length > 0) {
for (var i = 0; i < shadowPoints.length; i++) {
var point = shadowPoints[i];
if (point == null) {
continue;
}
var start = point.x size;
var end = point.y size;
context.fillStyle = "#abcdef";
context.fillRect(start, end, size, size);
context.strokeStyle = "black";
context.strokeRect(start, end, size, size);
}
}
}
/
返回最多可移动到的坐标位置（统计总共可以下落多少步骤）
@return最多可移动到的坐标位置
/
function getCanMoveDown() {
var nps = canMove(0, 1, block);
var last = null;
if (nps != null) {
last = new Array();
while ((nps = canMove(0, 1, nps)) != null) {
if (nps != null) {
last = nps;
}
}
}
return last;
}
function canOver(){
var flag = false;
for (var i = 0; i < block.length; i++) {
var point = block[i];
var x = point.x;
var y = point.y;
if(isOverZone(x , y)){
flag = true;
break;
}
}
return flag;
}
function drawLevelScore() {
}
/
将不能移动的各种填充至地图
/
function add2GameMap() {
for (var i = 0; i < block.length; i++) {
var point = block[i];
var x = point.x;
var y = point.y;
var gameMapRow = gameMap[y]; //获取到地图的一行
gameMapRow[x] = true; //将此行中的某个格子标记为堆积物
gameMap[y] = gameMapRow; //再将行给设置回来
}
}
function moveLeft() {
moveTo(-1, 0);
}
function moveRight() {
moveTo(1, 0);
}
function quickDown() {
while (moveTo(0, 1));
}
function moveTo(moveX, moveY) {
var move = canMove(moveX, moveY, block); //判定是否可以移动
if (move == null) {
return false;
}
clearBlock();
for (var i = 0; i < block.length; i++) {
var point = block[i];
point.x = point.x + moveX;
point.y = point.y + moveY;
}
drawBlock();
return true;
}
/
下一个方块
/
function nextBlock() {
blockIndex = getRandomIndex();
block = getPointByCode(blockIndex);
context.fillStyle = getBlockColorByIndex(blockIndex);
drawBlock();
}
document.onkeypress = function(evt) {
var key = window.event ? evt.keyCode : evt.which;
switch (key) {
case 119: //向上旋转 W
round();
break;
case 115: //向下移动 S
moveDown();
break;
case 97: //向左移动 A
moveLeft();
break;
case 100: //向右移动 D
moveRight();
break;
case 32: //空格键快速下落到底
quickDown();
break;
}
}
/
判定是否可以移动
@parammoveX 横向移动的个数
@parammoveY 纵向移动的个数
/
function canMove(moveX, moveY, currentBlock) {
var flag = true;
var newPoints = new Array();
for (var i = 0; i < currentBlock.length; i++) {
var point = currentBlock[i];
var tempX = point.x + moveX;
var tempY = point.y + moveY;
if (isOverZone(tempX, tempY)) {
flag = false;
break;
}
}
if (flag) {
for (var i = 0; i < currentBlock.length; i++) {
var point = currentBlock[i];
var tempX = point.x + moveX;
var tempY = point.y + moveY;
newPoints[i] = {
x: tempX,
y: tempY
};
}
return newPoints;
}
return null;
}
/
判定是否可以移动
@paramx 预移动后的横坐标
@paramy 预移动后的纵坐标
/
function isOverZone(x, y) {
return x < minX || x >= maxX || y < minY || y >= maxY || gameMap[y][x];
}
document.body.click();
gameTimer = window.setInterval(moveDown , 800);
/
初始化方块的基础数据
/
function basicBlockType() {
var arrays = new Array();
arrays[0] = [{
x: 4,
y: 0
}, {
x: 3,
y: 0
}, {
x: 5,
y: 0
}, {
x: 6,
y: 0
}];
arrays[1] = [{
x: 4,
y: 0
}, {
x: 3,
y: 0
}, {
x: 5,
y: 0
}, {
x: 4,
y: 1
}];
arrays[2] = [{
x: 4,
y: 0
}, {
x: 3,
y: 0
}, {
x: 5,
y: 0
}, {
x: 3,
y: 1
}];
arrays[3] = [{
x: 4,
y: 0
}, {
x: 5,
y: 0
}, {
x: 3,
y: 1
}, {
x: 4,
y: 1
}];
arrays[4] = [{
x: 4,
y: 0
}, {
x: 5,
y: 0
}, {
x: 4,
y: 1
}, {
x: 5,
y: 1
}];
arrays[5] = [{
x: 4,
y: 0
}, {
x: 3,
y: 0
}, {
x: 5,
y: 0
}, {
x: 5,
y: 1
}];
arrays[6] = [{
x: 4,
y: 0
}, {
x: 3,
y: 0
}, {
x: 4,
y: 1
}, {
x: 5,
y: 1
}];
return arrays;
}
function basicBlockColor() {
return ["#A00000", "#A05000", "#A0A000", "#00A000", "#00A0A0", "#0000A0", "#A000A0"];
}
function getBlockColorByIndex(typeCodeIndex) {
var arrays = basicBlockColor();
return arrays[typeCodeIndex];
}
/
根据编号返回指定编号的方块
@paramtypeCodeIndex 方块编号索引
/
function getPointByCode(typeCodeIndex) {
var arrays = basicBlockType();
return arrays[typeCodeIndex];
}
/
获取随即出现方块的范围值
@paramlens 随机数的范围
/
function getRandomIndex() {
return parseInt(Math.random() (arrays.length - 1), 10);
}
/
绘制方块，按格子单个绘制
/
function drawBlock() {
drawGrid();
for (var i = 0; i < block.length; i++) {
var point = block[i];
var start = point.x size;
var end = point.y size;
context.fillStyle = getBlockColorByIndex(blockIndex);
context.fillRect(start, end, size, size);
context.strokeStyle = "black";
context.strokeRect(start, end, size, size);
}
drawShadowBlock();
}
/
绘制障碍物
/
function roadBlock(x, y) {
context.fillStyle = "darkgray";
var start = x size;
var end = y size;
context.fillRect(start, end, size, size);
}
/
绘制新的方块先清除之前的方块
/
function clearBlock() {
for (var i = 0; i < block.length; i++) {
var point = block[i];
var start = point.x size;
var end = point.y size;
context.clearRect(start, end, size, size);
}
}
/
初始化一个新的行
/
function initGameMapRow() {
var array = new Array();
for (var i = 0; i < maxX; i++) {
array[i] = false;
}
return array;
}
/
根据坐标清除指定格子的内容
@paramx 横坐标
@paramy 纵坐标
/
function clearBlockByPoint(x, y) {
var start = y size;
var end = x size;
context.clearRect(start, end, size, size);
}
/
清掉所有位置的空白格的绘图
/
function clearAllNullPoint() {
for (var i = 0; i < maxY; i++) {
for (var j = 0; j < maxX; j++) {
if (gameMap[i][j] == false) {
clearBlockByPoint(i, j);
}
}
}
}
/
绘制网格线
@paramcontext 绘图对象
/
function drawGrid() {
clearAllNullPoint(); //清除掉当前方块下落位置造成的阴影
context.strokeStyle = "grey"; //画笔颜色
for (var i = 0; i <= maxX; i++) {
var start = i size;
var end = start + size;
context.beginPath();
context.moveTo(start, 0);
context.lineTo(size i, size maxY);
context.stroke();
context.closePath();
}
//绘制水平线条
for (var i = 0; i <= maxY; i++) {
var start = i size;
var end = start + size;
context.beginPath();
context.moveTo(0, size i);
context.lineTo(size maxX, size i);
context.stroke();
context.closePath();
}
}
</script>
</body>
</html>
以上就是HTML5 实现的一个俄罗斯方块的实例，有兴趣的小伙伴可以参考下，谢谢大家对本站的支持！
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程