1.2048游戏
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="2048.css"/>
<script src="2048.js" ></script>
</head>
<body>
<div class="box">
<!-- 背景格 -->
<div class="grid" id="g00"></div>
<div class="grid" id="g01"></div>
<div class="grid" id="g02"></div>
<div class="grid" id="g03"></div>
<div class="grid" id="g10"></div>
<div class="grid" id="g11"></div>
<div class="grid" id="g12"></div>
<div class="grid" id="g13"></div>
<div class="grid" id="g20"></div>
<div class="grid" id="g21"></div>
<div class="grid" id="g22"></div>
<div class="grid" id="g23"></div>
<div class="grid" id="g30"></div>
<div class="grid" id="g31"></div>
<div class="grid" id="g32"></div>
<div class="grid" id="g33"></div>
<!-- 前景格 -->
<div class="cell" id="c00"></div>
<div class="cell" id="c01"></div>
<div class="cell" id="c02"></div>
<div class="cell" id="c03"></div>
<div class="cell" id="c10"></div>
<div class="cell" id="c11"></div>
<div class="cell" id="c12"></div>
<div class="cell" id="c13"></div>
<div class="cell" id="c20"></div>
<div class="cell" id="c21"></div>
<div class="cell" id="c22"></div>
<div class="cell" id="c23"></div>
<div class="cell" id="c30"></div>
<div class="cell" id="c31"></div>
<div class="cell" id="c32"></div>
<div class="cell" id="c33"></div>
</div>
</body>
</html>
css页面
.box{
width: 480px;
height: 480px;
background-color: #B9ADA0;
margin: 0 auto;
position: relative;
border-radius: 6px;
}
.grid,.cell{
width: 100px;
height: 100px;
border-radius: 6px;
}
.grid{
float: left;
background-color: #CAC1B4;
margin: 16px 0 0 16px;
}
.cell{
position: absolute;
font-size: 50px;
text-align: center;
line-height: 100px;
color: white;
}
#c00,#c01,#c02,#c03{top:16px}
#c10,#c11,#c12,#c13{top:132px}
#c20,#c21,#c22,#c23{top:248px}
#c30,#c31,#c32,#c33{top:364px}
#c00,#c10,#c20,#c30{left:16px}
#c01,#c11,#c21,#c31{left:132px}
#c02,#c12,#c22,#c32{left:248px}
#c03,#c13,#c23,#c33{left:364px}
/* 每个数字的样式 */
.n2{background-color: #eee3da;}
.n4{background-color: #ede0c8;}
.n8{background-color: #93c;}
.n16{background-color: #a6c;}
.n32{background-color: #09c;}
.n64{background-color: #9c0;}
.n128{background-color: #edcc61;}
.n256{background-color: #edcf72;}
.n512{background-color: #f65e3b;}
.n1024{background-color: #33b5e5;}
.n2048{background-color: #f67c5f;}
.n4096{background-color: #f59563;}
.n8192{background-color: #f2b179;}
.n2,.n4{color: #776e65;}
.n1024,.n2048,.n4096,.n8192{font-size: 40px;}
javascript页面
var game = {
RN: 4,
CN: 4,
data: [],
//1.开始游戏的方法
start: function() {
//初始化二维数组
for (var r = 0; r < this.RN; r++) {
this.data[r] = [] //每遍历一行就创建一个空的子数组对象
for (var c = 0; c < this.CN; c++) {
this.data[r][c] = 0
}
}
//Math.random()*(max-min+1)+min
//2.找一个随机的位置产生随机数
this.randomNum()
this.randomNum()
this.updateView()
console.log(this.data.join("\n"))
},
//2.找一个随机的位置产生随机数
randomNum: function() {
if(!this.isFull()){
while (true) {
//随机生成一个行下标,保存在r中 0-3
r = parseInt(Math.random() * this.RN)
c = parseInt(Math.random() * this.CN)
if (this.data[r][c] == 0) {
//三目
this.data[r][c] = Math.random() < 0.1 ? 4 : 2
break
}
}
}
},
//3.判断格子是否满员
isFull: function() {
for (var r = 0; r < this.data.length; r++) {
for (var c = 0; c < this.data[r].length; c++) {
if (this.data[r][c] == 0) {
return false
}
}
}
return true
},
//4.渲染数据到页面中
updateView: function() {
for (var r = 0; r < this.data.length; r++) {
for (var c = 0; c < this.data[r].length; c++) {
var div = document.getElementById("c" + r + c)
//如果当前位置的元素值!=0,说明当前对应的元素中放有对应的数字
if (this.data[r][c] != 0) {
div.innerHTML = this.data[r][c]
div.className = "cell n" + this.data[r][c]
} else {
//重置样式
div.innerHTML = ""
div.className = "cell"
}
}
}
},
//6.整体左移
moveLeft: function() {
//8.移动所有行之前先以字符串形式保存一个界面
var before = this.data.toString()
for (var r = 0; r < this.data.length; r++) {
this.moveleftInrow(r)
}
var after = this.data.toString()
if (before !=after) {
//产生一个随机数
this.randomNum()
//渲染页面
this.updateView()
}
},
//5.左移(单行)
moveleftInrow: function(r) {
for (var c = 0; c < this.data[r].length - 1; c++) {
//从c位置开始找下一个不为0的位置下标
var next = this.getrightNext(r, c)
if (next == -1) {
//没找到就没有后续操作
break
} else {
//如果自己为0
//下一个位置的值替换自己,下一位置设为0
if (this.data[r][c] == 0) {
this.data[r][c] = this.data[r][next]
this.data[r][next] = 0
c--
}
//如果自己不为0
else if (this.data[r][c] == this.data[r][next]) {
this.data[r][c] *= 2
this.data[r][next] = 0
}
}
}
},
//7.获取下一个不为0的元素的下标
getrightNext: function(r, c) { //从当前r行c列开始往右找下一个不为0的值
//从c+1开始遍历之后的所有元素
for (var next = c + 1; next < this.data[r].length; next++) {
if (this.data[r][next] != 0) {
return next
}
}
return -1
},
//整体右移
moveRight:function(){
var before=this.data.toString()
for(var r=0;r<this.data.length;r++){
this.moverightInrow(r)
}
var after=this.data.toString()
if (before != after) {
//产生一个随机数
this.randomNum()
//渲染页面
this.updateView()
}
},
//单行右移
moverightInrow:function(r){
for(var c=this.data[r].length-1;c>0;c--){
var prev=this.getleftNext(r,c)
if(prev==-1){
break
}else{
if(this.data[r][c]==0){
this.data[r][c]=this.data[r][prev]
this.data[r][prev]=0
c++
}else if(this.data[r][c]==this.data[r][prev]){
this.data[r][c]*=2
this.data[r][prev]=0
}
}
}
},
//找上一个不为0的元素的下标
getleftNext:function(r,c){
//prev从c-1开始,到0结束每次递减1
for(var prev=c-1;prev>=0;prev--){
if(this.data[r][prev]!=0){
return prev
}
}
return -1
},
//上移
moveUp:function(){
var before=this.data.toString()
for(var c=0;c<this.CN;c++){
this.moveIncol(c)
}
var after=this.data.toString()
if (before != after) {
//产生一个随机数
this.randomNum()
//渲染页面
this.updateView()
}
},
moveIncol:function(c){
for(var r=0;r<this.data.length-1;r++){
var down=this.moveDown(r,c)
if(down==-1){
break
}else{
if(this.data[r][c]==0){
this.data[r][c]=this.data[down][c]
this.data[down][c]=0
r--
}else if(this.data[r][c]==this.data[down][c]){
this.data[r][c]*=2
this.data[down][c]=0
}
}
}
},
moveDown:function(r,c){
for(var down=r+1;down<this.data.length;down++){
if(this.data[down][c]!=0){
return down
}
}
return -1
},
//下移
moveNext:function(){
var before=this.data.toString()
for(var c=0;c<this.CN;c++){
this.movenextIncol(c)
}
var after=this.data.toString()
if(before!=after){
this.randomNum()
this.updateView()
}
},
movenextIncol:function(c){
for(var r=this.data.length-1;r>0;r--){
var up=this.getUp(r,c)
if(up==-1){
break
}else{
if(this.data[r][c]==0){
this.data[r][c]=this.data[up][c]
this.data[up][c]=0
r++
}else if(this.data[r][c]==this.data[up][c]){
this.data[r][c]*=2
this.data[up][c]=0
}
}
}
},
getUp:function(r,c){
for(var up=r-1;up>=0;up--){
if(this.data[up][c]!=0){
return up
}
}
return -1
}
}
onload = function() {
game.start()
document.onkeydown = function() {
var e = window.event || arguments[0]
if (e.keyCode == 37) {
game.moveLeft()
}
if(e.keyCode==39){
game.moveRight()
}
if(e.keyCode==38){
game.moveUp()
}
if(e.keyCode==40){
game.moveNext()
}
}
}
2.4位随机验证码(正则表达式)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//62个备选字符随机生成4位验证码
var chars=[];//62个备选字符保存在chars中
//unicode号从48号开始到58结束生成 0-9
for(var u=48;u<58;u++){
chars.push(String.fromCharCode(u))
}
//A-Z
for(var u=65;u<91;u++){
chars.push(String.fromCharCode(u))
}
//a-z
for(var u=97;u<123;u++){
chars.push(String.fromCharCode(u))
}
//声明一个函数专门获取随机4位字符的随机验证码
function getCode(){
var code=[];//将随机到的4位字符临时保存在code中
/*反复随机chars数组中的下标,同时把对应的值压入到code中
直到code.length<4退出循环*/
while(code.length<4){
var i=parseInt(Math.random()*62)//0-61
code.push(chars[i])
}
return code.join("")//code返回到外部使用
}
var code=getCode()
var input=""
//请用户反复输入验证码,直到输入正确为止
while((input=prompt("请输入验证码:"+code)).toUpperCase()!=code.toUpperCase()){//prompt-输入框
alert("验证码错误,请重新输入")//alert-警告框
code=getCode()//输入错误后获取一个新的验证码
}
alert("验证通过")
</script>
</head>
<body>
</body>
</html>