在之前的两篇文章中,咱们通过介绍 Web 语言的编程软件与繁难的网页编程实例来阐明 HTML/CSS 和 JavaScript 的详情及关系。
如果还未理解过 Web 编程的小伙伴能够先参考前两个文章:
新一代的 HTML+CSS+JavaScript IDE – Lightly
HTML / CSS / JS 编程入门 —— 制作可切换主题的简略网页
这一篇文章将进一步深刻应用 JavaScript 进行编程,从零开始搭建繁难的俄罗斯方块游戏。
点击进入 Lightly 查看残缺代码
目录
- 俄罗斯方块游戏简介
- 俄罗斯方块的游戏元素
- 在 Lightly 进行 HTML 和 CSS 的简要设置
- 应用 JavaScript 实现俄罗斯方块游戏
- 扩大作业
俄罗斯方块简介
俄罗斯方块是一款由苏联软件工程师制作的益智游戏。这款游戏诞生于 1984 年,期间曾被任天堂游戏买下版权,在当年的任系掌机 GameBoy 中风行一时。
俄罗斯方块的游戏逻辑非常简略,只须要将掉落的方块拼凑成残缺的一行后,即可打消得分。随着游戏降级,俄罗斯方块掉落的速度也会逐步减少,晋升游戏难度和趣味性。时至今日,俄罗斯方块仍旧是颇受欢迎的游戏,不同的游戏厂家也将俄罗斯方块开发成合乎现代化审美、具备多人联机的休闲游戏。
俄罗斯方块的游戏元素
在开始编写俄罗斯方块游戏之前,咱们须要理清游戏的元素,以便前期编程参考:
俄罗斯方块的品种
俄罗斯方块依据形态和方向的不同,大抵可分为 7 种方块:
在编写代码时,咱们须要依据方块所占的空间,通过 4×3(I 形方块)、2×2(O 形方块)和 3×3(其余方块)在 JavaScript 中间接绘制。
思考题 – 既然其余方块的高度都只占 2 格,为什么其余方块不是通过 3×2 的占位符绘制?
俄罗斯方块的操作
俄罗斯方块的操作同样非常简略,咱们只须要将方块设定为主动跌落,并在键盘中设置方向键的性能就足以实现游戏。其中,左右键可左右挪动方块,上键可旋转方块,下键可放慢方块的掉落速度。当然,你也能够在按键设置中增加其余性能,例如:应用空格键间接掉落。
HTML 和 CSS 的简要设置
作为轻量且功能强大的集成开发工具,Lightly 同样能胜任编写俄罗斯方块的工作。咱们将应用 Lightly 的 HTML+CSS+JavaScript IDE,逐渐制作并实时检视代码成果,实现俄罗斯方块的开发。
制作俄罗斯方块的重点在于应用 JavaScript 编程,因而俄罗斯方块页面的 HTML 和 CSS 非常简单,只须要短短的几行代码即可。温习一下之前所学过的架构、设计和性能准则,HTML 在这次的代码中仅负责关联和唤起 CSS 及 JavaScript 文本,而 CSS 只须要负责设置背景、画布和按钮的根本设计。
HTML 根本设置
CSS 根本设置
CSS 次要涵盖页面的根本设计,小伙伴可依据本人的爱好,在 Lightly 的 CSS 文件夹中找到 style.css 文件,而后尝试参考 CSS 代码调整字体、色彩、按钮等。
应用 JavaScript 编写俄罗斯方块游戏
实现 HTML 和 CSS 设置后,咱们便能够开始编写 JavaScript 文本。如果没有先对 HTML 和 CSS 进行设置的话,编写 JavaScript 时可能无奈实时看到反馈。因为篇幅限度,JavaScript 代码无奈在网页中齐全展现,小伙伴可间接查看残缺代码进行实操学习:点击进入 Lightly 查看残缺代码
根底设置
在 Lightly 的 js 文件夹中找到 script.js 文件后,首先对非游戏相干的按钮进行设置。例如,设置 HTML 文件中的常数、增加“操作阐明”按钮弹出的模块等。
绘制游戏范畴
咱们的方块将呈现在这个游戏区域内,同时也只能在这个区域内挪动:
function draw() {
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height);
// 高度和宽度曾经在 HTML 文件中设置好了
drawMatrix(arena, {x: 0, y: 0});
drawMatrix(player.matrix, player.pos);
}
绘制方块
在开始绘制方块前,咱们须要先应用矩阵定义咱们的方块主体:
function drawMatrix(matrix, offset) {matrix.forEach((row, y) => {row.forEach((value, x) => {if (value !== 0) {context.fillStyle = colors[value];
context.fillRect(x + offset.x,
y + offset.y,
1, 1);
}
});
});
}
接着咱们能够通过 function 函数,依据占位符绘制出方块的形态:
小伙伴能够尝试动脑筋,画出其余形态的方块。至于为什么其余形态的方块须要用 3×3 的占位符绘制,是因为这些形态须要旋转,必须为它们预留空间。只有将方块占位符反向排列,咱们就能够失去旋转成果:
设置方块掉落程序
俄罗斯方块大概依照每秒一格的速度掉落,咱们将掉落距离设置为 1000 毫秒后,通过 function 开始正计时。每当计时器大于 1000 毫秒后,便会运行 playerDrop() 程序,方块往下掉落一格。
// 设置方块跌落速度
let dropCounter = 0;
let dropInterval = 1000; // 1000 毫秒 = 1 秒,方块每秒掉落一格
let lastTime = 0;
function update(time = 0) {
const deltaTime = time - lastTime;
dropCounter += deltaTime;
if (dropCounter > dropInterval) {playerDrop();
}
lastTime = time;
draw();
requestAnimationFrame(update);
}
设置按键
俄罗斯方块除了会主动掉落外,还须要设置按键让玩家管制方块的挪动、旋转和掉落速度等。在这个局部,咱们能够通过监听键盘按键输出来实现,而后依据相应按键的 KeyCode 来判断玩家按下的按键,最初返回相应的操作。
document.addEventListener('keydown', event => {if (event.keyCode === 37) {playerMove(-1); // 往左挪动
} else if (event.keyCode === 39) {playerMove(1); // 往右挪动
} else if (event.keyCode === 40) {playerDrop(); // 往下挪动
} else if (event.keyCode === 38) {playerRotate(1); // 旋转
}
});
设置得分零碎
最初,咱们设置程序判断方块是否占满一整列,清空残缺列并计入得分:
function arenaSweep() {
let rowCount = 1;
outer: for (let y = arena.length -1; y > 0; --y) {for (let x = 0; x < arena[y].length; ++x) {if (arena[y][x] === 0) {continue outer;}
}
const row = arena.splice(y, 1)[0].fill(0);
arena.unshift(row);
++y;
player.score += rowCount * 10;
rowCount *= 2;
}
}
自此,你曾经把握了制作俄罗斯方块的基本知识,但常识总是须要实际能力加以使用和坚固。你能够抉择间接查看 Lightly 中的残缺代码进行批改,也能够尝试新建我的项目从零开始编写,验收你所学的常识,亲手制作人生中的第一个游戏。
此外,你也能够在俄罗斯方块中增加方块预报、等级等性能,也能够进一步欠缺 CSS 和 JavaScript,让游戏界面和方块变得更好看。