今天玩一个前端的语言 JavaScript 实战一个小游戏别踩白块儿
开发IDE：webStorm
实战思路：1、创建div容器 400*400
2、创建4行子div
3、4行子div中，在放四列子div，float
4、写一个方法，创建4列子div，创建一行div，把一行四列插入到容器中
5、定时器，每30秒增加top值
6、每往下挤100px时，再创建1行4列，插入再窗口的最前面
7、代码里的注释非常的详细
！！注意 ：因为是自己写来玩的，没有在意浏览器的兼容性，一定要用火狐浏览器啦运行代码
代码：
<!DOCTYPE html>
<html lang="en">
<script src="jquery-3.2.1.min.js"></script>
<head>
<meta charset="UTF-8">
<style>
/*画面*/
#main{
width: 400px;
height: 400px;
border: 4px solid black;
margin: auto;
position: relative;
overflow: hidden;
}
/*容器*/
#container{
width: 100%;
height: 400px;
position: relative;
top:-100px;
background: white;
}
/*.row*/
.row{
width: 100%;
height: 100px;
}
/*.cell*/
.cell{
width: 100px;
height:100px;
float: left;
}
.black{
background: black;
}
/*
计分居中
*/
#score{
text-align: center;
}
#button{
text-align: center;
margin-top: 8px;
}
</style>
<title>小翔的别踩白块儿</title>
</head>
<body>
<h1 id="score">0</h1>
<div id="main">
<div id="container"></div>
</div>
<div id="button">
<button onclick="start()">点我开始</button>
</div>
</body>
<script>
var clock = null; // 定时器
var state = 0; //0 初始化状态,1 进行中，3 失败结束
var speed = 2;
/*
* 初始化界面操作
* */
function init() {
for(var i=0;i<4;i++){
crow();
}
//鼠标点击消除黑块事件委托
$('main').onclick = function (ev) {
judge(ev)
}
}
/*
* 判断踩黑块计分，白块结束游戏
* */
function judge(ev) {
if(state == 3){
alert('失败者禁入')
return;
}
if(ev.target.className.indexOf('black') == -1){
fall();
}else{
ev.target.className = 'cell';
ev.target.parentNode.pass = 1;
score();
}
}
/*
* start() 启动 定时器
* */
function start() {
clock = window.setInterval('move()',30);
}
/*
* 让黑快动画
* 获取container当前top的值 加像素
* */
function move() {
var con = $('container');
var top = parseInt(window.getComputedStyle(con,null)['top']);
if(speed + top >0){ //一步走多以后，直接top =0
top = 0;
}else{
top += speed; //调节每次下降的像素
}
con.style.top = top + 'px';
//
if(top == 0){
crow();
con.style.top = '-100px';
drow();
}else if(top == (-100 + speed)){
var rows = con.childNodes;
if((rows.length == 5) && (rows[rows.length-1].pass !== 1)){
fall();
}
}
}
/*
* 加速方法
* */
function jiasu() {
if(speed == 2){
speed = 4;
}else if(speed == 4){
speed = 5;
}else if(speed == 5){
speed = 10;
}else if(speed == 10){
speed = 20;
}else if(speed == 20){
alert("你电脑太垃圾，浏览器玩不动了");
}
}
/*
* 输，结束
* */
function fall() {
clearInterval(clock);
state = 3;
alert('结束');
}
/*
* 计分
* */
function score() {
var newscore = parseInt($('score').innerHTML)+1;
$('score').innerHTML = newscore;
if(newscore % 20 == 0){
jiasu();
}
}
/*
* 创建 div.row div calss='row'
* */
function crow() {
var con = $('container')
var row = cdiv('row');
var classes = createSn()
for(var i=0;i<4;i++){
row.appendChild(cdiv(classes[i]));
}
if(con.firstChild == null){
con.appendChild(row);
}else{
con.insertBefore(row , con.firstChild);
}
}
/*
* 删除最后一行黑块
* */
function drow() {
var con = $('container');
if(con.childNodes.length == 6){
con.removeChild(con.lastChild);
}
}
/*
* 创建div className是其类名
* */
function cdiv(className) {
var div=document.createElement('div');
div.className = className;
return div;
}
/*
* 返回一个数组，随机其中一个单元，值为“cell black” 其余三个皆为白色
* */
function createSn() {
var arr = ['cell','cell','cell','cell'];
var i = Math.floor(Math.random()*4);
arr[i] = 'cell black';
return arr;
}
/*
* 按照id获取对象
* */
function $(id) {
return document.getElementById(id);
}
init();
</script>
</html>
公众号：顾四秋
网友评论