Briefly record the two front-end games written last week :

<>1. Number Place

Realize function ::

* Randomly generated number sequence , Number block per click , This number block will move one space to its adjacent blank space , Until the correct sequence is reached ( Numbers from left to right , Arranged from top to bottom ).
* When the correct order is reached , game over , And pop up the game end dialog box .
* Record the time in the upper right corner , Click pause to pause the timing , The single machine restart key restarts the timing and generates a new number sequence .
( notes : Because the code is not rigorous enough , There is a certain chance to produce a numerical order without solution )

The source code is as follows :

html file :
<!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> <!-- Game control area --> <div id = "control"> <p> <rowspan id =
"timeText"> Total time </rowspan> <rowspan id = "timer"></rowspan> </p> <p> <rowspan
id="start" onclick="start()"> start </rowspan> <rowspan id="reset"
onclick="reset()"> Come again </rowspan> </p> </div> </div> </body> </html>
CSS file :
*{ 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 file :
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+" branch "+sec+" second "; } function start(){
if(pause){ document.getElementById("start").innerHTML = " suspend "; pause = false;
set_timer = setInterval(timer,1000); }else{
document.getElementById("start").innerHTML=" start "; 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);// Generate random number , Range is 1 reach i, Cannot exceed the range , Because there's no such thing id of 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"; }
// Put the current DIV The position is set to randomly generated DIV Location of 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"; }
// Randomly generated DIV The location of the is set to the current DIV Location of var tem=d[to]; d[to]=d[i]; d[i]=tem;
// Then take them both DIV Swap the saved numbers } } window.onload=function(){ reset(); }
<>2. Don't step on the white block ( Web version )

Realize function :

* Randomly generate white and black blocks , And there is only one black block in each row .
* The current score is recorded in real time above , One point will be obtained for each click on the black block .
* Each click on a black block turns it white , If a black block hits the bottom, the game is over .
* The final score dialog box pops up after the game .
The source code is as follows :

html file :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Don't step on the white block </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()"> Start the game </button> </div> </body> <script
src="BlackBlocks.js"></script> </html>
CSS file :
#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 file :
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(' The game has begun , No need to click again !'); } } 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(' You're super !'); } } 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(' Your final score
'+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

// Like it, don't forget to praise it

Technology
©2019-2020 Toolsou All rights reserved,
java Comparing attribute values between two objects utilize Python handle Excel data ——xlrd,xlwt library Bidirectional linked list Why? Python Not a future oriented programming language ?Python【 Assignment statement 】 Special lecture , You can't just a=b ah ! Suggest mastering ! utilize Python handle Excel data ——pandas library see SQL-SERVER Data volume and occupied space of database and each table PID The algorithm finally figured out the principle , It was so simple web Two front-end practical games ( Attached source code ) Beginners learn Python Be sure to know what his basic algorithms are ? What is the function ?