javascript+html做一个俄罗斯方块的小游戏

本来写了上篇的，可是写得不太好，而且方块的左右移动那里还有bug，索性把上篇删了，只用一篇来说。

效果图

不要用IE浏览器打开，不然会变成......

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>俄罗斯方块</title>
</head><style type="text/css">body {font-family: monospace;}.center {position: absolute;left: 50%;width: 800px;margin-left: -200px;}
</style><body><h1 id="scene" class="center" style="line-height:100%"></h1><div style="float:left"><h2 id="msg">score:0</h2><h2 id="nextBlocks" style="line-height:100%"></h2><button id="btn" type="button">开始游戏</button></div><script>var KEY_UP = 38;           //上箭头var KEY_DOWN = 40;            //下箭头var KEY_LEFT = 37;            //左箭头var KEY_RIGHT = 39;           //右箭头var KEY_SPACE = 32;           //空格键var BLOCK_SOLID = "█";      //实心方块var BLOCK_HOLLOW = "□";        //空心方块var BLOCK_TYPE_NUM = 7;      //方块的种类var width = 10;             //宽var height = 20;            //高var scene = new Array();    //场景var sleepTime = 400;       //延时时间var blocks;                   //方块var score = 0;             //分数var highestScore = 0;      //最高分var nextBlocksType;            //下一个方块的种类var isGameOver = true;       //游戏是否已经结束var interval;             //定时器document.onkeydown = onKeyDown;//按键监听function onKeyDown(e) {if (isGameOver) return;switch (e.which) {case KEY_LEFT://向左移动moveBlocks(-1);break;case KEY_RIGHT://向右移动moveBlocks(1);break;case KEY_DOWN://跳到底部skipToBottom();break;case KEY_UP://旋转方块rotateBlocks();break;case KEY_SPACE://加速移动drop();break;}printScene();}//按钮function onBtnClick() {isGameOver = false;document.getElementById("btn").disabled = true;//打开方块下落的定时器interval = window.setInterval(function () { drapBlock() }, sleepTime);getNextBlocksType();produceBlocks();printMsg("score:0");init();}//初始化function init() {initScene();drawFrame();printScene();}//产生方块function produceBlocks() {blocks = getBlocksByType(nextBlocksType);getNextBlocksType();printNextBlocks();}//随机获取下一次的方块function getNextBlocksType() {do {nextBlocksType = Math.round(Math.random() * BLOCK_TYPE_NUM);} while (nextBlocksType == 0);nextBlocksType--;}//获取指定类型的方块function getBlocksByType(type) {var tBlocks = new Object();tBlocks.x = new Array();tBlocks.y = new Array();switch (type) {case 0:   //Tfor (var i = 0; i < 3; i++) {tBlocks.x[i] = width / 2 + i - 1;tBlocks.y[i] = -1;}tBlocks.x[3] = width / 2;tBlocks.y[3] = -2;tBlocks.center = 1;break;case 1: //Ifor (var i = 0; i <= 3; i++) {tBlocks.x[i] = width / 2 - i + 1;tBlocks.y[i] = -1;}tBlocks.center = 1;break;case 2:    //Ofor (var i = 0; i < 4; i++) {tBlocks.x[i] = width / 2 + i % 2 - 1;tBlocks.y[i] = -2 + parseInt(i / 2);}tBlocks.center = -1;break;case 3:  //LtBlocks.x[0] = width / 2 - 1;tBlocks.y[0] = -2;for (var i = 1; i < 4; i++) {tBlocks.x[i] = width / 2 + i - 2;tBlocks.y[i] = -1;}tBlocks.center = 2;break;case 4: //JtBlocks.x[0] = width / 2 + 1;tBlocks.y[0] = -2;for (var i = 1; i < 4; i++) {tBlocks.x[i] = width / 2 + i - 2;tBlocks.y[i] = -1;}tBlocks.center = 2;break;case 5:    //ZtBlocks.x[0] = width / 2 - 1;tBlocks.y[0] = -2;tBlocks.x[1] = width / 2;tBlocks.y[1] = -2;tBlocks.x[2] = width / 2;tBlocks.y[2] = -1;tBlocks.x[3] = width / 2 + 1;tBlocks.y[3] = -1;tBlocks.center = 1;break;case 6:   //StBlocks.x[0] = width / 2;tBlocks.y[0] = -2;tBlocks.x[1] = width / 2 + 1;tBlocks.y[1] = -2;tBlocks.x[2] = width / 2 - 1;tBlocks.y[2] = -1;tBlocks.x[3] = width / 2;tBlocks.y[3] = -1;tBlocks.center = 0;break;}return tBlocks;}//初始化屏幕数组function initScene() {for (var i = 0; i < height + 2; i++) {scene[i] = new Array();for (var j = 0; j < width + 2; j++) {scene[i][j] = BLOCK_HOLLOW;}}}//在指定位置画点function drawPointAt(x, y) {drawChAt(x, y, BLOCK_SOLID);}//清除指定位置的点function clearPointAt(x, y) {drawChAt(x, y, BLOCK_HOLLOW);}//在指定位置是否是实心方块function isSolidAt(x, y) {return getChAt(x, y) == BLOCK_SOLID;}//在指定位置画字符function drawChAt(x, y, s) {scene[y + 1][x + 1] = s;}//获取指定位置的字符function getChAt(x, y) {return scene[y + 1][x + 1];}//画边框function drawFrame() {for (var i = 0; i < width; i++) {drawChAt(i, -1, "─");drawChAt(i, height, "─");}for (var i = 0; i < height; i++) {drawChAt(-1, i, "│");drawChAt(width, i, "│");}drawChAt(-1, height, "└");drawChAt(width, height, "┘");drawChAt(-1, -1, "┌");drawChAt(width, -1, "┐");}//绘制场景function printScene() {var str = "";for (var i = 0; i < height + 2; i++) {for (var j = 0; j < width + 2; j++) {if (i > 0) {var k;if (blocks != undefined) {for (k = 0; k < blocks.x.length; k++) {if (i == blocks.y[k] + 1 && j == blocks.x[k] + 1) break;}}if (blocks != undefined && k != blocks.x.length) {str += BLOCK_SOLID;} else {str += scene[i][j];}} else {str += scene[i][j];}}str += "<br/>";}document.getElementById("scene").innerHTML = str;}//方块下落function drapBlock() {if (isBump(0, 1)) fixBlocks();drop();}//左右移动方块,-1向左移，1向右移function moveBlocks(dir) {if (!isBump(dir, 0))move(dir);printScene();}//移动方块function move(dir) {for (var i = 0, count = blocks.x.length; i < count; i++) {blocks.x[i] += dir;}}//方块跳到底部function skipToBottom() {while (drop()) { }fixBlocks();}//方块下落function drop() {if (isBump(0, 1)) return false;for (var i = 0, count = blocks.x.length; i < count; i++) {blocks.y[i]++;}printScene();return true;}//旋转方块function rotateBlocks() {if (blocks.center == -1) return;    //不能旋转的方块rotate(1);//检测到碰撞，返回原来的位置if (isBump(0, 0)) rotate(-1);  //反向旋转，即返回原来的位置printScene();}//旋转, 1顺时针，-1逆时针function rotate(dir) {var cX = blocks.x[blocks.center];var cY = blocks.y[blocks.center];for (var i = 0, count = blocks.x.length; i < count; i++) {var xt = blocks.x[i];if (dir == 1) {blocks.x[i] = cX + cY - blocks.y[i];blocks.y[i] = xt - cX + cY;} else {blocks.x[i] = cX - cY + blocks.y[i];blocks.y[i] = cX + cY - xt;}}}//固定方块function fixBlocks() {for (var i = 0, count = blocks.x.length; i < count; i++) {if (blocks.y[i] < 0) {    //游戏结束gameOver();return;}drawPointAt(blocks.x[i], blocks.y[i]);}produceBlocks();elimLine();}//消除方块检测，有填满一行的就消去function elimLine() {for (var y = 0; y < height; y++) {var x;for (x = 0; x < width; x++) {if (getChAt(x, y) != BLOCK_SOLID) break;}if (x == width) {clearLine(y);score++;}}printMsg("score:" + score);}//消除一行function clearLine(y) {for (; y > 1; y--) {for (var x = 0; x < width; x++) {drawChAt(x, y, getChAt(x, y - 1));drawChAt(x, y - 1, BLOCK_HOLLOW);}}}//输出信息function printMsg(s) {document.getElementById("msg").innerHTML = s;}//显示下一个方块function printNextBlocks() {var tBlocks = getBlocksByType(nextBlocksType);var str = "";for (var i = 0; i < 4; i++) {for (var j = 0; j < 4; j++) {var k;var count = tBlocks.x.length;for (k = 0; k < count; k++) {if (i == tBlocks.y[k] + 3 && j == tBlocks.x[k] - width / 2 + 2) break;}if (k == count) str += " ";else str += BLOCK_SOLID;}str += "<br/>";}document.getElementById("nextBlocks").innerHTML = str;}//是否有碰撞, dx和dy为偏移量function isBump(dx, dy) {var i;var count = blocks.x.length;for (i = 0; i < count; i++) {if (blocks.x[i] + dx < 0 || blocks.x[i] + dx >= width ||blocks.y[i] + dy >= height ||isSolidAt(blocks.x[i] + dx, blocks.y[i] + dy))return true;}return false;}//游戏结束function gameOver() {if (highestScore < score) highestScore = score;printMsg("score:" + score + "<br/>highestScore:" + highestScore + "<br/>GameOver");isGameOver = true;score = 0;document.getElementById("btn").disabled = false;window.clearInterval(interval);}document.getElementById("btn").onclick = onBtnClick;window.onload = () => init();</script>
</body></html>

方块的种类:

方块的旋转

流程图

javascript+html做一个俄罗斯方块的小游戏相关推荐

用 typescript 做一个贪吃蛇小游戏
typescript 做一个贪吃蛇小游戏搭建环境创建 tscofig.json 文件配置如下 {"compilerOptions": {"target": ...
利用pgzero做一个接球的小游戏
利用pgzero做一个接球的小游戏说明 pgzero为python的一个用于游戏制作的库,它基于pygame模块可用如下命令去安装 pip install pygame pip install p ...
用Python代码做一个简单数字小游戏
#作者是一个十三岁的小男孩. 编辑工具电脑Python 需要模块 random #今日用代码做一个猜数小游戏 #话不多说,上代码!!! import random number = random.r ...
Easyx图形库+C++做一个贪吃蛇小游戏数据结构课程设计
Easyx图形库+C++做一个贪吃蛇小游戏数据结构课程设计程序界面 ① 游戏开始界面(如下图): 显示游戏标题,提供"开始游戏"."游戏模式"和" ...
html做的小游戏,用Html做一个“快乐鸟”小游戏
入门学习前端的时候做了这么一个简单的小游戏,为了将自己所学到的知识运用起来. 这里可以看出还是有BUG的,死亡动画不是在死亡的瞬间触发做这个小游戏用到了: html css jQuery 然后这个小 ...
android做一个坦克大战小游戏_一个 ECharts 做的猜数小游戏
大概 1 年多之前,一位老同学找到我,问能不能帮他做一个非常简单的猜数字游戏,需求是这样的: 在 1 到 100 的整数里,随机选一个数字,让小朋友们猜: 如果猜错了,告知小朋友猜大了还是猜小了: 如 ...
【Python】使用Pygame做一个Flappy bird小游戏（二）
需要图片素材,音乐素材的朋友可以到我公众号[拇指笔记]后台回复"FPB"自取做一个Flappy bird游戏的第二步就是按键检测.Flappy bird只需要用一个按键控制小鸟的 ...
【原生JS】做一个打字消除小游戏，学习摸鱼两不误
JS打字消除小游戏话不多说先看效果! 页面布局: CSS样式: JS文件(重点): 话不多说先看效果! JS打字消除游戏页面布局: <!DOCTYPE html> <html&g ...
用Python做一个高山滑雪小游戏
介绍一款好玩的游戏的开发.该游戏名为高山滑雪,改编自<Computer Programming for Kids and other Beginners>的第25章. 游戏效果游戏的基本 ...

javascript+html做一个俄罗斯方块的小游戏

javascript+html做一个俄罗斯方块的小游戏相关推荐

最新文章

热门文章