JS 之（五）正向反向预查、正则案例、贪吃蛇案例

た入场券 2022-09-26 00:22 179阅读 0赞

# 正向反向预查 #

## 正向预查 ##

辅助条件 都在查找内容的后边。

### 正向匹配： ###

我们要查找出来的内容，右边必须出现指定的信息，并且其是辅助条件，不是结果的一部分。

var reg = /pattern(?=模式)/;  (?=模式)是辅助条件(可以通过具体“模式”进行设置)
    小写字母字符串后边要出现连续数字信息
    beijing2008    xianggang1997   aomen1999
    LIAONING2014   SHANDONG2013   ####2012
    taiwan@$(

### 正向不匹配： ###

我们要查找出来的内容，右边不能出现指定的信息，右边的信息是辅助条件，不是结果额一部分。

var reg = /pattern(?!模式)/;  (?!模式)是辅助条件，可以通过具体“模式”进行设置
    today后边不能出现连续数字信息
    today123   today###  todayABC254   today_good

## 反向预查(php支持) ##

辅助条件在被查询内容的左边

### 反向匹配 ###

左边必须出现指定信息

var reg = /(?<=模式)pattern/;  pattern是被匹配内容，左边(?<=模式)是辅助条件

<?php //正则表达示使用 $reg = '/\d{2,4}/'; $str = '2016-09-13'; //单次匹配 //preg_match(查找字符串/模式,被匹配字符串,匹配到的结果array); //全局匹配 //preg_match_all(查找字符串/模式,被匹配字符串,匹配到的结果array); preg_match($reg,$str,$out);//array(1) { [0]=> string(4) "2016" } preg_match_all($reg,$str,$out);//array(1) { [0]=> array(3) { [0]=> string(4) "2016" [1]=> string(2) "09" [2]=> string(2) "13" } } //反向匹配 //连续4个字母左边必须出现3个数字 $reg = '/(?<=\d{3})[a-zA-Z]{4}/'; $str = '01241abcdee';//array(1) { [0]=> string(4) "abcd" } $str = 'abcki';//array(0) { } $str = '####adggs';//array(0) { } //反向不匹配 //连线4个字母左边不能出现数字 $reg = '/(?<!\d)[a-zA-Z]{4}/'; $str = '01241abcdee';//array(0) { } $str = 'abcki';//array(1) { [0]=> string(4) "abck" } $str = '####adggs';//array(1) { [0]=> string(4) "adgg" } preg_match($reg,$str,$out); var_dump($out);

# 正则案例 #

## 匹配ip地址 ##

## 匹配邮箱 ##

## 表单域验证 ##

<html>
    <head>
    <title>正则表单域验证</title>
    <meta charset='utf-8' />
    <script type='text/javascript'> window.onload = function(){ var fm = document.getElementsByTagName('form')[0]; fm.onsubmit = function(){ var reg = /^[a-zA-Z0-9][a-zA-Z0-9_]{4,18}@[a-z0-9A-Z]+(\.[a-z]+)+$/; var str = document.getElementsByTagName('input')[0].value; //console.log(str); var rst = str.match(reg); console.log(rst); if(rst === null){ alert(str + ' 不是正确的邮箱格式'); return false; }else{ alert(str + '邮箱正确'); } } } </script>
    </head>
    <body>
    <form method=post action='www.baidu.com'>
        <input type=text value=''>
        <input type=submit value=提交>
    </form>
    </body>
    </html>

# 贪吃蛇案例 #

DOM  
事件操作  
面向对象  
1. 绘制操作界面  
2. 绘制食物  
3. 绘制小蛇  
4. 小蛇移动  
　上：y轴坐标–，不断减1  
　下：y轴坐标++，不断加1  
　左：x轴坐标–，不断减1  
　右：x轴坐标++，不断加1  
　移动  
5. 利用键盘事件控制小蛇移动方向  
　事件中有“事件对象”可以感知被触发键子信息  
6. 小蛇吃食物  
　① 判断蛇头碰到食物，蛇头坐标 与 食物坐标一致  
　② 小蛇吃食物，增加蛇节，创建新食物  
7. 限制小蛇移动范围，  
　同时蛇头不能吃到自己(蛇头坐标 与 蛇身子的任何一个蛇节坐标是否相等)

扩展：  
　① 给吃食物做计数器显示  
　② 给游戏设置难易度，例如每吃到5个食物就增加一个难度(升级)  
　停止旧的setInterval()  
　重新根据新的间隔时间设置setInterval()

![这里写图片描述][20160913182546953]

<html>
    <head>
    <title>贪吃蛇</title>
    <meta charset='utf-8' />
    <script type='text/javascript'> //① 绘制操作界面 function Map(){ var width = 800; var height = 400; this.showmap = function(){ //利用dom技术创建div元素并设置css样式 //并把div追加到body里边 var main = document.createElement('div'); main.style.width = width + 'px'; main.style.height = height + 'px'; main.style.backgroundColor = 'pink'; //背景方块图片 //main.style.backgroundImage = 'url(12.jpg)'; document.body.appendChild(main); } } //② 绘制食物 function Food(){ var len = 20;//食物边长 //声明食物权值坐标为公开的成员 this.xFood = 0; this.yFood = 0; this.pian = null;//用于保存食物的成员对象 this.showfood = function(){ if(this.pian === null){ //利用dom创建一个div，绘制绿色的css背景颜色 //宽度和高度都是20 //最后div被追加给body this.pian = document.createElement('div'); this.pian.style.width = this.pian.style.height = len + 'px'; this.pian.style.backgroundColor = 'green'; this.pian.style.position = 'absolute'; document.body.appendChild(this.pian); } //食物摆放有“步进值20”防止放到线上 //食物在地图的位置是变的，原因是其有“权值” //x轴权值的范围：0-39(Math.floor(Math.random()*40)) //y轴权值的范围：0-19(Math.floor(Math.random()*20)) //left和top对决定定位元素进行位置设定的两个样式 //食物坐标=步进值 * 权值; this.xFood = Math.floor(Math.random()*40); this.yFood = Math.floor(Math.random()*20); this.pian.style.left = this.xFood*len + 'px'; this.pian.style.top = this.yFood*len + 'px'; } } //③ 绘制小蛇 function Snake(){ var len = 20;//每个蛇节的边长 //蛇节：[x坐标，y坐标，颜色，div元素节点对象] this.snakebody = [[0,1,'green',null],[1,1,'green',null],[2,1,'green',null],[3,1,'red',null]]; //蛇头默认移动方向(右) this.redirect = 'right'; //绘制 this.showsnake = function(){ //遍历每个蛇节并进行具体设置 for(var i=0; i<this.snakebody.length; i++){ //创建每个蛇节div之前先判断，不要重复创建 if(this.snakebody[i][3]===null){ this.snakebody[i][3] = document.createElement('div'); this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len + 'px'; this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2]; this.snakebody[i][3].style.position = 'absolute'; document.body.appendChild(this.snakebody[i][3]); } //设置坐标=权值坐标 * 步进值; this.snakebody[i][3].style.left = this.snakebody[i][0] * len + 'px'; this.snakebody[i][3].style.top = this.snakebody[i][1] * len +'px'; } } //移动小蛇 this.movesnake = function(){ //当前蛇节新坐标 等于下个蛇节的 旧坐标 for(var i=0; i<this.snakebody.length-1; i++){ this.snakebody[i][0] = this.snakebody[i+1][0]; this.snakebody[i][1] = this.snakebody[i+1][1]; } //蛇头移动 if(this.redirect == 'right') this.snakebody[this.snakebody.length-1][0]++;//x轴坐标++ else if(this.redirect == 'left') this.snakebody[this.snakebody.length-1][0]--;//x轴坐标-- else if(this.redirect == 'up') this.snakebody[this.snakebody.length-1][1]--;//y轴坐标-- else if(this.redirect == 'down') this.snakebody[this.snakebody.length-1][1]++;//y轴坐标++ //蛇头碰到食物（蛇头坐标 与 食物坐标 对比） var xSnake = this.snakebody[this.snakebody.length-1][0]; var ySnake = this.snakebody[this.snakebody.length-1][1]; //food.xFood food.yFood分别是食物的x/y轴坐标 if(xSnake == food.xFood && ySnake == food.yFood){ //增加蛇节 //增加新蛇节，该蛇节的坐标等于"蛇尾巴节"旧的坐标 var newjie = [this.snakebody[0][0],this.snakebody[0][1],'green',null]; this.snakebody.unshift(newjie);//向数组的开头添加一个或更多元素，并返回新的长度 //生成一个新食物 food.showfood(); } //规定小蛇在地图范围移动 if(xSnake>39 || xSnake<0 || ySnake>19 || ySnake<0){ alert('挂了'); clearInterval(mytime); return false; } //蛇头吃到自己的判断 for(var i=0; i<this.snakebody.length-1; i++){ //蛇头坐标 是否 等于任何一个蛇节的坐标 if(xSnake==this.snakebody[i][0] && ySnake==this.snakebody[i][1]){ alert('咬到自己了'); clearInterval(mytime); return false; } } //根据新坐标重新绘制小蛇 this.showsnake(); } } window.onload = function(){ var map = new Map(); map.showmap(); food = new Food(); food.showfood(); snake = new Snake(); snake.showsnake(); mytime = setInterval('snake.movesnake()',200); document.onkeyup = function(ev){ switch(ev.keyCode){ case 37: snake.redirect = "left"; break; case 38: snake.redirect = "up"; break; case 39: snake.redirect = "right"; break; case 40: snake.redirect = "down"; break; } } } </script>
    <style> body{ margin:0;} </style>
    </head>
    <body>
    </body>
    </html>

[20160913182546953]: /images/20220717/c38a2cd98291491aaea28f9de341b4a5.png