Javascript別踩白塊兒（鋼琴塊兒）小游戲?qū)崿F(xiàn)代碼
更新時間：2017年07月20日 16:06:07 作者：梵海pp
游戲唯一的一個規(guī)則，我們只需要不斷踩著黑色方塊前進即可，這里根據(jù)方向鍵來踩白塊，在規(guī)定的時間內(nèi)，每走一次分數(shù)加100.下面通過本文給大家分享Javascript別踩白塊兒（鋼琴塊兒）小游戲?qū)崿F(xiàn)代碼，一起看看吧
游戲唯一的一個規(guī)則，我們只需要不斷踩著黑色方塊前進即可，這里根據(jù)方向鍵來踩白塊
在規(guī)定時間內(nèi)，每走一次分數(shù)加100
游戲內(nèi)的每一排都是一個有四個元素的數(shù)組，當(dāng)正確的踩到黑塊前進后，前一個數(shù)組內(nèi)所有的對象樣式屬性（backgroundColor）賦值給其后一個數(shù)組內(nèi)的對應(yīng)位置處的對象，便實現(xiàn)了前進的功能，很簡單的思想
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{padding: 0;
margin: 0;
}
.div_bg {
width: 410px;
height: 512px;
margin-top: 10px;
border: 1px solid black;
box-shadow: 0px 0px 20px #102327;
}
#score{
margin-top: 10px;
color: #365669;
margin:0 auto;
width: 350px;
height: 80px;
}
.span_1 {
font-size: 3em;
}
.box_list {
border-radius: 100%;
text-align: center;
line-height: 100px;
color: red;
font-size: 2em;
}
.box_list_1 {
border-radius: 100%;
box-shadow: 0px 0px 20px #ff5026;
text-align: center;
line-height: 100px;
color: red;
font-size: 2em;
}
.img{
margin: 0 auto;
margin-top: 15px;
}
.over{
border: 2px solid #23f00f;
border-radius: 20%;
box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px white;
top: 200px;
left: 50%;
margin-left: -150px;
color: black;
line-height: 50px;
text-align: center;
font-size: 20px;
}
.newGame{
border: 2px solid #23fdff;
border-radius: 20%;
box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px green;
top: 350px;
left:50%;
margin-left: -50px;
color: white;
font-size: 16px;
z-index: 9999;
}
.newGame:hover{
border: 2px solid #c05e8c;
color: #A1FEDC;
}
#clock{
font-size: 4em;
color: red;
margin:0 auto;
width: 350px;
height: 80px;
}
</style>
</head>
<body>
<div style="width: 410px;margin: 0 auto;">
<div class="div_bg">
</div>
<div id="clock">00:00:20:00</div>
<div id="score">
<p class="span_1"></p>
</div>
</div>
<script>
var box;
var sum = 0;//全局變量 分數(shù)
var oclock=document.getElementById("clock");
var start1 = oclock.innerHTML;
var finish = "00:00:00:00";
var timer = null;//
var Over=new over();//實例化對象結(jié)束游戲框
var NewGame=new newGame();//實例化重新開始游戲按鈕
var index=false;//標(biāo)志位哦（用于控制結(jié)束游戲框重復(fù)出現(xiàn)）
var again=true;//標(biāo)志位（用于結(jié)束游戲后控制無法再踩白塊）
box = new showbox();//實例化對象
box.show();//構(gòu)造游戲白塊
window.onkeydown = function (e) {
box.clickinfo(e.keyCode);//獲取方向鍵keyCode值并傳參調(diào)用函數(shù)
}
function onTime()//定義倒計時秒表函數(shù)
{
if (start1 == finish)//到達時間執(zhí)行
{ index=true;
clearInterval(timer);
if(index==true){
//由于后續(xù)定時器一直執(zhí)行，當(dāng)點擊重新開始游戲后會重復(fù)出現(xiàn)結(jié)束框，所以設(shè)置標(biāo)志位控制只出現(xiàn)一次
Over.createOver();
index=false;
}
return;
}
var hms = new String(start1).split(":");//以:作為分隔符號取字符串內(nèi)的數(shù)據(jù)
var ms = new Number(hms[3]);//給每個數(shù)據(jù)定義對象
var s = new Number(hms[2]);
var m = new Number(hms[1]);
var h = new Number(hms[0]);
ms -= 10;//每次執(zhí)行ms減10
if (ms < 0)//判斷時間并進行變化
{
ms = 90;
s -= 1;
if (s < 0)
{
s = 59;
m -= 1;
}
if (m < 0)
{
m = 59;
h -= 1;
}
}
var ms = ms < 10 ? ("0" + ms) : ms;//如果出現(xiàn)個位數(shù)給個位數(shù)前面添加0
var ss = s < 10 ? ("0" + s) : s;
var sm = m < 10 ? ("0" + m) : m;
var sh = h < 10 ? ("0" + h) : h;
start1 = sh + ":" + sm + ":" + ss + ":" + ms;
oclock.innerHTML = start1;//重新給oclock賦值
clearInterval(timer);
timer =setInterval("onTime()", 100);
}
function run() {//開始倒計時函數(shù)
timer =setInterval("onTime()", 100);
}
function showbox() {//定義構(gòu)造函數(shù)創(chuàng)建白塊
this.width = 100;
this.height = 100;
this.border = "1px solid black";
this.float = "left";
this.color = "black";
this.body = [[null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null]];
/*定義一個二維數(shù)組，每一個數(shù)組中存放的元素代表每一個白塊對象一排四個一共五排*/
this.show = function () {
document.getElementsByClassName("span_1")[0].innerHTML = "分數(shù)：" + sum;//初始化分數(shù)
for (var i = 0; i < this.body.length; i++) {//兩重循環(huán)動態(tài)創(chuàng)建白塊和黑塊
var ran_num = Math.floor(Math.random() * 4);//去一個（0~3）的隨機數(shù)，使每一行隨機位置出現(xiàn)一個黑塊
for (var k = 0; k < this.body[i].length; k++) {
if (this.body[i][k] == null) {//事先判斷一下是否已近存在該對象，防止產(chǎn)生多余對象（后續(xù)會多次調(diào)用該方法）
this.body[i][k] = document.createElement("div");
this.body[i][k].style.width = this.width + "px";//給對象添加屬性
this.body[i][k].style.height = this.height + "px";
this.body[i][k].style.border = this.border;
this.body[i][k].style.float = this.float;//讓每一個白塊浮動
if (k == ran_num) {//隨機黑塊位置
this.body[i][k].className = "box_list";
this.body[i][k].style.backgroundColor = this.color;
} else {
this.body[i][k].className = "box_list_1";
this.body[i][k].style.backgroundColor = "white";
}
}
document.getElementsByClassName("div_bg")[0].appendChild(this.body[i][k]);
}
}
for(var i=0;i<this.body.length;i++){//兩重循環(huán)給黑塊添加方向鍵圖片（這里是頁面加載后執(zhí)行）
for(var j=0;j<this.body[i].length;j++){
if(this.body[i][j].style.backgroundColor=="black"){
this.body[i][j].innerHTML="<img class=img src='image/direct"+j+".png'/>";
//這里我給圖片direct0（方向左）direct1（方向上）direct2（方向下）direct3（方向右）命名
}
}
}
}
this.clickinfo = function (code) {//code：傳的方向鍵keyCode值
for (var i = 0; i < 4; i++) {//給最下面一行索引賦值
this.body[4][i].index = i;
}
if (code == 37) {
if (this.body[4][0].style.backgroundColor == "black") {//判斷若是方向左鍵且當(dāng)前是黑塊
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分數(shù)：" + sum;//變動分數(shù)
clearInterval(timer);
Over.createOver();//現(xiàn)實游戲結(jié)束框
again=false;
}
}
if (code == 38) {
if (this.body[4][1].style.backgroundColor == "black") {
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分數(shù)：" + sum;
clearInterval(timer);
Over.createOver();
again=false;
}
}
if (code == 40) {
if (this.body[4][2].style.backgroundColor == "black") {
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分數(shù)：" + sum;
clearInterval(timer);
Over.createOver();
again=false;
}
}
if (code == 39) {
if (this.body[4][3].style.backgroundColor == "black") {
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分數(shù)：" + sum;
clearInterval(timer);
Over.createOver();
again=false;
}
}
for(var i=0;i<this.body.length;i++){//再一次兩重循環(huán)給黑塊添加方向鍵圖片（這里是在游戲過程中）
for(var j=0;j<this.body[i].length;j++){
this.body[i][j].innerHTML="";
if(this.body[i][j].style.backgroundColor=="black"){
this.body[i][j].innerHTML="<img class=img src='image/direct"+j+".png'/>";
}
}
}
}
this.moveinfo = function () {//踩白塊前進功能函數(shù)
if (again == true) {
clearInterval(timer);//先清除一次定時器因為后面會再次調(diào)用，多余的定時器會讓時間加速倒計時
sum += 100;//每走一次加100分
run();//開啟倒計時（當(dāng)?shù)谝淮巫叩臅r候 開始倒計時，標(biāo)志著游戲開始了）
document.getElementsByClassName("span_1")[0].innerHTML = "分數(shù)：" + sum;//每走一次都要動態(tài)改變一下當(dāng)前分數(shù)
for (var k = 4; k > 0; k--) {
//把后一排所有塊的樣式屬性變?yōu)槠淝耙慌艍K和其相對應(yīng)位置塊的樣式屬性
// 這里注意：要從最后一排開始賦值，并且第一排的塊不算進去
for (var i = 0; i < 4; i++) {
this.body[k][i].style.backgroundColor = this.body[k - 1][i].style.backgroundColor;
}
}
var ran_num = Math.floor(Math.random() * 4);
//取隨機數(shù)創(chuàng)建第一排黑白塊
for (var i = 0; i < 4; i++) {
if (i == ran_num) {
this.body[0][i].style.backgroundColor = "black";
}
else {
this.body[0][i].style.backgroundColor = "white";
}
}
this.show();//每一次踩白塊都要調(diào)用一下show讓全局改變一下
}
}
}
function over(){//定義結(jié)束游戲框構(gòu)造函數(shù)
this.width="300px";
this.height="100px";
this.bgColor="#ccc";
this.position="absolute";
this._over=null;
this.className="over";
this.createOver=function(){
if(this._over==null){
this._over=document.createElement("div");
this._over.style.width=this.width;
this._over.style.height=this.height;
this._over.style.backgroundColor=this.bgColor;
this._over.style.position=this.position;
this._over.className=this.className;
this._over.innerHTML="<span>游戲結(jié)束</br>得分："+sum+"</span>";
document.body.appendChild(this._over);
NewGame.createNewGame();
}
}
}
function newGame(){//定義重新開始按鈕構(gòu)造函數(shù)
this.width="100px";
this.height="40px";
this.bgColor="#4D5260";
this.position="absolute";
this._newGame=null;
this.className="newGame";
this.createNewGame=function(){
if(this._newGame==null){
this._newGame=document.createElement("button");
this._newGame.style.width=this.width;
this._newGame.style.height=this.height;
this._newGame.style.backgroundColor=this.bgColor;
this._newGame.style.position=this.position;
this._newGame.className=this.className;
this._newGame.innerHTML="<span>重新開始</span>";
document.body.appendChild(this._newGame);
}
var oNewGame=document.getElementsByClassName("newGame")[0];//獲取創(chuàng)建后的重新開始按鈕
oNewGame.onclick=function(){//添加點擊事件 初始各種對象
sum=0;
again=true;
document.getElementsByClassName("span_1")[0].innerHTML = "分數(shù)：" + sum;
document.getElementById("clock").innerHTML="00:00:20:00";
start1="00:00:20:00";
document.getElementsByClassName("newGame")[0].remove();//移除重新開始按鈕
document.getElementsByClassName("over")[0].remove();//移除結(jié)束游戲框
NewGame._newGame=null;
Over._over=null;
}
}
}
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的Javascript別踩白塊兒（鋼琴塊兒）小游戲?qū)崿F(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
在js中，閉包是一個很重要又相當(dāng)不容易完全理解的要點,下面這篇文章主要給大家介紹了關(guān)于閉包在js中充當(dāng)著什么角色的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了js動態(tài)切換圖片的方法,包含完整的css文件與js文件實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
npm install報錯無法創(chuàng)建packge.json文件的解決辦法
當(dāng)你在運行 npm install 時遇到錯誤,提示無法找到 package.json 文件,也沒有創(chuàng)建一個 package.json 文件,只創(chuàng)建了一個package-lock.json文件,本文給大家介紹詳細的解決辦法,需要的朋友可以參考下2024-02-02
javascript字符串替換函數(shù)如何一次性全部替換掉
這篇文章主要介紹了JS字符串替換函數(shù)replace如何一次性全部替換的相關(guān)資料,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了JS實現(xiàn)滑動條案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在使用UniApp開發(fā)應(yīng)用時,經(jīng)常需要實現(xiàn)WebView與UniApp之間的數(shù)據(jù)交互,文中通過代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-09-09
js下的一些小技巧，需要的朋友可以下。2009-12-12
這篇文章給大家分享了基于bootstrap打造的特色進度條效果，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-05-05
這篇文章主要介紹了js中值引用和地址引用,結(jié)合實例形式分析了javascript值引用和地址引用相關(guān)原理、用法及操作注意事項,需要的朋友可以參考下2019-06-06
如何用js將blob為pcm格式轉(zhuǎn)換為MP3格式
要將PCM文件轉(zhuǎn)換為MP3文件,您可以使用Js實現(xiàn),這篇文章主要給大家介紹了關(guān)于如何用js將blob為pcm格式轉(zhuǎn)換為MP3格式的相關(guān)資料,需要的朋友可以參考下2023-11-11