简单记录一下上周写的两个前端小游戏:

<>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

//喜欢别忘了点赞呀

技术
©2019-2020 Toolsou All rights reserved,
01-C语言之父:丹尼斯·里奇为什么 Python 不是面向未来的编程语言?利用Python处理Excel数据——xlrd,xlwt库# C# 学习笔记(4) 类C语言中四种取整方式、取余/取模的运算以及负数取模的问题java两个对象比较属性值初学者学Python一定要知道他的基础算法有哪些?作用是什么?面试经常被问到-拉链表C++实现简单的通讯录管理系统利用Python处理Excel数据——pandas库