HTML5游戏制作作业

使用软件名称：HbuildX & Dreamwave
软件版本：2.3.2
功能介绍：H5是一系列制作网页互动效果的技术集合，即H5就是移动端的web页面。对于许多手游玩家来说，H5可能是个十分陌生的名词，其实H5就是HTML的高级版本，H5技术正在不断完善。

1.游戏名：别踩白块

游戏规则

别踩白块是一款考验反应力的游戏。点击开始按钮，这也是最具挑战性的一个模式。选择难度，点击开始游戏。按顺序在框内点击下落的带颜色的方块，每点击一个即可增加一分，方块下降的速度会越来越快。点击到白块或者重复点击则游戏结束。

设计思路

创建四段div用来存放方块，通过随机生成方块，位置的改变制作方块下落通过点击触发加分，通过点击增加分数，分数每十秒取余增加。通过增加速度使方块下落速度越来越快。通过定时器和音乐添加点击方块事件。

游戏截图

部分源码&注释说明

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8">
	<link href="index.css" rel="stylesheet" type="text/css" />
	</head>
	<body background="image/s1.jpg">
	<div class="box">   
	  <!-- 布局 -->
	  <audio src="music.mp3" id="bgm" controls loop></audio>
	  <div id="cont"> 
		<div id="go">
		  <span>Game start</span> 
		</div>
		  <div id="main"></div>
	  </div>
	   <div id="flag_chage">
		<span><button id="button1" type="submit">简单</button></span>
		<span><button id="button2" type="submit">中等</button></span> 
		<span><button id="button3" type="submit">困难</button></span> 
	   </div>
		  <div id="count"></div>
	</div> 

  <script>
  //得当前样式
	function getStyle(obj,arrt){
  //兼容IE
	  return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
  }

  var main = document.getElementById('main');
  var go = document.getElementById('go');
  var count = document.getElementById('count');
  var cols = ['#1AAB8A','#E15650','#121B39','#80A84E'];


  //动态创建div
	function cDiv(classname){
  //创建div
	  var oDiv = document.createElement('div');
  //随机值
	  var index = Math.floor(Math.random()*4);
  //行 添加相应的class类
	  oDiv.className = classname; 
  //创建行之后再动态创建4个小div并添加到行里面 
		for(var j =0;j<4;j++){
		  var iDiv = document.createElement('div'); 
		  oDiv.appendChild(iDiv); 
		}
  //然后把行添加到main里面
  //判断需要添加的位置
		if(main.children.length == 0){
		  main.appendChild(oDiv);
		}else {
		  main.insertBefore(oDiv, main.children[0]);
		}
  //随机给行里面的某一个div添加背景色 
	oDiv.children[index].style.backgroundColor = cols[index];
  //标记颜色盒子
	oDiv.children[index].className = "i";
  }


  //移动div
  function move(obj){
  //关闭上一个定时器
	  clearInterval(obj.timer);
  //默认速度与计分
	var flag = 5
	  var speed = flag,num = 0;

  //定时器管理与开启定时器
	  obj.timer = setInterval(function(){
  //速度 
	  var step = parseInt(getStyle(obj,'top')) + speed;
  //移动盒子
	  obj.style.top = step + 'px';
  //判断并创建新的盒子
		if(parseInt(getStyle(obj,'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 = 'Renew game';
			  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 = "#fff";
  //清除盒子标记
		(event.target? event.target : event.srcElement).className   = '';
  //计分
		num++;
  //显示得分
		count.innerHTML = '当前得分: ' + num;
		bgm.play();
		}
		else{
  //游戏结束
		  obj.style.top = 0;
		  count.innerHTML = '游戏结束,最高得分: ' + num;
  //关闭定时器
		  clearInterval(obj.timer);
  //显示开始游戏
		  go.children[0].innerHTML = 'Renew game';
		  go.style.display = "block";
		}
  //盒子加速
	  if(num%10 == 0){
		speed++;
	  }
	}
  //松开触发停止
	obj.onmouseup=function(event){
	  bgm.pause();
	}
  },20) 
	}


  //开始游戏
  go.children[0].onclick = function(){
  //开始前判断main里面是否有盒子，有则全部删除
	if(main.children.length){
  //暴力清楚main里面所有盒子
		main.innerHTML = '';
	  }
  //清空计分
	count.innerHTML = '游戏开始'; 
  //隐藏开始盒子
	this.parentNode.style.display = "none";
  //调用定时器
	move(main);
  }
  </script>
  <div style="text-align:center;">
</div>
</body> 
</html>

index.css

*{
  margin: 0; 
  padding: 0; 
} 
.box {
  margin: 50px auto 0 auto;
  width: 400px;
  height: auto;
  border: solid 1px #222;
} 
#cont { 
  width: 400px;
  height: 600px; 
  position: relative;
  overflow: hidden;
  }
#go {
  width: 100%;
  height: 600px;
  position: absolute;
  top: 0;
  font: 700 60px '微软雅黑';
  text-align: center; 
  z-index: 99;
}
#go span {
  cursor: pointer;
  background-color: #fff;
  border-bottom: solid 1px #222;
}
#main {
  width: 400px;
  height: 600px;
  position: relative;
  top: -150px;
}
.row {
  width: 400px;
  height: 150px;
}
.row div {
  width: 99px;
  height: 149px;
  border: solid 1px #222;
  float: left;
  border-top-width: 0;
  border-left-width: 0;
  cursor: pointer;
}
#count {
  border-top: solid 1px #222;
  width: 400px;
  height: 50px;
  font: 700 36px/50px '微软雅黑';
  text-align: center;
}
#bgm{
  width: 400px;
  height: 50px;
  margin-top: -50px;
  position: absolute;
}
h3{text-align:center}

来源：oschina

链接：https://my.oschina.net/u/4460029/blog/4312630

标签

Solid