전단 기초 - JavaScript 종합 사례
29799 단어 전단 기초
전체적인 사고방식:
먼저 몇 번 놀 고 대략적인 실현 방향 을 생각한다.
1: 기본 정적 페이지 만 들 기;
2: div 움 직 여
3: 동적 생 성 Div
4: 움 직 이면 부족 한 div 메 우기
5: 랜 덤 으로 블랙 블록 만 들 기
6: 귀속 클릭 이벤트
7: 클릭 하여 승 부 를 판단
8: 게임 종료 후 제한 처리
9: 검 은 덩어리 바닥 에 닿 는 처리
10: 가산 점
11: 가속
변수 역할 영역 과 this 가 가리 키 는 문제 에 주의 하 십시오.
insertBefore、firstChild、getComputedStyle、appendChild、createElement、Math.random、Math.floor
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
#cont {
margin-top:100px;
width: 400px;
height: 400px;
border-top:1px solid blue;
position: relative;
/* */
overflow: hidden;
}
#main {
width: 400px;
height: 400px;
/* */
/* border:1px solid red; */
position: relative;
top:-100px;
}
.row {
height: 100px;
}
.row div {
width: 98px;
height: 98px;
border:1px solid gray;
float: left;
}
.black {
background: black;
}
style>
head>
<body>
<input type="text" id="fen" value="0" disabled>
<div id="cont">
<div id="main">div>
div>
body>
<script>
function Youxi(){
// main
this.main = document.getElementById('main');
this.interval = ''; //
this.over = false; //
this.sudu = 1; //
// DIV
this.cdiv = function(classNames){
// div
var div = document.createElement('div');
// ， class div
if(classNames){
div.className = classNames;
}
return div;
}
// div
this.crow = function(init){
var row = this.cdiv('row');
// 0-3
var k = Math.floor(Math.random()*4)
// div ，
for(var i=0;i<4;i++){
//
if(i==k){
row.appendChild(this.cdiv('black'));
}else{
row.appendChild(this.cdiv());
}
}
return row;
}
//
this.init = function(){
// 4 ， main
for(var i = 0;i<4;i++){
var row = this.crow();
this.main.appendChild(row);
}
//
this.clicks();
// ， DIV
this.interval = window.setInterval('start.move()' , 15);
}
//
this.clicks = function(){
// ，
// this ， this ， this
var that = this;
// main
this.main.onclick = function(ev){
// ，
var focus = ev.target;
//
if(that.over){
alert(' ， ！');
}
// black class ，
//
else if(focus.className == 'black'){
//
var score = document.getElementById('fen');
// 1
var sc = parseInt(score.value)+1;
score.value = sc;
//
focus.className = '';
// ， ' '
focus.parentNode.pass = true;
// 5， 0.5
if(sc%5 == 0){
that.sudu += 0.5;
}
}else{
// ，
window.clearInterval(that.interval);
//
that.over = true;
alert(' ')
}
}
}
// main top 2 ，main 2
// move, main
this.move = function(){
// top
var t = getComputedStyle(this.main, null)['top'];
var tops = parseInt(t);
// tops 1，
if(tops>1){
// ，
if(this.main.lastChild.pass==undefined){
window.clearInterval(this.interval);
//
this.over = true;
alert(' ')
}else{ //
// 5 ，
if(this.main.children.length>=5) {
this.main.removeChild(this.main.lastChild);
}
}
// ， ，
var row = this.crow();
this.main.insertBefore(row,this.main.firstChild);
//
this.main.style.top = '-100px';
}else{
// ，top
//
this.main.style.top = tops + this.sudu +'px';
}
}
}
var start = new Youxi();
start.init();
script>
html>
좋은 웹페이지 즐겨찾기
