别踩⽩块⼉java代码_Javascript别踩⽩块⼉（钢琴块⼉）⼩游
戏实现代码
游戏唯⼀的⼀个规则，我们只需要不断踩着⿊⾊⽅块前进即可，这⾥根据⽅向键来踩⽩块
在规定时间内，每⾛⼀次分数加100
游戏内的每⼀排都是⼀个有四个元素的数组，当正确的踩到⿊块前进后，前⼀个数组内所有的对象样式属性(backgroundColor)赋值给其后⼀个数组内的对应位置处的对象，便实现了前进的功能，很简单的思想
*{padding: 0;
margin: 0;
}
.div_bg {
width: 410px;
height: 512px;
margin-top: 10px;
border: 1px solid black;
box-shadow: 0px 0px 20px #102327;
}
#score{
margin-top: 10px;
color: #365669;
margin:0 auto;
width: 350px;
font-size: 3em;
}
.box_list {
border-radius: 100%;
text-align: center;
borderbox
line-height: 100px;
color: red;
font-size: 2em;
}
.box_list_1 {
border-radius: 100%;
box-shadow: 0px 0px 20px #ff5026;
text-align: center;
line-height: 100px;
color: red;
font-size: 2em;
}
.img{
margin: 0 auto;
margin-top: 15px;
}
.over{
border: 2px solid #23f00f;
border-radius: 20%;
box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px white; top: 200px;
left: 50%;
margin-left: -150px;
color: black;
line-height: 50px;
text-align: center;
border: 2px solid #23fdff;
border-radius: 20%;
box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px green; top: 350px;
left:50%;
margin-left: -50px;
color: white;
font-size: 16px;
z-index: 9999;
}
.newGame:hover{
border: 2px solid #c05e8c;
color: #A1FEDC;
}
#clock{
font-size: 4em;
color: red;
margin:0 auto;
width: 350px;
height: 80px;
}
00:00:20:00
var box;
var sum = 0;//全局变量 分数
var ElementById("clock");
var start1 = oclock.innerHTML;
var finish = "00:00:00:00";
var timer = null;//
var Over=new over();//实例化对象结束游戏框
var NewGame=new newGame();//实例化重新开始游戏按钮
var index=false;//标志位哦(⽤于控制结束游戏框重复出现)
var again=true;//标志位(⽤于结束游戏后控制⽆法再踩⽩块)
box = new showbox();//实例化对象
box.show();//构造游戏⽩块
box.clickinfo(e.keyCode);//获取⽅向键keyCode值并传参调⽤函数
}
function onTime()//定义倒计时秒表函数
{
if (start1 == finish)//到达时间执⾏
{ index=true;
clearInterval(timer);
if(index==true){
//由于后续定时器⼀直执⾏，当点击重新开始游戏后会重复出现结束框，所以设置标志位控制只出现⼀次ateOver();
index=false;
}
return;
}
var hms = new String(start1).split(":");//以：作为分隔符号取字符串内的数据
var ms = new Number(hms[3]);//给每个数据定义对象
var s = new Number(hms[2]);
var m = new Number(hms[1]);
var h = new Number(hms[0]);
ms -= 10;//每次执⾏ms减10
if (ms < 0)//判断时间并进⾏变化
{
ms = 90;
s -= 1;
if (s < 0)
{
s = 59;
m -= 1;
}
if (m < 0)
{
m = 59;
h -= 1;
}
}
var ms = ms < 10 ? ("0" + ms) : ms;//如果出现个位数给个位数前⾯添加0
var ss = s < 10 ? ("0" + s) : s;
var sm = m < 10 ? ("0" + m) : m;
var sh = h < 10 ? ("0" + h) : h;
start1 = sh + ":" + sm + ":" + ss + ":" + ms;
oclock.innerHTML = start1;//重新给oclock赋值
clearInterval(timer);
timer =setInterval("onTime()", 100);
}
function run() {//开始倒计时函数
timer =setInterval("onTime()", 100);
}
function showbox() {//定义构造函数创建⽩块
this.width = 100;
this.height = 100;
this.border = "1px solid black";
this.float = "left";
this.body = [[null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null]]; /*定义⼀个⼆维数组，每⼀个数组中存放的元素代表每⼀个⽩块对象⼀排四个⼀共五排*/
this.show = function () {
for (var i = 0; i < this.body.length; i++) {//两重循环动态创建⽩块和⿊块
var ran_num = Math.floor(Math.random() * 4);//去⼀个(0~3)的随机数，使每⼀⾏随机位置出现⼀个⿊块
for (var k = 0; k < this.body[i].length; k++) {
if (this.body[i][k] == null) {//事先判断⼀下是否已近存在该对象，防⽌产⽣多余对象(后续会多次调⽤该⽅法)
this.body[i][k] = ateElement("div");
this.body[i][k].style.width = this.width + "px";//给对象添加属性
this.body[i][k].style.height = this.height + "px";

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。