用原生JS写一个简易的小游戏
昨天在课堂上听课,软件工程导论,听着挺无聊-。-,于是乎,打开了VS2018,敲起了代码,写写封装,写着写着,突发奇想改良成了游戏,模拟了一个类似 “别踩白块儿” 的益智小游戏,我取名为 “别踩黑块” ,哈哈哈,代码随意发挥,既清奇又不整洁,只建议学习其中逻辑原理,不建议当作学习版本。(大佬看我代码估计要喷死我-。-)
在线地址:https://ebuxsf.coding.io/black
主要部分代码:
<div class="bigBox">
<div class="box"></div>
<div class="head">
<h4 class="box2">分数:0</h4>
<h4 class="box3">倒计时:</h4>
</div>
<h4 class="box5"></h4>
<button class="box4">开始游戏</button>
</div>
<div class="btn">
<h1>别踩黑块 游戏</h1>
</div>
<script>
// Math.ceil(Math.random()*9) //随机九位数
window.onload = function(){
inHtml()
}
var jiannum = 20 //倒计时
var resNum = 10 //加分值
var spe3 = "boxAmin3"
var spe2 = "boxAmin2"
var spe1 = "boxAmin1"
function spe(oclass){
var spe = oclass
return spe
}
var speNs = 0
var box6 = document.querySelector('.box6')
var box7 = document.querySelector('.box7')
var box8 = document.querySelector('.box8')
box6.onclick = function(){
speNs = 1
alert('你选择了简单系数,点击开始游戏')
}
box7.onclick = function(){
speNs = 2
alert('你选择了中等系数,点击开始游戏')
}
box8.onclick = function(){
speNs = 3
alert('你选择了困难系数,点击开始游戏')
}
function inHtml() {
var box = document.querySelector('.box')
var box3 = document.querySelector('.box3')
var box4 = document.querySelector('.box4')
var boxs = 1000 //盒子数量
var boxHtml = ''
for (var i = 0; i < boxs; i++) {
boxHtml = boxHtml + '<div class="odd bothBox' + Math.ceil(Math.random()*9) + '"></div>'
}
box.innerHTML += boxHtml
box3.innerHTML = '倒计时:' + jiannum
box4.addEventListener('click',Game,true)
}
function Game() {
var box = document.querySelector('.box')
var box2 = document.querySelector('.box2')
var box3 = document.querySelector('.box3')
var box4 = document.querySelector('.box4')
var box5 = document.querySelector('.box5')
var jishuIndex = document.querySelectorAll('.odd');
var jiafenNum = 0;
if(speNs == 0){
var speNum = spe(spe1)
}else if(speNs == 1){
var speNum = spe(spe1)
}else if(speNs == 2){
var speNum = spe(spe2)
}else if(speNs == 3){
var speNum = spe(spe3)
}
box4.removeEventListener('click',Game,false)
box4.style.bottom = '-40px'
box2.innerHTML = '分数:' + jiafenNum
box.classList.add(speNum);
for (var i = 0; i < jishuIndex.length; i++) {
jishuIndex[i].index = i
jishuIndex[i].addEventListener('click',function(){
if (this.index % 2 == 1) {
jishuIndex[this.index].classList.add("boxActives");
box5.innerHTML = '-10'
box5.classList.add("box5Amin");
setTimeout(function () {
box5.classList.remove("box5Amin");
jiafenNum = jiafenNum - resNum;
box2.innerHTML = '分数:' + jiafenNum
if (jiafenNum < 0) {
jiafenNum = 0;
box2.innerHTML = '分数:' + jiafenNum
}
},200)
} else {
setTimeout(function () {
box5.classList.remove("box5Amin");
},200)
jishuIndex[this.index].classList.add("boxActive");
box5.innerHTML = '+10'
box5.classList.add("box5Amin");
jiafenNum = jiafenNum + resNum;
box2.innerHTML = '分数:' + jiafenNum
}
},false)
if (jishuIndex[i].index % 2 == 1) {
jishuIndex[i].classList.add("demo1");
}else {
jishuIndex[i].classList.add("demo2");
}
}
function timer() {
jiannum--;
box3.innerHTML = '倒计时:' + jiannum
}
var timerss = setInterval(function () {
timer()
if (jiannum == 0) {
alert('游戏结束,你的分数为:' + jiafenNum + '分')
jiannum = resNum;
jiafenNum = 0;
box2.innerHTML = '分数:' + jiafenNum
inHtml()
startNum = 0
clearInterval(timerss)
var box = document.querySelector('.box')
box.classList.remove(speNum);
box4.style.bottom = '20px'
}
}, 1000)
}
</script>
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。