昨天寫了一個簡單的跑酷小游戲，主要用到了JavaScript的定時器，動態生成，洗掉元素，事件等知識點，
今天繼續寫一個小游戲——別踩白塊，
首先有一個選單欄（開始游戲和結束游戲界面）
在就是游戲主體
最后在弄一個計分欄
HTML如下：
<div class="box box3">
<div class="kuang"></div> //游戲主題 居中
<div class="count">0分</div> //計分欄 右對齊
<div class="menu"> //選單欄 左對齊
<div>開始游戲</div>
</div>
</div>CSS如下：
.kuang {
position: relative;
margin: 2% auto;
height: 90%;
width: 30%;
overflow: hidden;
background-color: burlywood;
}
.count {
position: absolute;
right: 5%;
top: 30%;
width: 15%;
height: 20%;
color: red;
text-align: center;
font-size: 40px;
line-height: 150px;
background-color: aquamarine;
}
.menu {
position: absolute;
left: 5%;
top: 30%;
width: 15%;
height: 20%;
font-size: 40px;
color: red;
}
.menu:hover {
cursor: pointer;
}
.kuai {
position: absolute;
margin-left: 0;
width: 25%;
height: 20%;
background-color: #000000;
}接著是js
思路：首先在主體（kuang）里動態生成一個盒子（類目叫kuai）通過kuai的left的值控制其位置，由于kuai的位置隨機，可以用Math.random()函式隨機生成0-3的亂數num1在將其left的值設定為其寬度*num1即控制kuai在第一，二，三或者四個位置，同時為了讓顏色不單調可以定義一個陣列color=[]，陣列里面存放不同顏色的單詞，再設定一個亂數控制陣列下標就可以隨機給kuai設定不同的顏色，
接著再用定時器控制所有的塊不停的增加top值使其下落，
// 得到小方塊
function getkuai(){
var kuang=document.querySelector('.kuang');
var kuai=document.createElement('div');
var num1=Math.floor(Math.random()*4);
var kuai_color=['white','black','yellow','blue'];
var num2=Math.floor(Math.random()*4);
kuang.appendChild(kuai);
kuai.className="kuai";
kuai.style.backgroundColor=kuai_color[num2];
kuai.style.left=kuai.offsetWidth*num1 + 'px';
kuai.style.top= -kuai.offsetHeight + 1 + 'px';
}
// 小方塊下落
function kuai_down() {
//getkuai();
var count_time=0;
var time_down=setInterval(function(){
var kuaiAll=document.querySelectorAll('.kuai');
else ++count_time;
for(var i=0;i<kuaiAll.length;i++) {
kuaiAll[i].style.top=kuaiAll[i].offsetTop + 1 + 'px'; //沒1毫秒top值加1
}
if(kuaiAll.length==0) getkuai();
if(kuaiAll[kuaiAll.length-1].offsetTop>=0) getkuai();
},1)
}
在kuai下落的時候點擊塊使其消失即洗掉點擊的kuai這個元素，
function clickkuai(kuaiAll) {
kuaiAll[0].onclick=function(e) {
e.stopPropagation(); //阻止冒泡 點擊kuang時游戲結束，因為kuai是kuang 的子元素所以如果不阻止冒泡的話點擊kuai時游戲也會結束
var kuang=document.querySelector('.kuang');
var count_grade=document.querySelector('.count').innerHTML;
kuang.removeChild(kuaiAll[0]);
}
for(var i=1;i<kuaiAll.length-1;i++) { //只有第一個kuai消失后才能去除其他的kuai同時也要阻止冒泡
kuaiAll[i].onclick=function(e){
e.stopPropagation();
}
}
}
大體完成，接著就是完成游戲開始和結束的控制和計分
游戲開始的控制：點擊 游戲開始 游戲才進行 點擊kuai外面或者kuai掉下去后游戲結束彈出重新開始和游戲結束畫面，
計分：每完成點擊加一分
這些功能明天完善，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/336322.html
標籤：其他
上一篇：＜2021SC@SDUSC＞ 開源游戲引擎 Overload 代碼模塊分析 之 OvTools（四）—— Utils（上）
下一篇：空間資料結構