原生JS实现别踩白块小游戏(八)

藏色散人
Freigeben: 2019-01-09 13:25:04
Original
5199 Leute haben es durchsucht


在前面的文章《原生JS实现别踩白块小游戏(七)》中,我们为大家讲解了实现别踩白块小游戏中的一部分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) }
Nach dem Login kopieren

此段代码中,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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!