456主机测评
简单记录一下上周写的两个前端小游戏：
1.数字拼图
实现功能：：
- 随机生成数字顺序，每点击一次数字块，此数字块将向其相邻的
空白格移动一格，直至达到正确顺序（数字按照从左向右、从上至下依次排列）。 - 当达到正确顺序，游戏结束，并弹出
游戏结束对话框。 - 右上角记录所用时间，单击
暂停键可以暂停计时，单机重来键重新开始计时并生成新的数字序列。
（注：由于代码不够严谨，有一定几率产生出无解的数字顺序）
源代码如下：
html文件：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Puzzle</title> <link rel="stylesheet" type="text/css" href="puzzle.css"> <script type="text/javascript" src="puzzle.js"></script> </head> <body> <div id = "container"> <div id = "game"> <div id = "d1" onclick = "move(1)">1</div> <div id = "d2" onclick = "move(2)">2</div> <div id = "d3" onclick = "move(3)">3</div> <div id = "d4" onclick = "move(4)">4</div> <div id = "d5" onclick = "move(5)">5</div> <div id = "d6" onclick = "move(6)">6</div> <div id = "d7" onclick = "move(7)">7</div> <div id = "d8" onclick = "move(8)">8</div> </div> <!--游戏控制区--> <div id = "control"> <p> <rowspan id = "timeText">总用时</rowspan> <rowspan id = "timer"></rowspan> </p> <p> <rowspan id="start" onclick="start()">开始</rowspan> <rowspan id="reset" onclick="reset()">重来</rowspan> </p> </div> </div> </body> </html> CSS文件：
*{ padding:0; margin: 0; border:0; } body{ width:100%; height: 100%; } #container{ position: relative; width: 620px; height: 450px; margin: 0 auto; margin-top: 100px; border-radius: 1px; } #game{ position: absolute; width: 450px; height:450px; border-radius: 5px; display:inline-block; background-color:#ffe171; box-shadow: 0 0 10px #ffe171; } #game div{ position: absolute; width:148px; height: 148px; box-shadow: 2px 2px 4px #777; background-color: #20a6fa; color:white; text-align: center; font-size: 140px; line-height: 148px; cursor: pointer; -webkit-transition:0.3s; -moz-transition: 0.3s; } #game div:hover{ color:#ffe171; } #control{ width:150px; height:450; display: inline-block; float:right; } #control rowspan{ height:25px; font-size:20px; color:#222; margin-top:10px; } #start{ display: inline-block; font-size: 28px; width:100px; height: 28px; background-color: #20a6fa; color:#ffe171; text-shadow: 1px 1px 2px #ffe171; border-radius: 5px; box-shadow: 2px 2px 5px #4c98f5; text-align: center; cursor: pointer; } #start:hover{ background-color: #ffe171; } #reset:hover{ background-color: #ffe171; } #reset{ display: inline-block; font-size:28px; width: 100px; height: 28px; background-color: #20a6fa; color: #ffe171; text-shadow: 1px 1px 2px #ffe171; border-radius: 5px; box-shadow: 2px 2px 5px #4c98f5; text-align: center; cursor: pointer; } #d1{ left: 0px; } #d2{ left: 150px; } #d3{ left: 300px; } #d4{ top: 150px; left: 0px; } #d5{ top: 150px; left: 150px; } #d6{ top:150px; left: 300px; } #d7{ top:300px; left: 0px; } #d8{ left:150px; top: 300px; text-align: center; } Javascript文件：
var time = 0; var pause = true; var set_timer; var d = new Array(10); var d_direct = new Array( [0], [2,4], [1,3,5], [2,6], [1,5,7], [2,4,6,8], [3,5,9], [4,8], [5,7,9], [6,8] ); var d_posXY = new Array( [0], [0,0], [150,0], [300,0], [0,150], [150,150], [300,150], [0,300], [150,300], [300,300] ); d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0; function move(id){ var i=1; for(i = 1;i < 10;++i){ if(d[i] == id) break; } var target_d=0; target_d = whereCanTo(i); if(target_d != 0){ d[i] = 0; d[target_d]=id; document.getElementById("d"+id).style.left = d_posXY[target_d][0]+"px"; document.getElementById("d"+id).style.top = d_posXY[target_d][1]+"px"; } var finish_flag = true; for(var k=1;k<9;++k){ if(d[k]!=k){ finish_flag=false; break; } } if(finish_flag==true){ if(!pause) start(); alert("congratulations!"); } } function whereCanTo(cur_div){ var j = 0; var move_flag = false; for(j=0;j<d_direct[cur_div].length;++j){ if(d[d_direct[cur_div][j]]==0){ move_flag=true; break; } } if(move_flag == true){ return d_direct[cur_div][j]; }else{ return 0; } } function timer(){ time+=1; var min=parseInt(time/60); var sec=time%60; document.getElementById("timer").innerHTML=min+"分"+sec+"秒"; } function start(){ if(pause){ document.getElementById("start").innerHTML = "暂停"; pause = false; set_timer = setInterval(timer,1000); }else{ document.getElementById("start").innerHTML="开始"; pause=true; clearInterval(set_timer); } } function reset(){ time = 0; random_d(); if(pause) start(); } // function random_d(){ // for(var i=9;i>1;--i){ // var to=parseInt(Math.random()*(i-1)+1); // if(d[i]!=0){ // document.getElementById("d"+d[i]).style.left=d_posXY[to][0]+"px"; // document.getElementById("d"+d[i]).style.top=d_posXY[to][1]+"px"; // } // if(d[to]!=0){ // document.getElementById("d"+d[to]).style.left=d_posXY[i][0]+"px"; // document.getElementById("d"+d[to]).style.top=d_posXY[i][1]+"px"; // } // var tem=d[to]; // d[to]=d[i]; // d[i]=tem; // } // } function random_d(){ for(var i=9; i>1; --i){ var to=parseInt(Math.random()*(i-1)+1);//产生随机数，范围为1到i，不能超出范围，因为没这个id的DIV if(d[i]!=0){ document.getElementById("d"+d[i]).style.left=d_posXY[to][0]+"px"; document.getElementById("d"+d[i]).style.top=d_posXY[to][1]+"px"; } //把当前的DIV位置设置为随机产生的DIV的位置 if(d[to]!=0){ document.getElementById("d"+d[to]).style.left=d_posXY[i][0]+"px"; document.getElementById("d"+d[to]).style.top=d_posXY[i][1]+"px"; } //把随机产生的DIV的位置设置为当前的DIV的位置 var tem=d[to]; d[to]=d[i]; d[i]=tem; //然后把它们两个的DIV保存的编号对调一下 } } window.onload=function(){ reset(); } 2.别踩白块（网页版）
实现功能：
随机生成白块与黑块，且每行只有一个黑块。- 上方实时记录当前得分，每
点击一次黑块则得一分。 - 每次单击黑块将使其
变为白块，如有黑块触底则游戏结束。 - 游戏结束后弹出
最终得分对话框。
源代码如下：
html文件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>别踩白块</title> <link rel="stylesheet" href="BlackBlocks.css"> </head> <body> <h2>score</h2> <h2 id="score">0</h2> <div id="main"> <div id="con"></div> </div> <div class="btn"> <button class="start" onclick="start()">开始游戏</button> </div> </body> <script src="BlackBlocks.js"></script> </html> CSS文件：
#main{ width: 408px; height:408px; background:white; border:2px solid gray; margin:0 auto; overflow: hidden; } h2{ text-align: center; } #con{ width:100%; height: 400px; position: relative; top: -400px; border-collapse: collapse; } .row{ height: 100px; width: 100%; } .cell{ height: 100px; width: 100px; float: left; border:rgb(54,74,129) 1px solid; } .black{ background: black; } .btn{ width: 100%; text-align: center; } .start{ margin-top: 20px auto; width: 150px; height:50px; border-radius: 10px; background: yellowgreen; line-height: 50px; color: #fff; } Javascript文件：
function $(id){ return document.getElementById(id); } function creatediv(className){ var div = document.createElement("div"); div.className = className; return div; } var clock = null; var state = 0; var speed = 6; var flag = false; function start(){ if(!flag){ init(); }else{ alert('游戏已经开始，无需再次点击！'); } } function init(){ flag = true; for(var i=0;i<4;i++){ createrow(); } $('main').onclick = function(ev){ ev = ev||event judge(ev); } clock = window.setInterval('move()',30); } function createrow(){ var con = $('con'); var row = creatediv("row"); var arr = createcell(); con.appendChild(row); for(var i = 0;i<4;i++){ row.appendChild(creatediv(arr[i])); } if(con.firstChild == null){ con. appendChild(row); }else{ con.insertBefore(row,con.firstChild); } } function delrow(){ var con = $('con'); if(con.childNodes.length == 6){ con.removeChild(con.lastChild); } } function createcell(){ var temp = ['cell','cell','cell','cell',]; var i = Math.floor(Math.random()*4); temp[i] = 'cell black'; return temp; } function move(){ var con = $('con'); var top = parseInt(window.getComputedStyle(con,null)['top']); if(speed+top>0){ top=0; }else{ top+=speed; } con.style.top = top+'px'; over(); if(top == 0){ createrow(); con.style.top = '-101px'; delrow(); } } function speedup(){ speed += 2; if(speed == 20){ alert('你超神了！'); } } function over(){ var rows = con.childNodes; if((rows.length == 5)&&(rows[rows.length-1].pass!==1)){ fail(); } for(let i=0; i<rows.length; i++){ if(rows[i].pass1 == 1){ fail(); } } } function fail(){ clearInterval(clock); flag = false; confirm('你的最终得分 '+parseInt($('score').innerHTML)); var con = $('con'); con.innerHTML = ""; $('score').innerHTML = 0; con.style.top = '-408px'; } function judge(ev){ if(ev.target.className.indexOf('black')==-1&&ev.target.className.indexOf('cell')!=-1){ ev.target.parentNode.pass1 = 1; } if(ev.target.className.indexOf('black')!=-1){ ev.target.className = 'cell'; ev.target.parentNode.pass = 1; score(); } } function score(){ var newscore = parseInt($('score').innerHTML)+1; $('score').innerHTML = newscore; if(newscore%10 == 0){ speedup(); } } //update 2020.4.20
//喜欢别忘了点赞呀
- 海报
