通過HTML+CSS+JS實現別踩白塊兒小遊戲
上代碼
感興趣的朋友可以加我QQ聊一聊具體實現思路：526772254
<!--Author: Catalog Spri-->
<!--date: 2018/12/25-->
<!--time: 9:06 PM-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>別踩白塊兒!!!</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 400px;
height: 520px;
background-color: #8af3ff;
margin: 40px auto;
position: relative;
overflow: hidden;
}
.begin {
width: 400px;
height: 520px;
position: absolute;
z-index: 666;
font: 900 50px/520px "STSong";
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.begin span {
line-height: 520px;
cursor: pointer;
}
.scroll {
width: 400px;
height: 130px;
/*background-color: #900b09;*/
position: absolute;
top: -130px;
}
.scroll ul {
width: 400px;
}
.scroll ul li {
float: left;
width: 98px;
height: 128px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
<div class="scroll">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="begin">
<span>開始遊戲</span>
</div>
</div>
</body>
<script>
// 獲取需要用到的標籤
var box = document.querySelector('.box');
var begin = document.querySelector('.begin');
var scroll = document.querySelector('.scroll');
var timer = null;
// 綁定事件
begin.onclick = function () {
this.style.display = 'none';
box.style.border = '1px solid black';
box.style.backgroundColor = 'white';
// 清除上次遊戲殘留行
scroll.innerHTML = "";
// 遊戲開始
beginGame()
};
// 開始遊戲
function beginGame() {
// 速度
var speed = 5;
// 得分
var score = 0;
// 設置定時器
timer = setInterval(function () {
// 假裝是向下滾動
scroll.style.top = scroll.offsetTop + speed + 'px';
// 滾動一整行則創建新行
if (scroll.offsetTop >= 0) {
createNewRow();
scroll.style.top = '-130px';
}
// 綁定事件target
scroll.onclick = function (ev) {
var target = ev.target;
if (target.className == 'tag') {
target.style.backgroundColor = "#bbb";
target.className = '';
score++;
} else {
scroll.style.top = 0;
begin.innerHTML = '得分: ' + score;
clearInterval(timer);
begin.style.display = "block";
}
// 加速
if (score % 20 == 0) {
speed++;
}
}
// 刪除第一行
if (scroll.children.length == 6) {
for (var i = 0; i < 4; i++) {
if (scroll.children[scroll.children.length - 1].children[i].className == 'tag') {
scroll.style.top = '-130px';
begin.innerHTML = '得分: ' + score;
clearInterval(timer);
begin.style.display = "block";
}
}
scroll.removeChild(scroll.children[scroll.children.length - 1]);
}
}, 20)
}
// 產生新行
function createNewRow() {
var row = document.createElement('ul');
var index = randomNum(0, 3);
for (let i = 0; i < 4; i++) {
var li = document.createElement('li');
row.appendChild(li);
}
if (scroll.children.length == 0) {
scroll.appendChild(row)
} else {
scroll.insertBefore(row, scroll.children[0])
}
row.children[index].style.backgroundColor = 'black';
row.children[index].className = "tag";
}
// 產生隨機數函數
function randomNum(m, n) {
return parseInt(Math.random() * (n - m + 1)) + m;
}
</script>
</html>