原生js实现曾经很火的一款小游戏—别踩白块—
第一次写博客 , 想把很久之前写的一款简单的小游戏的分享出来 , 大佬们勿喷 — 在 csdn 上学到很多 , 感谢这个平台 !
<div class="bigbox">
<!-- 显示游戏的区域 -->
<div class="gamequyu">
<!-- 上面显示一个游戏开始的按钮 -->
<div class="start">游戏开始</div>
<!-- 再显示一个游戏的主体部分 -->
<div class="zhuti"></div>
<div class="zhezhaoceng"></div>
</div>
<!-- 下面再显示一个计分的盒子 -->
<div class="jifen">当前分数:0</div>
</div>
<script>
// 先找到主体内容的盒子,添加到这个盒子中去
var zhuti = document.getElementsByClassName('zhuti')[0];
//找到计分 , 每点击一次, 就让分数++;
var jifen = document.getElementsByClassName('jifen')[0];
// 找到游戏开始按钮, 点击让它影藏,结束时显示并把里面的文字改变为'游戏结束'
var start = document.getElementsByClassName('start')[0];
// 找到遮罩层, 结束游戏的时候显示
var zhezhaoceng = document.getElementsByClassName('zhezhaoceng')[0];
// addbox('row')
//动态创建盒子的函数
function addbox(classname) {
// 思路:
// 1: 先封装一个函数动态的创建盒子;
// 2: 一个盒子里装了四个小盒子;
// 3: 随机一个数,让这四个小盒子的某一个的颜色改为黑色 ;
// 4: 给这个小盒子添加类名,设置样式;
// 5: 随机数作为下标, 给这个随机数的下标的小盒子添加一个类名;
// 6: 添加到'zhuti'里面去,显示在页面上(如果zhuti里面有内容了,就要添加到所有内容的最前面,如果没有,接直接添加)
// 生成随机数作为四个盒子的下标
var index = Math.floor(Math.random() * 4)
// console.log(index);
//创建一个盒子;
var bigdiv = document.createElement('div');
bigdiv.className = classname;
// 再依次创建四个小盒子;添加到刚刚创建的大盒子中;
for (var i = 0; i < 4; i++) {
var smallbox = document.createElement('div')
bigdiv.appendChild(smallbox)
}
// 判断主体里面有没有盒子 ;
// 如果已经存在盒子,就要添加到它们的最前面
// 如果没有,就可以直接添加到页面上
if (zhuti.children.length == 0) {
zhuti.appendChild(bigdiv)
} else {
zhuti.insertBefore(bigdiv, zhuti.children[0])
}
// 给随机下标的盒子添加样式的背景色为黑色;
bigdiv.children[index].style.backgroundColor = 'black';
// 再给这个随机的盒子添加一点东西,可以用来做判断
bigdiv.children[index].className = 'random_box';
}
//计分与控制速度的函数
function move(obj) {
// 封装一个计时器移动的方法, 让主体内的内容动起来;
// 思路:
// 1: 先获取元素的最终样式,距离顶部的top值;
// 2: 声明两个变量; 一个用来改变元素距离顶部的top值; 一个用来计分数;
var num = 0;
var sudu = 5;
// 创建一个计时器让它缓动显示到页面
//在样式里面就设置了top值为-150px;
//通过计时器让它的top值缓动到页面, 当它的top值等于0的时候,又让它的top值变为-150px;
//就调用创建元素的方法再创建一个盒子,让它插在这个显示在页面上的盒子的前面
obj.timeID = setInterval(function () {
var nowtop = parseInt(getComputedStyle(obj)['top']) + sudu;
// console.log(nowtop);
obj.style.top = nowtop + 'px';
if (parseInt(getComputedStyle(obj)['top']) >= 0) {
addbox('row')
obj.style.top = -150 + 'px'
}
// 判断条件:在移动的时候,如果用户没有点击到带有颜色的盒子,让盒子超过了界限;就结束游戏;
if (obj.children.length == 6) {
for (var i = 0; i < 4; i++) {
if (obj.children[obj.children.length - 1].children[i].className == 'random_box') {
jifen.innerHTML = '当前最高得分:' + num;
start.style.display = 'block'
start.innerHTML = '小朋友, 游戏结束';
start.style.display = 'block';
start.style.backgroundColor = 'green';
start.style.height = 60 + 'px';
start.style.fontSize = 30 + 'px';
zhezhaoceng.style.display = 'block';
clearInterval(obj.timeID)
}
}
// 让主体的内容的长度永远等于6,如果不等于6,就会出现按下第一个带'random_box'类名的小盒子,之后就不会再回到以上的判断里面了;
obj.removeChild(obj.children[obj.children.length - 1])
}
// console.log(obj.children.length);
// 判断用户点击的时候:条件:如果没有点中指定的盒子(类名为'random_box')的盒子,就结束游戏;不然就计分num++;
obj.onmousedown = function (event) {
// 根据事件对象里面的事件源来进行判断;
//当它的事件源的名字等于'random_box'的时候;
if (event.target.className == 'random_box') {
// 让这个事件源的的背景色变为红色;
event.target.style.backgroundColor = 'red';
//当用户点击了事件源时,把他的类名清空, 不然只变了颜色,到了第6个,判断类名还是'random_box'时, 就会结束游戏;
event.target.className = '';
// 计分
num++;
// 显示在当前得分的盒子里
jifen.innerHTML = '当前得分' + num;
} else {
// 结束游戏
clearInterval(obj.timeID)
start.style.display = 'block';
start.style.backgroundColor = 'green';
start.style.height = 60 + 'px';
start.style.fontSize = 30 + 'px';
start.innerHTML = '游戏结束!再来一局';
jifen.innerHTML = '最终得分' + num;
// 让遮罩层显示
zhezhaoceng.style.display = 'block';
}
// 加速(判断分数到了多少时,让主体下降的top值变大)
if (num % 5 == 0) {
sudu++;
}
}
}, 20)
}
// 当它点击开始按钮的时候,再调用函数;运行起来;
start.onclick = function () {
//如果事重新来一局,那就先把页面上已经创建的盒子先清除;
if (zhuti.children.length != 0) {
zhuti.innerHTML = ''
}
// 让遮罩层隐藏
zhezhaoceng.style.display = 'none';
// 让开始的按钮影藏
this.style.display = 'none';
jifen.innerHTML = '当前得分:0'
move(zhuti)
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
<style>
.bigbox {
width: 400px;
height: auto;
border: 1px solid #2d2d2d;
margin: 100px auto 0 auto;
}
.gamequyu {
width: 100%;
height: 600px;
position: relative;
overflow: hidden;
background-color: #fefefe;
/* background: url("./dog.png") no-repeat; */
background-size: 100%;
}
.start {
position: absolute;
width: 400px;
height: 50px;
color: white;
text-align: center;
line-height: 50px;
background-color: brown;
font-size: 30px;
cursor: pointer;
z-index: 9999;
}
.zhuti {
width: 100%;
height: 600px;
position: absolute;
top: -150px;
}
.jifen {
width: 400px;
height: 50px;
font-size: 30px;
text-align: center;
line-height: 50px;
color: white;
margin: 0 auto;
background-color: brown;
}
.row {
width: 400px;
height: 150px;
}
.row div {
width: 100px;
height: 150px;
border: 1px solid #343434;
border-top-width: 0;
border-left-width: 0;
float: left;
cursor: pointer;
box-sizing: border-box;
}
.zhezhaoceng {
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
display: none;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74