用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 || event
judge(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));
}
//创建div
function 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>