今天玩一個前端的語言 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、代碼裡的注釋非常的詳細
！！注意 ：因為是自己寫來玩的，沒有在意浏覽器的相容性，一定要用火狐浏覽器啦運作代碼
代碼：
#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{
width: 100%;
height: 100px;
}
.cell{
width: 100px;
height:100px;
float: left;
}
.black{
background: black;
}
#score{
text-align: center;
}
#button{
text-align: center;
margin-top: 8px;
}
小翔的别踩白塊兒
點我開始
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();
}
}
function start() {
clock = window.setInterval('move()',30);
}
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();
}
}
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);
}
}
function cdiv(className) {
var div=document.createElement('div');
div.className = className;
return div;
}
function createSn() {
var arr = ['cell','cell','cell','cell'];
var i = Math.floor(Math.random()*4);
arr[i] = 'cell black';
return arr;
}
function $(id) {
return document.getElementById(id);
}
init();
公衆号：顧四秋