用H5新特性实现别踩白块小游戏。
功能分析：
1.游戏开始按钮
2.每点中一个记一分
3.分数达到二十弹出鼓励弹框
4.点击错误则游戏结束
效果演示
看了效果有没有急迫的心情呢？
代码演示
- body内容
<body><h2>本次得分</h2><h2 id="score">0</h2><div id="main"><div id="con"><div class="row"><div class="fang"></div><div class="fang one"></div><div class="fang"></div><div class="fang"></div></div><div class="row"><div class="fang"></div><div class="fang one"></div><div class="fang"></div><div class="fang"></div></div><div class="row"><div class="fang"></div><div class="fang"></div><div class="fang one"></div><div class="fang"></div></div><div class="row"><div class="fang one"></div><div class="fang"></div><div class="fang"></div><div class="fang"></div></div></div></div><div class="start">开始游戏</div></body>
- CSS演示
<style type="text/css">#score {text-align: center;}h2 {text-align: center;}div {margin: 0 auto;width: 100px;height: 100px;}#main {width: 400px;height: 600px;background: blanchedalmond;border: 2px solid gray;margin: 0 auto;position: relative;overflow: hidden;}#con {width: 100%;height: 400px;position: relative;top: -100px;/*隐藏最上层一行*/border-collapse: collapse;}.row {height: 100px;width: 100%;}.fang {height: 100px;width: 100px;float: left;}.one {background: blueviolet;}.start {margin-top: 20px;width: 150px;height: 50px;border-radius: 10px;background: yellowgreen;line-height: 50px;text-align: center;color: #fff;}</style>
- JavaScript内容
<script>//根据id获取元素function $(id) {return document.getElementById(id);}var clock = null;var state = 0;var speed = 4;/** 初始化 init*/function init() {for (var i = 0; i < 4; i++) {createrow();}//添加onclick事件$('main').onclick = function(ev) {ev = ev || eventjudge(ev);}//定时器 每30毫秒调用一次move()clock = window.setInterval('move()', 50);}//判断是否点击紫块function judge(ev) {if (state == 3) {alert('请刷新此页面，重新开始游戏')return;}if (ev.target.className.indexOf('one') == -1) {fail();} else {//点击目标元素ev.target.className = 'fang';ev.target.parentNode.pass = 1;score();}}//游戏结束function fail() {clearInterval(clock);state = 3;confirm('你的最终得分为' + parseInt($('score').innerHTML));}//创建divfunction creatediv(className) {var div = document.createElement('div');div.className = className;return div;}function createrow() {var con = $('con');var row = creatediv('row');var arr = createcell();con.appendChild(row);for (var i = 0; i < 4; i++) {row.appendChild(creatediv(arr[i]));}if (con.firstChild == null) {con.appendChild(row);} else {con.insertBefore(row, con.firstChild);}}//创建一个类名的数组function createcell() {var temp = ['fang', 'fang', 'fang', ];var i = Math.floor(Math.random() * 4);temp[i] = 'fang one';return temp;}//移动黑色块function move() {var con = $('con');var top = parseInt(window.getComputedStyle(con, null)['top']);if (speed + top > 0) {top = 0;} else {top += speed;}con.style.top = top + 'px';if (top == 0) {createrow();con.style.top = '-100px';delrow();} else if (top == (-100 + speed)) {var rows = con.childNodes;if ((rows.lenth == 5) && (rows[rows.length - 1].pass !== 1)) {fail();}}}//加快速度function speedup() {speed += 2;if (speed == 20) {alert('你真厉害，继续加油呦！');}}//删除行function delrow() {var con = $('con');if (con.childNodes.length == 6) {con.removeChild(con.lastChild);}}//计算得分function score() {var newscore = parseInt($('score').innerHTML) + 1;$('score').innerHTML = newscore;if (newscore % 10 == 0) {speedup();}}document.querySelector('.start').addEventListener('click', init)</script>
