练手小项目——别踩白块小游戏

参考：html5实现简单别踩白块小游戏 - XieYingpeng - 博客园

效果：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>white_block</title><link rel="stylesheet" href="white_block.css">
</head><body><h2>score</h2><h2 id="score">0</h2><div id="main"><div id="con"></div></div><div class="btn"><button class="start" onclick="start()">开始游戏</button></div>
</body>
<script src="white_block.js"></script></html>

h2 {text-align: center;
}
#main {width: 408px;height: 408px;background: white;border: 2px solid gray;margin: 0 auto;overflow: hidden;
}
#main #con {width: 100%;height: 400px;top: -408px;border-collapse: collapse;position: relative;
}
#main #con .row {height: 100px;width: 100%;
}
#main #con .row .cell {width: 100px;height: 100px;float: left;border: 1px solid #364a81;
}
#main #con .row .black {background: black;
}
button {display: block;width: 100px;margin: 0 auto;
}

var clock = null;
var speed = 6;
var state = 0;
var flag = false;function start() {if (!flag) {init();} else {alert('游戏已经开始，无需再次点击！');}
}function init() {flag = true;for (var i = 0; i < 4; i++) {creatRow();}// 添加onclick事件document.querySelector('#main').onclick = function(ev) {// 这句是什么意思ev = ev || Event;judge(ev);}// 定时器clock = window.setInterval('move()', 30);
}function creatDiv(className) {var div = document.createElement('div');div.className = className;return div;
}function creatRow() {// 这个$是jquery里的？要下载jQuery吗？var con = document.querySelector('#con');var row = creatDiv('row');var arr = createCell();con.appendChild(row);for (var i = 0; i < 4; i++) {row.appendChild(creatDiv(arr[i]));}if (con.firstChild == null) {con.appendChild(row);} else {con.insertBefore(row, con.firstChild);}
}function delrow() {var con = document.querySelector('#con');if (con.childNodes.length === 6) {con.removeChild(con.lastChild);}
}function createCell() {var temp = ['cell', 'cell', 'cell', 'cell'];var i = Math.floor(Math.random() * 4);temp[i] = 'cell black';return temp;
}function move() {var con = document.querySelector('#con');var top = parseInt(window.getComputedStyle(con, null)['top']);if (speed + top > 0) {top = 0;} else {top += speed;}con.style.top = top + 'px';over();if (top == 0) {creatRow();con.style.top = '-102px';delrow();}
}function speedup() {speed += 2;if (speed == 20) {alert("你超神了!");}
}function over() {var con = document.querySelector('#con');var rows = con.childNodes;// 这个pass是什么if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {fail();}for (let i = 0; i < rows.length; i++) {if (rows[i].pass1 == 1) {fail()}}
}function fail() {clearInterval(clock);flag = false;confirm('你最终的得分为' + parseInt(document.querySelector('#score').innerHTML));var con = document.querySelector('#con');con.innerHTML = '';document.querySelector('#scroe').innerHTML = 0;con.style.top = '-408px';
}// 判断是黑块还是白块
function judge(ev) {if (ev.target.className.indexOf('black') == -1 &&ev.target.className.indexOf('cell') !== -1) {//定义属性pass，表示此行row的白块已经被点击ev.target.parentNode.pass1 = 1;}if (ev.target.className.indexOf('black') !== -1) {ev.target.className = 'cell';//定义属性pass，表明此行row的黑块已经被点击ev.target.parentNode.pass = 1;score();}
}function score() {var newScore = parseInt(document.querySelector('#score').innerHTML) + 1;document.querySelector('#score').innerHTML = newScore;if (newScore % 10 == 0) {speedup;}
}

练手小项目——别踩白块小游戏相关推荐

原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...
别踩白块html源码,原生JS实现别踩白块小游戏（七）
在前面的文章<原生JS实现别踩白块小游戏(六)>中,为大家介绍了实现别踩白块小游戏的js代码中移动效果的方法概述. 下面我们就继续结合源代码中js代码部分,为大家介绍具体的实现方法. 相关 ...
html5合影拍照小游戏,html5实现简单别踩白块小游戏
属于简化版别踩白块,代码相对较为简单易学,主要涉及通过 javascript 操作元素节点的增删以及属性节点(class)的操作. HTML/CSSJavaScript元素节点增删属性节点操作在开始 ...
原生js实现（别踩白块小游戏）
原生js实现简单的小游戏,巩固原生js基础知识 js部分有详细注释 <!DOCTYPE html> <html lang="en"> <head> ...
jQuery实现别踩白块小游戏(简易版)
别踩白块分享这是个漫长的寒假,编程使我快乐.在学习jQuery时,在家练习做了这个小游戏,也算是提升一下实际使用能力. 现在记录下来给大家参考,不足之处请大家谅解. 先上截图: 使用代码前请先导入j ...
c语言别踩白块小游戏代码,自学easeljs 根据别踩白块游戏规则自己写的代码
主要基于 -------easeljs-0.7.1.min.js----- 去制作这个游戏思路:主要思路是以行为单位绑定可点击行选中则讲移动最外层容器继续绑定可点击行的下一行 ...
C++别踩白块小游戏
提示: 本游戏是基于EasyX图形库制作的,刚刚开始学习C++不是很完美,有不足的地方还请指出. ------------------------------------------ #include ...
html网页游戏别踩白块,原生JS实现《别踩白块》游戏（兼容IE）
兼容了IE,每得20分就加速一次!!! 效果如下: 图(1) 游戏初始图(2) 游戏开始代码如下: *{ margin: 0; padding: 0; } .box { margin: 50px ...
【微信小程序】别踩白块源码免费分享
微信小程序"别踩白块"源码分享一.项目目录框架及配置 1.文件框架 (1)pages文件夹: (2)app.js (3)app.json (4)app.wxss (5)app.w ...

练手小项目——别踩白块小游戏

练手小项目——别踩白块小游戏相关推荐

最新文章

热门文章