条件语句，循环语句，while循环，do while:
arr
数组的定义：
New array(length/content)
字面量
数组的读和写【arr[num]不可溢出来读//undefined； arr[]=xxx;可以溢出来写】
Array: 数组在JavaScript里面很难报错，可以直接赋值
数组常用方法：
改变原数组【Push,pop,shift,unshift,sort,reverse,】
splice
不改变原素组
Concat,join split，tostring,slice
事件 ：
1.移动事件
2.点击事件
3.覆盖时间
4.键盘事件
绑定事件：
on.xx绑定事件—句柄
ele.onxxx = function(event){}
兼容性好，但是一个元素的同一个事件上只有一个
基本等同于写在Html行间上`在这里插入代码片
obj.addEnventListener(type,fn,false);【w3c标准的】【能给一个对象绑定一个事件的多个处理函数】
IE9以下不兼容，可以为一个事件绑定多个处理事件
obj.attachEvent(‘on’+type,fn)【ie9独用，能给一个对象绑定一个事件的多个处理函数，并且一个对象的一个事件绑定同一个函数多次他都能执行】
就是一个事件同样可以绑定多个处理程序
ele.onxxx = function(event){} [程序this指向dom元素本身]
. obj.addEventListener(type,fn,false); [程序this指向dom元素本身]
obj.attachEvent(‘on’,+type,fn); [程序this指向window]
封装兼容性addEvent(elem,type,handle);方法:
//Eg-code:
Function addEvent(elem,type,handle){
If(elem.adddEventListener){
Elem. adddEventListener(type,handle,false);
}else if(elem.attachEvent){
Elem.attachEvent(‘on’+type,function(){
Handle.call(elem);
})
}else{
Elem[‘on’+type] =handle
}
}
}
解除事件处理程序：
ele.onclick = false/’’/null;
ele.removeEventListener(type,fn,false);
ele.detachEvent(‘on’+type,fn);
注：若绑定匿名函数，则无法解除
事件处理模型-事件冒泡（false）、捕获(true)：
事件冒泡：
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）
事件捕获：
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自父元素捕获至子元素（事件源元素）（自顶向上）
IE，没有捕获事件
触发顺序,先捕获，后冒泡
Focus、blur、change、submit、reset、select等事件不冒泡
取消冒泡：
w3c标准event.stopPropagation();但不支持ie9以下版本
ie独有event.cancelBubble = true
封装取消冒泡的函数stopBubble(event)
Function stopBubble(event){
If(event.stopPropagation){
Event.stopPropagation();
}
else{
event.cancelBubble =true;
}
}
阻止默认事件：
默认事件-表单提交，a标签跳转，右键菜单等
Return false;以对象属性的方式注册的事件才生效
Event.preventDefault();w3c标注，IE9以下不兼容
Event.returnValue = false;兼容ie
封装阻止默认事件的函数cancelHandler（event）;【void(false):取消默认事件----==return false】
Function cancelHandler (event){
If(e.preventDefault){
e.preventDefault();
} else{
e.returnValue = false;
}
}
事件对象：
Envent ||window.event用于IE
事件源对象：
Event.target 火狐只有这个
Event.srcElement ie只有这个
这俩chrome都有
兼容写法
事件委托机智：【简便，效率高】
//Eg-code：
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerText);
}
JS和脚本化：
鼠标事件：
Click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、mouseenter、mouseleave
用button来区分鼠标的按键，0/1/2
DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup老判断鼠标键
鼠标事件：
拖拽应用：
应用mousedown mousemove mouseup
随机移动的方块
[Mousever]
键盘分类：
Keydown keyup keypress Keydown>keypress>keyup
Keydown>keypress>keyup Keydown和keypress的区别
Keydown可以响应任意键盘按键，keypress只可以响应字符串键盘按键 Keydown返回ASCII码，可以转换相应字符
文本操作事件：
Input（input里面输入或删除都触发事件，只有文本框里面值不一样就触发）,focus,blur,change
时间分类：
窗体操作（window上的事件）
Scroll load
Onmousemove:鼠标移动事件
Onmousedown:鼠标按下去的事件
下面我们就来实际操作：扫雷喽！！
///首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扫雷</title>
<link rel="stylesheet" href="./css/demo.css">
</head>
<body>
<div>
<div id="btn"></div>
<div id="gameBox"></div>
<p id="flaxBox">
剩余雷数：<span id="lei">10</span>
</p>
<div id="alertBox">
<div id="alertImg">
<div id="close"></div>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
//CSS
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 100%;
height: 100%;
background-image: url(../img/bg.jpg) ;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
}
.btn{
width:170px;
height: 140px;
left: 50px;
position: absolute;
background-image: url(../img/startGame.png);
background-size: 100% 100%;
cursor: pointer;
}
.gameBox{
display:none;
width:500px;
height:490px;
margin: 20px auto;
border:1px solid #B25F27;
box-shadow:5px 5px 5px rgb(0,0,0,0.5);
transform: perspective(800px) rotateX(45deg);
}
.flaxBox{
display: none;
width: 200px;
height: 50px;
position: absolute;
top: 25px;
left: 50%;
margin-left: -100px;
font-size: 24px;
color:rgb(0, 0, 0);
font-weight:bold;
}
.alertBox{
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color:rgb(0,0,0,0.2) ;
}
.alertImg{
/* display: none; */
width: 600px;
height: 400px;
position:absolute;
/* background-image: url(../img/success.png); */
background-size: 100% 100%;
top: 0;
left: 0;
right: 0;
bottom:0;
margin:auto;
border-radius: 20px;
}
.close{
/* display: none; */
width:40px;
height: 40px;
position:absolute;
background-image: url(../img/closeBtn.png);
background-size: 100% 100%;
cursor: pointer;
top: 0;
right: 0;
}
.block{
width:49px;
height:49px;
border-right:1px solid #B25F27;
border-bottom: #B25F27;
box-shadow: 0 0 4px #333 inset;
background-image: url(../img/cao.jpg);
/* display: inline-block; */
float: left;
}
.show{
background-image: url(../img/dilei.jpg);
background-size: 100% 100%;
}
.num {
background:rgb(184, 158, 104);
font-size: 18px;
font-weight: bold;
line-height: 49px;
text-align: center;
color: blueviolet;
}
.qizi{
background-image: url(../img/hongqi.jpg);
background-color: bisque;
background-size: 100% 100%;
}
//js
var starBtn = document.getElementById('btn');//开始游戏按钮
var gameBox = document.getElementById('gameBox');//格子
var flaxBox = document.getElementById('flaxBox');//装剩余雷数
var alertBox = document.getElementById('alertBox');
var alertImg = document.getElementById('alertImg');
var closeBtn = document.getElementById('close');
var lei = document.getElementById('lei');
var minesNum;//雷数
var mineover;//游戏结束
var block;
var minegrop=[];
var reChear = true;
clickThing();
function clickThing(){
starBtn.onclick = function(){
if(reChear){
gameBox.style.display = 'block';
flaxBox.style.display = 'block';
init();
reChear = false;
}
}
gameBox.oncontextmenu = function(){//右键点击事件
return false;
}
gameBox.onmousedown = function(e){//鼠标按下时发生
var event = e.target;//获取当前点击得小格
if(e.which==1){
leftClick(event);
}else if(e.which==3){
rightClick(event);
}
closeBtn.onclick = function(){
alertBox.style.display = 'none';
alertImg.style.display = 'none';
gameBox.style.display = 'none';
gameBox.innerHTML = '';
}
}
}
function init(){//生成100小格子,并且生产10个雷
minesNum = 10;
mineover = 10;
lei.innerHTML = mineover;
for (var i =0;i<10;i++){
for(var j = 0;j<10;j++){
var gez = document.createElement('div');
gez.classList.add('block');
gez.setAttribute('id',i+'-'+j);
gameBox.appendChild(gez);
minegrop.push({mine:0});//初始都是0，生成一个div时，就加1
}
}
block = document.getElementsByClassName('block');
while(minesNum){//当雷数有的时候，就随机生产一个位置，然后在100个格子随机生产雷
var minedz = Math.floor( Math.random()*100);//一个随机得雷
if(minegrop[minedz].mine===0){
minegrop[minedz].mine = 1;//雷的状态，就进不来了
block[minedz].classList.add('islei');//当前格子是雷
minesNum--;//每生成一个雷就-1，一共10个，--
}
block[minedz].classList.add('islei');
}
}
function leftClick(lt){///左键设置
if(lt.classList.contains('qizi')){
return;
}
var islei = document.getElementsByClassName('islei');
if(lt&& lt.classList.contains('islei')){//如果包含雷
console.log('shibai');
for(var i = 0;i<islei.length;i++){
islei[i].classList.add('show');
}///////////////////////////////是雷就是alert---overimg
setTimeout(function(){
alertBox.style.display = 'block';
alertImg.style.backgroundImage = 'url(./img/over.jpg)';
},500)
}else{ ////////////////////遍历，遍历周围八个格子的雷数，但是也分为0和不为0的情况
var n=0;
var pSz = lt && lt.getAttribute('id').split('-');
var pX = pSz && + pSz[0];
var pY = pSz && + pSz[1];
lt && lt.classList.add('num');
for(var i = pX-1;i<=pX+1;i++){ //矩阵
for(var j = pY-1;j<= pY+1;j++){
var nine= document.getElementById(i+'-'+j);//周围的盒子
if(nine && nine.classList.contains('islei')){
n++;//是雷就加1
}
}
}
lt && (lt.innerHTML = n);
if(n == 0){/////////////为0就扩散
for(var i = pX-1;i<=pX+1;i++){/////////////////扩散
for(var j = pY-1;j<=pY+1;j++){/////////这个递归不等于0就停止
var nbhd = document.getElementById(i+'-'+j);
if(nbhd && nbhd.length !=0){//存在又不为0
if(!nbhd.classList.contains('check')){
nbhd.classList.add('check');
leftClick(nbhd);////等于0继续调用自己
}
}
}
}
}
}
}
function rightClick(rt){/////右键事件---插旗-----需要做判断
if(rt.classList.contains('num')){
return ;
}
rt.classList.toggle('qizi');//切换----监控
if(rt.classList.contains('islei')&&rt.classList.contains('qizi')){
mineover--;
}
if(rt.classList.contains('islei')&& !rt.classList.contains('qizi')){
mineover++;
}
lei.innerHTML = mineover;
if(mineover == 0){
alertBox.style.display = 'block';
alertImg.style.backgroundImage = 'url(./img/success.png)';
}
- 点赞
- 收藏
- 关注作者
评论（0）