使用js实现“别踩白块儿”游戏

界面如下：

点击”开始游戏“，”白格“将开始向下移动，此后再每一行上开始出现一个“黑格”，对应列上按下对应的键即可消除黑格，但不可跨行消除（即必须先消除”最近“一行上的”黑格“）（如第1列对应“D”键，第2列对应"F“键，第3列对应”J“键，第4列对应”K“键）。当然，除了可以使用键盘按键消除”黑格“外，可以使用鼠标点击除去“黑格”，这时可以跨行。当按错”键“或点击到”白格“或”黑格“触碰到红线时，游戏结束。游戏过程中，左侧将有分数进行计数，每消除一个”黑格“算1分。同时，游戏中有背景音乐播放。

项目目录结构如下：

（raw放置了背景音乐文件，可替换为自己想要的音乐）

程序中考虑到使用响应式布局，适配移动端，但还不够完善。

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>黑白格上的钢琴——经典模式</title><link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><div class="heading"><h1>黑白格上的钢琴</h1><h2>——经典模式</h2><span id="play" class="btns">开始游戏(F2)</span><span id="pause" class="btns">暂停游戏(SPACE)</span><span id="stop" class="btns">停止游戏(F4)</span><p><audio id="bgMusic" src="raw/m01.mp3"></audio></p></div><div class="container"><div class="left"><p>分数：  <span id="grade">0</span></p></div><div class="main"  id="mainID"><div id="row01" class="row"><div class="grid-default"></div><div class="grid-default"></div><div class="grid-default"></div><div class="grid-default"></div></div><div id="row02" class="row"><div class="grid-default"></div><div class="grid-default"></div><div class="grid-default"></div><div class="grid-default"></div></div><div id="row03" class="row"><div class="grid-default"></div><div class="grid-default"></div><div class="grid-default"></div><div class="grid-default"></div></div><div id="row04" class="row"><div class="grid-default"></div><div class="grid-default"></div><div class="grid-default"></div><div class="grid-default"></div></div><div id="row05" class="row"><div class="grid-default"></div><div class="grid-default"></div><div class="grid-default"></div><div class="grid-default"></div></div><div id="row-flag" class="row"></div></div></div><div class="tips"><span class="tips-down">D</span><span class="tips-down">F</span><span class="tips-down">J</span><span class="tips-down">K</span></div><script src="script.js"></script>
</body>
</html>

style.css

* {font-family: "微软雅黑";color: #fff;
}
body {background-color: #000;
}
.heading{width: 450px;margin: 50px auto;
}
h1 {font-size: 40px;
}
h2 {text-align: right;
}
.btns{font-size: 18px;text-align: center;display: inline-block;width: 150px;height: 27px;margin-right: 5px;line-height: 27px;background: darkturquoise;border: 1px solid #eee;border-radius: 7px;padding: 3px;cursor: pointer;
}
#play, #stop {width: 110px;
}.heading span:hover {box-shadow: 0 0 7px 4px #0cc;
}.container {width: 500px;margin: 50px auto;position: relative;
}.left{background-color: #fff;position: absolute;border: 3px solid darkturquoise;border-radius: 10px;
}.left p{font-size: 30px;color: #000;margin-left: 30px;
}#grade {font-size: 50px;color: #000;
}/*响应式布局*/
@media screen and (min-width: 1200px) {.left {width: 300px;height: 540px;left: -350px;top : 0;}
}
@media screen and (max-width: 1200px) {.left {width: 465px;height: 200px;top: -230px;left: 0;}.main {margin-top: 250px;}
}.main {width: 450px;height: 540px;/*margin-left: 150px;*//*background-color: #ccc;*/border: 1px solid darkturquoise;padding: 10px;position: relative;overflow: hidden;
}.grade-div {position: absolute;left: 200px;
}.row {width: 100%;height: 130px;/*border: 1px solid yellow;*/overflow: hidden;position: absolute;
}#row01 {top: -120px;
}
#row02 {top: 10px;
}
#row03 {top: 140px;
}
#row04 {top: 270px;
}
#row05 {top: 400px;
}.grid-default {width: 100px;height: 100%;border: 1px solid #ccc;background-color: #fff;margin: 5px;float: left;
}.row div:hover {box-shadow: 0 0 7px 2px #0cc;
}#row-flag {width: 100%;height: 20px;background: red;top: 540px;left: 0;
}.tips {width: 450px;height: 20px;margin: 0 auto;font-size: 20px;
}.tips-down {line-height: 20px;display: inline-block;width: 100px;text-align: center;
}

script.js

/*** Created by DreamBoy on 2016/1/23.*/var BTN_PLAY_ID = 'play';
var BTN_PAUSE_ID = 'pause';
var BTN_STOP_ID = 'stop';
var MAIN_ID = 'mainID';
var GRADE = 'grade';
var BG_MUSIC = 'bgMusic';var main, allRow, grade, stopFlag = false, bgMusic;
window.onload = function() {main = document.getElementById(MAIN_ID); //黑白格的容器allRow = getAllRow(); //每一行黑白格grade = document.getElementById(GRADE); //当前分数bgMusic = document.getElementById(BG_MUSIC);//开始游戏（点击）var play = document.getElementById(BTN_PLAY_ID);play.onclick = startGame;//暂停游戏（点击）var pause = document.getElementById(BTN_PAUSE_ID);pause.onclick = pauseGame;//停止游戏（点击）var stop = document.getElementById(BTN_STOP_ID);stop.onclick = stopGame;//按键控制document.onkeyup = function(event) {keyPlay(event);};//鼠标控制mousePlay();
};//得到每一行黑白格
function getAllRow() {allRow = [];var row01 = document.getElementById('row01');var row02 = document.getElementById('row02');var row03 = document.getElementById('row03');var row04 = document.getElementById('row04');var row05 = document.getElementById('row05');//allRow[0] 到 allRow[4] ，从界面来看是从下往上的allRow.push(row05);allRow.push(row04);allRow.push(row03);allRow.push(row02);allRow.push(row01);initAllRowInfo();return allRow;
}//初始化allRow数组的信息
function initAllRowInfo() {for(var i = 0; i < allRow.length; i++) {//标识每一行是否有黑格，还有黑格的位置allRow[i].hasBlackGrid = false;allRow[i].blackGridPos = -1;//把现有的黑格变成白格var row = allRow[i].getElementsByTagName('div');for(var j = 0; j < row.length; j++) {row[j].style.background = '#fff';row[j].rowPos = i; //表示在allRow的哪一位置row[j].colPos = j; //表示在该行中的哪个位置}}
}//点击开始游戏
function startGame() {stopFlag = false;main.style.borderTop = 'none';main.style.borderBottom = 'none';initialGame();
}//初始化游戏，包括黑白格
function initialGame() {//移动黑白格rowMove(5,15);
}var timer;
//移动黑白格（lSpeed表示位移速度（定时器每触发黑白格移动的像素），tSpeed表示时间速度（定时器隔多久触发）
function rowMove(lSpeed, tSpeed) {clearInterval(timer);//让每一行黑白格进行定时移动var n = 1; //用于延迟 黑格的加入var hasBlack = false; //游戏中还没有黑格timer = setInterval(function() {var flag = false; //标识该行是否已从上往下移出了容器，如果是，则对allRow中的顺序进行调整for(var i = 0; i < allRow.length; i++) {var obj = allRow[i];isGameOver(obj); //判断游戏是否结束if(obj.offsetTop >= 530) {flag = true; //有行移出了容器，那么该行一定是allRow[0]obj.style.top = -120 + 'px';//将一行白格中的一个变为黑格//延迟时间已到 并且 该行木有黑格if(n > 50 && !obj.hasBlackGrid) {//随机一行中第几个白格变成黑格var k = Math.floor(Math.random() * 4);obj.getElementsByTagName('div')[k].style.background = '#000';obj.hasBlackGrid = true;obj.blackGridPos = k;//游戏中有黑格了hasBlack = true;}}obj.style.top = obj.offsetTop + lSpeed + 'px';}if(!hasBlack) {n++;}//对移出该容器的行在allRow中的顺序进行调整，移出容器的行移动到allRow的尾部if(flag) {var tempRow01 = allRow[0];allRow.shift(); //删除数组的第一个元素allRow.push(tempRow01); //将原来位置第一的元素加入到数组的尾部/*//修改每个格子所在的行号for(var i = 0; i < allRow.length; i++) {var row = allRow[i].getElementsByTagName('div');for(var j = 0; j < row; j++) {row[j].rowPos = i;}}*/}}, tSpeed);
}//暂停游戏
function pauseGame() {clearInterval(timer);stopFlag = true;if(bgMusic.play) {bgMusic.pause();}
}//停止游戏
function stopGame() {//初始化分数grade.innerHTML = '0';//停止移动clearInterval(timer);stopFlag = true;main.style.borderTop = '1px solid darkturquoise';main.style.borderBottom = '1px solid darkturquoise';//每一行的位置初始化allRow[0].style.top = 400 + 'px';allRow[1].style.top = 270 + 'px';allRow[2].style.top = 140 + 'px';allRow[3].style.top = 10 + 'px';allRow[4].style.top = -120 + 'px';initAllRowInfo();
}//键盘控制
function keyPlay(event) {event = event || window.event;event.preventDefault ? event.preventDefault() : event.returnValue = false;event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;//console.log(event.keyCode);if(event.keyCode == 113) { //用户按下F2，开始游戏startGame();} else if(event.keyCode == 32) { //用户按下空格键，暂停游戏pauseGame();} else if(event.keyCode == 115) { //用户按下F4，停止游戏stopGame();} else if(event.keyCode == 68 || event.keyCode == 70 || event.keyCode == 74 || event.keyCode == 75) {if(!stopFlag) {var blackRowPos = -1; //第一行具有黑格的行var blackGridPos = -1; // blackRowPos 该行黑格的位置for(var i = 0; i < allRow.length; i++) {if(allRow[i].hasBlackGrid) {blackRowPos = i;blackGridPos = allRow[i].blackGridPos;break;}}//console.log(blackRowPos + ":" + blackGridPos);// D:68  F:70  J:74  K:75if(blackRowPos != -1 && blackGridPos != -1) {//对应黑格的位置，按了正确的键if((event.keyCode == 68 && blackGridPos == 0)|| (event.keyCode == 70 && blackGridPos == 1)|| (event.keyCode == 74 && blackGridPos == 2)|| (event.keyCode == 75 && blackGridPos == 3)) {if(bgMusic.pause) {bgMusic.play();}rightChange(blackRowPos, blackGridPos);/*setTimeout(function() {if(bgMusic.play) {bgMusic.pause();}}, 3000);*/} else {//按错键咯，停止游戏，游戏结束var errorGrid;if(event.keyCode == 68) {errorGrid = allRow[blackRowPos].getElementsByTagName('div')[0];} else if(event.keyCode == 70) {errorGrid = allRow[blackRowPos].getElementsByTagName('div')[1];} else if(event.keyCode == 74) {errorGrid = allRow[blackRowPos].getElementsByTagName('div')[2];} else if(event.keyCode == 75) {errorGrid = allRow[blackRowPos].getElementsByTagName('div')[3];}//游戏结束gameOver(errorGrid);}}}}
}//当踩到黑格时，黑格颜色发生“正确”变化（通知用户）
// blackRowPos 黑格所在的行在allRow中的位置； blackGridPos 黑格在该行中的位置
function rightChange(blackRowPos, blackGridPos) {//修改标志allRow[blackRowPos].hasBlackGrid = false;allRow[blackRowPos].blackGridPos = -1;grade.innerHTML = (parseInt(grade.innerHTML) + 1) + '';var grid = allRow[blackRowPos].getElementsByTagName('div')[blackGridPos];grid.style.background = 'green';setTimeout(function() {grid.style.background = '#fff';}, 50);
}//鼠标控制
function mousePlay() {for(var i = 0; i < allRow.length; i++) {var row = allRow[i].getElementsByTagName('div');for(var j = 0; j < row.length; j++) {row[j].onclick = function() {//console.log(this.style.background);if(bgMusic.pause) {bgMusic.play();}var _this = this;if(_this.style.background == 'rgb(0, 0, 0)') {var tt = _this.parentNode;//修改 这一行的 标记——没有黑格了tt.hasBlackGrid = false;tt.blackGridPos = -1;//修改分数grade.innerHTML = (parseInt(grade.innerHTML) + 1) + '';_this.style.background = 'green';setTimeout(function() {_this.style.background = '#fff';}, 50);} else if(_this.style.background == 'rgb(255, 255, 255)') {gameOver(_this);}};}}
}//判断游戏是否结束
function isGameOver(obj) {var temp1 = obj.offsetTop + obj.offsetHeight;var temp2 = main.offsetTop + main.offsetHeight - 20;if(temp1 > temp2) {if(obj.hasBlackGrid) {obj.hasBlackGrid = false;var index = obj.blackGridPos;obj.blackGridPos = -1;gameOver(obj.getElementsByTagName('div')[index]);}}
}//游戏结束
function gameOver(errorGrid) {errorGrid.style.background = 'red';setTimeout(function() {errorGrid.style.background = '#fff';setTimeout(function() {errorGrid.style.background = 'red';alert('游戏结束，您最后的得分是：' + grade.innerHTML + '！');stopGame();}, 100);}, 100);if(bgMusic.play) {bgMusic.pause();}
}function getClass(parent, className) {var p = document.getElementById(parent);var tt = p.getElementsByTagName('*');var arr = [];for(var i = 0; i < tt.length; i++) {if(tt[i].className == className) {arr.push(tt[i]);}}return arr;
}

运行结果如下：

当屏幕缩小后，结果如下：

使用js实现“别踩白块儿”游戏相关推荐

python+opencv别踩白块儿游戏辅助，一天一个opencv小项目（已开源）
python+opencv别踩白块儿游戏辅助,一天一个opencv小项目(已开源) 见链接
【超详细】JS原生——别踩白块游戏
本次做的小例子是用原生js写的一个小游戏--别踩白块,js中的注释都给详细写出来了步骤,可以互相学习,有兴趣的话可以跟着步骤一起写一遍! <!DOCTYPE html> <html ...
别踩白块儿游戏源代码分析和下载(二)
四.游戏交互实现 1.前面已经介绍在 Block 类实现了每个block的触碰监听,block 实现触碰监听,当按下时,调起在GameScene中实现的touchBlock方法.下面来看改方法的实. ...
傅小森的游戏制作之路-别踩白块儿
项目前言别踩白块儿这- 还用开发吗? 别人已经制作了呀触屏版本多的是是挺多的但是你见过按键版本的嘛? 没见过吧这就是需要开发出来 , 进入项目需求环节项目需求别踩白块儿顾名思义:不 ...
初学JS——利用JS制作的别踩白块儿（街机模式）小游戏
初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是可能普通模式的别踩白块儿因为他的"块儿"是 ...
QT 小游戏 : 别踩白块儿~
一.实现思路 QPainter 绘制游戏界面 PS:根据方块坐标链表绘制所有方块支持两种操作方式 PS:鼠标事件和键盘事件(Q,W,E,R,T) 定时器(10ms) 刷新方块坐标数据根据得 ...
原生 JS 实现别踩方块儿小游戏 - 超简单
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼案例效果原生 JavaScript 实现的别踩方块小游戏案例效果如下所示: 案例分析静态页面将这个静态页面可以划分为四个部分,如下图 ...
web学习(2)--别踩白块儿(js版)(web入门)
废话不多说,就是一个简单的网页版的别踩白块儿 (踩到白块会弹出窗口,手动点击确定才能继续游戏,达到耗费你的游戏时间的目的) HTML:(注意js文件的名字和所放位置,如果和我命名的不一样,注意在第六行 ...
原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...

使用js实现“别踩白块儿”游戏

使用js实现“别踩白块儿”游戏相关推荐

最新文章

热门文章