零基础做一个吃鸡游戏 教你做网页版的别踩白块游戏
还记得曾经玩疯了的别踩白块么！今天小编给大家写了一个网页版的！
整个程序只有100多行代码，很简单！有个记事本都可以编写了！
代码结构图
里面的JS代码都有详细的注释，大家一看就懂！
操作过程
当然，源代码给你了，你可以自己修改哈！
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<style>
* {
background-color: aqua;margin: 0;padding: 0;
}
.box {
margin: 0px auto 0 auto;
width: 500px;
height: auto;
border: solid 2px #222;
}
.rowlist {
width: 500px;
height: 150px;
}
.rowlist div {
width: 124px;
height: 149px;
float: left;
background-color: white;
border: solid 1px #222;
border-top-width: 0;
border-left-width: 0;
cursor: pointer;
}
</style>
</head>
<body>
<h6 style="font-size: 60px;text-align:center">别踩白块</h6>
<div style="text-align: center;font-size: 50px">
<span>游戏速度：</span><select id="speed">
<option value="15">初级</option>
<option value="10">中级</option>
<option value="5">高级</option>
</select>
</div>
<div style="text-align: center;font-size: 50px">
<span id="sgame" style=" cursor: pointer;">开始游戏</span>
</div>
<div style="margin: 0px auto 0 auto;width: 500px;height: auto;border: solid 2px #222;">
<div id="list" style="width: 500px;height: 600px;position: relative;overflow: hidden;border-top: solid;">
<div id="mainlist" style="width: 500px;height: 600px;position: relative;top: -150px;"></div>
</div>
<div id="statesdiv" style=" border-top: solid 1px #222;width: 500px;height: 50px;font: 700 35px '微软雅黑';text-align: center;"></div>
</div>
<script type="text/javascript">
//得当前样式
function getStyle(obj,arrt){
return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
}
//定义全局变量
var mainlist = document.getElementById('mainlist'), startbt = document.getElementById('sgame'),statesdiv = document.getElementById('statesdiv');
//动态创建新行
function creatediv() {
//生成一个行的DIV
var listdiv = document.createElement('div');
listdiv.className = 'rowlist';
//生成一个随机数，决定哪个是黑块
var tag = Math.floor(Math.random() * 4);
for (var i = 0; i < 4; i ){
//这里是生成4个小的DIV，添加到一行里面，如果你一行设置多个方块就在这里改，当然样式也得改了
var minidiv = document.createElement('div');
if (i == tag) {
//随机添加一个黑块
minidiv.style.backgroundColor = '#000';
//这里是加的标识，如果我们点击了黑块就会把这个class去掉
minidiv.className = "imblack";
}
listdiv.appendChild(minidiv);
}
//插入新的行
mainlist.insertBefore(listdiv, mainlist.children[0]);
}
//移动div
function movediv(obj){
//清除定时器
clearInterval(obj.timer);
//获取速度以及初始化分数
var speed = 5,num = 0;
//定时器管理与开启定时器
obj.timer = setInterval(function() {
//获取
var cspx = parseInt(getStyle(obj, 'top')) speed;
//移动
obj.style.top = cspx 'px';
//判断并创建新的行
if (parseInt(getStyle(obj, 'top')) >= 0) {
creatediv();
obj.style.top = -150 'px';
}
//删除边多余的行
if (obj.children.length == 6) {
//如果有黑块没有点击则结束游戏
for (var i = 0; i < 4; i ) {
if (obj.children[5].children[i].className == 'imblack') {
//如果第6行里面有未点击的黑块则游戏结束
obj.style.top = '-150px';
statesdiv.innerHTML = '最高得分: ' num;
//关闭定时器
clearInterval(obj.timer);
//显示开始游戏
startbt.innerHTML = '重新开始';
}
}
obj.removeChild(obj.children[obj.children.length - 1]);
}
//点击事件判断与计分
obj.onmousedown = function(event) {
//如果正确点击
event = event || window.event;
if ((event.target ? event.target : event.srcElement).className == 'imblack') {
if (startbt.innerHTML == '重新开始') {
return;
}
//点击后的盒子颜色
(event.target ? event.target : event.srcElement).style.backgroundColor = "#ab9f9f";
//清除黑块标记
(event.target ? event.target : event.srcElement).className = '';
//加分
num ;
statesdiv.innerHTML = '当前得分: ' num;
} else {
if (startbt.innerHTML == '重新开始') {
return;
}
//游戏结束
obj.style.top = 0;
statesdiv.innerHTML = '最高得分: ' num;
clearInterval(obj.timer);
startbt.innerHTML = '重新开始';
}
//加速
if (num % 10 == 0) {
speed ;
}
}
},
parseInt(document.getElementById('speed').value));
}
//开始游戏
startbt.onclick = function(){
if(mainlist.children.length){
//清空mainlist
mainlist.innerHTML = '';
}
startbt.innerHTML = '游戏开始';
movediv(mainlist);
}
</script>
</body>
</html>
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
