web前端实战小游戏两则（附源码）

最新推荐文章于 2024-08-18 15:23:48 发布

carfudero

最新推荐文章于 2024-08-18 15:23:48 发布

阅读量1.3w

点赞数 56

分类专栏： Learning_Code 文章标签： html5 css javascript

本文链接：https://blog.csdn.net/weixin_43408412/article/details/105647526

版权

Learning_Code 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

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

//喜欢别忘了点赞呀