还记得曾经玩疯了的别踩白块么!今天小编给大家写了一个网页版的!

整个程序只有100多行代码,很简单!有个记事本都可以编写了!

零基础做一个吃鸡游戏 教你做网页版的别踩白块游戏(1)

代码结构图

里面的JS代码都有详细的注释,大家一看就懂!

零基础做一个吃鸡游戏 教你做网页版的别踩白块游戏(2)

操作过程

当然,源代码给你了,你可以自己修改哈!

<!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>

,