JavaScript+html+css实现别踩白块游戏
游戏思路
- 先创建一个正方形，将其分成16块
部分代码如下：
div{margin: 0 auto;width: 100px;height: 100px;}#main {width: 400px;height: 400px;background: white;border: 2px solid gray;margin: 0 auto;position: relative;}#container{width: 100%;height: 400px;border-collapse:collapse;}.row{height: 100px;width: 100%;}.cell{height: 100px;width: 100px;float: left;}.black {background: black;}<div id="main"><div id="container"><div class="row"><div class="cell">div><div class="cell black">div><div class="cell">div><div class="cell">div>div><div class="row"><div class="cell">div><div class="cell black">div><div class="cell">div><div class="cell">div>div><div class="row"><div class="cell">div><div class="cell">div><div class="cell black">div><div class="cell">div>div><div class="row"><div class="cell black">div><div class="cell">div><div class="cell">div><div class="cell">div>div>div>div>
效果：
2. 将最上面一行上移并隐藏(黑块要不断地从上面掉落下来)
给container添加：
top: -100px;
position: relative;
给main添加：
position: relative;
overflow: hidden;效果图：
3. 这些黑块肯定要让Js动态生成啊，可以一行一行的生成，而每一行都是由四个cell组成，（黑色的那块多加一个class=”black”就行啦）， 选哪一块作为黑色呢？ 就要用到随机数了
部分代码：
一定要注意函数传参，心累啊function get_id(value) {var id = document.getElementById(value);return id;}function create_cell() { var temp = ["cell","cell","cell","cell"];var i = Math.floor(Math.random()*4); //产生[0,4)之间的随机数temp[i] = "cell black"; //不要写成 ["cell black"]return temp;}function create_div(Name) {var div = document.createElement("div");div.className = Name;return div;}function create_row() {var row = create_div("row"); var container = get_id("container");var array = create_cell(); container.appendChild(row);for(var i = 0; i < 4; i++) { row.appendChild(create_div(array[i]));//这里不需要加冒号！！}if(container.firstChild == null) {container.appendChild(row);}else {container.insertBefore(row,container.firstChild); } }4.让方块动起来
主要是Js操作dom， 添加定时函数setInterval（）使方块匀速下落，在移动的同时，要判断最下面一行黑色的方块是否触底，触底则游戏失败，如何判断鼠标点到黑色方块呢？ 只需要添加一个judge函数就ok了
代码如下：
function delete_lastrow() {var container = get_id("container");/*为什么孩子节点有6个时才移除最后一个呢？现在假设屏幕里出现了四个黑块，最上面还有一个黑块是隐藏的， 一共5个节点，此时你点击了最底下一个黑块，黑块变成白块，（注意，最底下的白块还在，不过看不见而已），此时上面的黑块 继续下降，最上面有出现了一个黑块，（6个节点了），此时就必须删除掉最后一个节点， 不然的话游戏结束不了*/if(container.childNodes.length == 6) { container.removeChild(container.lastChild);}}function move() {var container = get_id("container");//var top = parseInt(container.style.top);var top = parseInt(window.getComputedStyle(container, null)['top']); //得到container盒子的top属性if(top + speed > 0){top = 0;}else{top += speed;}container.style.top = top + "px";if(top == 0){create_row();container.style.top = "-100px";delete_lastrow();}var rows = container.childNodes;if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){gameover();for( var i = 0; i < 5; i++){container.removeChild(container.lastChild);}get_id("score").innerHTML = 0;}/* 千万不要写成这样！！！！！var rows = container.childNodes.length; if((rows == 5) && (rows[rows-1].pass !== 1)){ gameover();}*///判断有没有点到黑块function judge(element){if(element.target.className.indexOf("black") == -1) {element.target.parentNode.pass = 0;}else { element.target.className = "cell"; element.target.parentNode.pass = 1; //这一行的黑块已经被点击了add_score();}}//游戏结束function gameover() {clearInterval(clock);alert("你的最终得分为：" + get_id("score").innerHTML + "!");}
游戏完整代码：
<html lang="en">
<head><meta charset="UTF-8"><title>By 一笑而过title><style> #main{width: 400px;height: 400px;border: 2px solid rgba(0, 0, 0, 0.6);margin: 0 auto;overflow: hidden;}#container{width: 100%;height: 400px;top: -100px;position: relative;border-collapse: collapse;}.row{width: 100%;height: 100px;} .myrow{width: 100%;height: 100px;}.cell{float: left;width: 100px;height: 100px;}.black{background-color: #000;}h2{text-align: center;}#bt{display: block;margin:0 auto;margin-top: 20px;}style>
head>
<body><h2>Scoreh2><h2 id="score">0h2><div id="main"><div id="container">div>div><button id="bt">开始游戏button><script>var speed = 4; //初始化方块的下降速度var clock = null; get_id("bt").onclick = function init() {create_row(); var main = get_id("main"); main.onclick = function(element) {judge(element); }clock = window.setInterval("move()", 30);}//判断有没有点到黑块function judge(element){if(element.target.className.indexOf("black") == -1) {element.target.parentNode.pass = 0;}else { element.target.className = "cell"; element.target.parentNode.pass = 1; //这一行的黑块已经被点击了add_score();}}//添加分数function add_score() {var newscore = parseInt(get_id("score").innerHTML) + 1;get_id("score").innerHTML = newscore;if(newscore % 10 == 0){speedup();}}//获取idfunction get_id(value) {var id = document.getElementById(value);return id;}//给方块添加类名function create_cell() { var temp = ["cell","cell","cell","cell"];var i = Math.floor(Math.random()*4); //产生[0,4)之间的随机数temp[i] = "cell black"; //不要写成 ["cell black"]return temp;}//创建div元素并添加类名function create_div(Name) {var div = document.createElement("div");div.className = Name;return div;}// 创造一个并且有四个子节点function create_row() {var row = create_div("row"); var container = get_id("container");var array = create_cell(); for(var i = 0; i < 4; i++) { row.appendChild(create_div(array[i]));//这里不需要加冒号！！！！1 }if(container.firstChild == null) {container.appendChild(row);}else{container.insertBefore(row,container.firstChild); } }//删除最后一行function delete_lastrow() {var container = get_id("container");if(container.childNodes.length == 6) { container.removeChild(container.lastChild);}}//方块移动函数function move() {var container = get_id("container");//var top = parseInt(container.style.top);var top = parseInt(window.getComputedStyle(container, null)['top']); //得到container盒子的top属if(top + speed > 0){top = 0;}else{top += speed;}container.style.top = top + "px";if(top == 0){create_row();container.style.top = "-100px";delete_lastrow();}var rows = container.childNodes;if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){gameover();for( var i = 0; i < 5; i++){container.removeChild(container.lastChild);}get_id("score").innerHTML = 0;}/* 千万不要写成这样！！！！！var rows = container.childNodes.length; if((rows == 5) && (rows[rows-1].pass !== 1)){ gameover();}*/}//游戏结束function gameover() {clearInterval(clock);alert("你的最终得分为：" + get_id("score").innerHTML + "!");}// 加速函数function speedup(){speed += 2;if(speed == 8){alert('你超神了');}}script>
body>
html>刚刚学习Js，写的不太好， 若发现bug，希望能够指出，谢谢！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！