溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Javascript如何實(shí)現(xiàn)別踩白塊兒小游戲，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
游戲唯一的一個規(guī)則，我們只需要不斷踩著黑色方塊前進(jìn)即可，這里根據(jù)方向鍵來踩白塊
在規(guī)定時間內(nèi)，每走一次分?jǐn)?shù)加100
游戲內(nèi)的每一排都是一個有四個元素的數(shù)組，當(dāng)正確的踩到黑塊前進(jìn)后，前一個數(shù)組內(nèi)所有的對象樣式屬性（backgroundColor）賦值給其后一個數(shù)組內(nèi)的對應(yīng)位置處的對象，便實(shí)現(xiàn)了前進(jì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 >
<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;//全局變量 分?jǐn)?shù)
var oclock=document.getElementById("clock");
var start1 = oclock.innerHTML;
var finish = "00:00:00:00";
var timer = null;//
var Over=new over();//實(shí)例化對象結(jié)束游戲框
var NewGame=new newGame();//實(shí)例化重新開始游戲按鈕
var index=false;//標(biāo)志位哦（用于控制結(jié)束游戲框重復(fù)出現(xiàn)）
var again=true;//標(biāo)志位（用于結(jié)束游戲后控制無法再踩白塊）
box = new showbox();//實(shí)例化對象
box.show();//構(gòu)造游戲白塊
window.onkeydown = function (e) {
box.clickinfo(e.keyCode);//獲取方向鍵keyCode值并傳參調(diào)用函數(shù)
}
function onTime()//定義倒計(jì)時秒表函數(shù)
{
if (start1 == finish)//到達(dá)時間執(zhí)行
{ index=true;
clearInterval(timer);
if(index==true){
//由于后續(xù)定時器一直執(zhí)行，當(dāng)點(diǎn)擊重新開始游戲后會重復(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)//判斷時間并進(jìn)行變化
{
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() {//開始倒計(jì)時函數(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 = "分?jǐn)?shù)：" + sum;//初始化分?jǐn)?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）的隨機(jī)數(shù)，使每一行隨機(jī)位置出現(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) {//隨機(jī)黑塊位置
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 = "分?jǐn)?shù)：" + sum;//變動分?jǐn)?shù)
clearInterval(timer);
Over.createOver();//現(xiàn)實(shí)游戲結(jié)束框
again=false;
}
}
if (code == 38) {
if (this.body[4][1].style.backgroundColor == "black") {
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分?jǐn)?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 = "分?jǐn)?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 = "分?jǐn)?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 () {//踩白塊前進(jìn)功能函數(shù)
if (again == true) {
clearInterval(timer);//先清除一次定時器因?yàn)楹竺鏁俅握{(diào)用，多余的定時器會讓時間加速倒計(jì)時
sum += 100;//每走一次加100分
run();//開啟倒計(jì)時（當(dāng)?shù)谝淮巫叩臅r候 開始倒計(jì)時，標(biāo)志著游戲開始了）
document.getElementsByClassName("span_1")[0].innerHTML = "分?jǐn)?shù)：" + sum;//每走一次都要動態(tài)改變一下當(dāng)前分?jǐn)?shù)
for (var k = 4; k > 0; k--) {
//把后一排所有塊的樣式屬性變?yōu)槠淝耙慌艍K和其相對應(yīng)位置塊的樣式屬性
// 這里注意：要從最后一排開始賦值，并且第一排的塊不算進(jìn)去
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);
//取隨機(jī)數(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(){//添加點(diǎn)擊事件 初始各種對象
sum=0;
again=true;
document.getElementsByClassName("span_1")[0].innerHTML = "分?jǐn)?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>感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Javascript如何實(shí)現(xiàn)別踩白塊兒小游戲”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼