在前面的文章《原生JS实现别踩白块小游戏(七)》中,我们为大家讲解了实现别踩白块小游戏中的一部分js方法。

下面我们接着之前的文章内容,继续给大家介绍实现别踩白块小游戏的js方法。
相关js代码如下:
//移动效果 function move(obj) { //默认速度与计分 var speed = 5, num = 0; obj.timer = setInterval(function () { //速度 var step = parseInt(getComputedStyle(obj, null)['top']) + speed; obj.style.top = step + 'px' if (parseInt(getComputedStyle(obj, null)['top']) >= 0) { CDiv('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 == 'i') { //游戏结束 obj.style.top = '-150px'; count.innerHTML = '游戏结束,最高得分: ' + num; //关闭定时器 clearInterval(obj.timer); //显示开始游戏 go.children[0].innerHTML = '游戏结束'; go.style.display = "block"; } } obj.removeChild(obj.children[obj.children.length - 1]); } //点击与计分 obj.onmousedown = function (event) { //点击的不是白盒子 // 兼容IE event = event || window.event; if ((event.target ? event.target : event.srcElement).className == 'i') { //点击后的盒子颜色 (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb"; //清除盒子标记 (event.target ? event.target : event.srcElement).className = ''; //计分 num++; //显示得分 count.innerHTML = '当前得分: ' + num; } else { //游戏结束 obj.style.top = 0; count.innerHTML = '游戏结束,最高得分: ' + num; //关闭定时器 clearInterval(obj.timer); //显示开始游戏 go.children[0].innerHTML = '游戏结束'; go.style.display = "block"; } //盒子加速 if (num % 10 == 0) { speed++; } } //松开触发停止 obj.onmouseup = function (event) { } }, 20) }
此段代码中,getComputedStyle(obj, null)['top']方法是用来实现给main获取设置top属性。然后我们通过if语句进行判断,如果这里的top值大于等于0,就调用CDiv方法即动态创建div,并给其添加class名为“row”,然后设置top初始值为-150px。
别踩白块小游戏完整代码参考:《原生JS实现别踩白块小游戏(一)》
那么由于文章篇幅的原因,本篇文章就是介绍到这里,在后期的文章中,我们继续为大家逐步介绍别踩白块小游戏中的js实现方法。
Das obige ist der detaillierte Inhalt von原生JS实现别踩白块小游戏(八). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die Cloud-Server?
Welche Software ist Unity?
Zellsumme
Die herausragendsten Merkmale von Computernetzwerken
Der Computer hat Internetzugang, aber der Browser kann die Webseite nicht öffnen
Wie viel entspricht Dimensity 9000 Snapdragon?
So erstellen Sie einen Bitmap-Index in MySQL
Lösung für das Problem, dass exe-Dateien im Win10-System nicht geöffnet werden können