再来一个小游戏——原生js逐句解释开发简易版别踩白块，附源码

已于 2022-03-25 11:07:10 修改
阅读量4.1k 收藏 26
点赞数 4
分类专栏： JS 文章标签： javascript 原型模式 前端
于 2022-03-25 11:04:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30675607/article/details/122034257
版权

芜湖！没想到上个做扫雷的阅读量这么高（激动）
先捞一下：做个小项目~纯原生JS手把手逐句解释写一个扫雷小游戏（附源码）
快看↑
这次就做一个别踩白块吧哈哈哈哈哈
最终版演示地址：钢琴块

源码在最后！最后！

1.画格子

首先，我们不做那么复杂的，每行四个格子，只有一个黑色块，也没有高级的连按的格子
在这里插入图片描述
然后整体格子往下跑，上面生成新的格子，格子按错或者触底了还没按算输，按对了分数+1
似乎比扫雷简单很多（笑）

<html>
  <head>
    <meta charset="utf-8" />
    <title>别踩白块</title>
  </head>
  <body>
    <div id="main">
      <div id="con">
        <div class="row">
          <div class="cell"></div>
          <div class="cell black"></div>
          <div class="cell"></div>
          <div class="cell"></div>
        </div>
      </div>
    </div>
  </body>
</html>

自然而然，CSS就应该是

			* {
				margin: 0;
				padding: 0;
			}

			#con {
				display: flex;
				flex-direction: column-reverse;
				/*设置成竖轴的翻转轴，这样就能让块自动往下掉*/
				justify-content: center
			}

			.row {
				display: flex;
				width: 99%;
				height: 19vh;
				/*这里的高度并不一定是20%，
				我只是想一页有五个，
				如果改小了记得在init方法里把初始的格子的循环多来几次*/
				max-width: 750px;
				/*设置一个最大值，要不电脑端太宽了丑死了*/
			}

			.cell {
				width: 25%;
				height: 99%;
				border-left: 1px solid #CCC;
			}
			.black{
				background-color: #000
			}

如果还不太熟悉flex布局的小伙伴看这里：
===首先在父元素上添加display: flex;，子元素就会变成父元素的项目，默认按照主轴（默认是横轴）排列，flex-direction属性可以修改主轴，这里flex-direction: column-reverse;就修改成了竖轴的翻转轴，justify-content: center表示元素在主轴怎么排列，这里就是居中啦
更多的可以去菜鸟教程什么的看看，非常好学

目前看起来一切正常，我们先把html里的行结构去掉，换上开始游戏的按钮

2.添加开始游戏按钮

<button id="start" onclick="start()">开始游戏</button>

<!--按钮对应的CSS-->
			#start{
				width: 100%;
				height:100%;
				border:0;
				background-color: #000;
				color: #FFF;
				font-size: 25px;
			}
<!--虽然把按钮占满整个屏幕的做法很草率。。但是就先这样吧-->

然后我们就可以准备JS了

3.开始游戏并用js生成格子

既然我们要频繁的生成一行方块，毫无疑问封装一个生成行的函数非常有用，同时也封装一个生成格子的，会更方便一些

当然每个块块是随机的，所以我们定义一个数组，初始值都是cell，然后随机一个改成cell black

function create_row() {
	var list = ['cell', 'cell', 'cell', 'cell'];
	  var i = Math.floor(Math.random() * 4); 
	  list[i] = 'cell black';
	var newrow = document.createElement('div');
		newrow.className="row"
		newrow.appendChild(create_cell(list[0]))
		newrow.appendChild(create_cell(list[1]))
		newrow.appendChild(create_cell(list[2]))
		newrow.appendChild(create_cell(list[3]))
		document.getElementById("con").appendChild(newrow)
}
function create_cell(classname) {
	var newcell= document.createElement('div')
		newcell.className=`${classname}`
	return newcell
}

实现了这些东西东西之后，我们就能方便的考虑怎么开始这个游戏了
我们可以创建一个start方法，这个方法需要先生成几行格子，并且在div #main中添加时间监听，利用事件委托判断点击的是白块还是黑块：

function start(){
	document.getElementById("start").style.display="none"
	for(var i=0;i<5;i++){
	//如果前面格子高度改了，就对应改这里
		create_row()
	}
	document.getElementById('main').onclick = function (ev) {
	    ev = ev || event;
	    console.log(ev.target.classList);
	    //先打印出class留着备用
	  };
}

4.添加点击事件

到了这里，我们基本的框架都差不多了，我们可以开始完善方块的点击事件，如果点击的是黑块就消除这一行，如果是白块嘛，就GG
我们可以再定义一个函数is_black()，用来判断点击的是什么

function is_black(classList){
	if(classList.value.indexOf("black")!=-1){
		return true
	}
	return false
}

那么我们可以修改一下start：

	function start() {
		document.getElementById("start").style.display = "none"
		for (var i = 0; i < 5; i++) {
			create_row()
		}
		document.getElementById('main').onclick = function(ev) {
			ev = ev || event;
			if (is_black(ev.target.classList)) {
				ev.path[2].removeChild(ev.path[1])
				//这里path[1]是当前这一行，path[2]是整个div#con
				//然后从DOM删除这一行
			} else {
					GG();
					//失败了，执行的方法
			};
		};
	}

好！现在很有那个味道了
然后就是，点一个块，他就没了，我们得再生成一个
so easy！我们只用在刚刚的删除DOM后面加一个create_row()就好了
真是阶段性的胜利！

5.添加游戏失败和成功事件

随后GG()这个游戏失败的方法就很好写了：
黑白块点到错误的格子，会有变红变白的动画，咱们也要有！

			@keyframes flash
			{
			    0% {background: red;}
			    50% {background: white;}
				100% {background: red;}
			}
			.error_flash{
				animation: flash 1s;
				animation-iteration-count: infinite;
			}

不熟悉css动画的朋友记得去学一学哦
然后我们只要白块的点击事件给她加一个css就好了：

	function GG(eve) {
		eve.className += " error_flash"
		setTimeout(function() {
			alert("输啦");
			document.getElementById("start").style.display = "";
			document.getElementById("con").innerHTML = ""
		}, 3000)
	}

当然，在前面的调用GG()里，我们要把ev.target作为参数传过来

那怎么实现游戏结束呢？我们定义一个总长度就好了嘛，当黑块总数到这个长度了，也不再继续生成了，当所有黑块都点完了，就算赢

我们来总结一下源码

》》基础版源码

<html>
	<head>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#con {
				display: flex;
				flex-direction: column-reverse;
				/*这样就能让块自动往下掉*/
				justify-content: center
			}

			.row {
				display: flex;
				width: 99%;
				height: 19vh;
				/*这里的高度并不一定是20%，
				我只是想一页有五个，
				如果改小了记得在init方法里把初始的格子的循环多来几次*/
				max-width: 750px;
				/*设置一个最大值，要不电脑端太宽了丑死了*/
			}

			.cell {
				width: 25%;
				height: 99%;
				border-left: 1px solid #CCC;
			}

			.black {
				background-color: #000;
				border: 1px solid #CCC;
			}

			#start {
				width: 100%;
				height: 100%;
				border: 0;
				background-color: #000;
				color: #FFF;
				font-size: 25px;
			}

			@keyframes flash {
				0% {
					background: red;
				}

				50% {
					background: white;
				}

				100% {
					background: red;
				}
			}

			.error_flash {
				animation: flash 1s;
				animation-iteration-count: infinite;
			}
		</style>
		<meta charset="utf-8" />
		<title>别踩白块</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<button id="start" onclick="start()">开始游戏</button>
		<div id="main">
			<div id="con">

			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	let allNum=10,index=0
	function create_row() {
		index++
		var list = ['cell', 'cell', 'cell', 'cell'];
		var i = Math.floor(Math.random() * 4);
		if(index <= allNum){
		list[i] = 'cell black';}
		var newrow = document.createElement('div');
		newrow.className = "row"
		newrow.appendChild(create_cell(list[0]))
		newrow.appendChild(create_cell(list[1]))
		newrow.appendChild(create_cell(list[2]))
		newrow.appendChild(create_cell(list[3]))
		document.getElementById("con").appendChild(newrow)
	}

	function create_cell(classname) {
		var newcell = document.createElement('div')
		newcell.className = `${classname}`
		return newcell
	}

	function start() {
		index=0
		document.getElementById("start").style.display = "none"
		for (var i = 0; i < 6; i++) {
			create_row()
		}
		scroll(0,document.body.scrollHeight)
		document.getElementById('main').onclick = function(ev) {
			ev = ev || event;
			if (is_black(ev.target.classList)) {
				create_row()
				ev.path[2].removeChild(ev.path[1])
				if(index>=allNum+6){
					alert("win")
				}
			} else {
				GG(ev.target);
			};
		};
	}

	function is_black(classList) {
		if (classList.value.indexOf("black") != -1) {
			return true
		}
		return false
	}

	function GG(eve) {
		eve.className += " error_flash"
		setTimeout(function() {
			alert("输啦");
			document.getElementById("start").style.display = "";
			document.getElementById("con").innerHTML = ""
		}, 3000)
	}
</script>

到这里，其实主要功能已经结束了

花活1：添加动画

接下来我们来玩一点花活，比如让方块的消失有一点动态效果
我们可以利用css过渡，让方块的高度变成0，然后删除dom
先给*添加transition：

			* {
				margin: 0;
				padding: 0;
				transition: all 0.5s; 
			}

start方法变为

function start() {
		index=0
		document.getElementById("start").style.display = "none"
		for (var i = 0; i < 6; i++) {
			create_row()
		}
		scroll(0,document.body.scrollHeight)
		document.getElementById('main').onclick = function(ev) {
			ev = ev || event;
			if (is_black(ev.target.classList)) {
				create_row()
				ev.path[1].style.height="0px"
				//高度变为0
				setTimeout(function(){
					ev.path[2].removeChild(ev.path[1])
				},500)
				//0.5s后删除块，
				if(index>=allNum+6){
					setTimeout(function(){
						alert("win")
					},500)
				}
			} else {
				GG(ev.target);
			};
		};
	}

好！看着真棒
那我们来继续搞一搞花活吧
首先，我们添加一个计时器！
我们添加一个gametime的全局变量，在开始游戏是赋值计时器，游戏结束停止计时，看上去完美极了：

/*对应CSS*/
			.time_area{
				position:fixed;
				left: 50%;
				top:10%;
				font-size: 22px;
			}

//全局添加
let gametime = null,
		time = 0


//start()变为
	function start() {
		index = 0
		gametime = setInterval(() => {
			time++
			document.getElementById("time_area").innerHTML=`${Math.floor(time/60)}"${time - 60*Math.floor(time/60)}`
		}, 50)
		document.getElementById("start").style.display = "none"
		for (var i = 0; i < 6; i++) {
			create_row()
		}
		scroll(0, document.body.scrollHeight)
		document.getElementById('main').onclick = function(ev) {
			ev = ev || event;
			if (is_black(ev.target.classList)) {
				create_row()
				ev.path[1].style.height = "0px"
				setTimeout(function() {
					ev.path[2].removeChild(ev.path[1])
				}, 500)
				if (index >= allNum + 6) {
					setTimeout(function() {
						alert("win");
						clearInterval(gametime)
					}, 500)
				}
			} else {
				GG(ev.target);
			};
		};
	}

//GG()变为
	function GG(eve) {
		clearInterval(gametime)
		eve.className += " error_flash"
		setTimeout(function() {
			alert("输啦");
			document.getElementById("start").style.display = "";
			document.getElementById("con").innerHTML = ""
		}, 2000)
	}

欧吼吼吼吼看着真不错
这是目前为止，实现了所有功能的源码：

》》有动画版源码

<html>
	<head>
		<style>
			* {
				margin: 0;
				padding: 0;
				transition: all 0.5s;
			}

			#con {
				display: flex;
				flex-direction: column-reverse;
				/*这样就能让块自动往下掉*/
				justify-content: center
			}

			.row {
				display: flex;
				width: 99%;
				height: 19vh;
				/*这里的高度并不一定是20%，
				我只是想一页有五个，
				如果改小了记得在init方法里把初始的格子的循环多来几次*/
				max-width: 750px;
				/*设置一个最大值，要不电脑端太宽了丑死了*/
			}

			.cell {
				width: 25%;
				height: 99%;
				border-left: 1px solid #CCC;
			}

			.black {
				background-color: #000;
				border: 1px solid #CCC;
			}

			#start {
				width: 100%;
				height: 100%;
				border: 0;
				background-color: #000;
				color: #FFF;
				font-size: 25px;
			}

			@keyframes flash {
				0% {
					background: red;
				}

				50% {
					background: white;
				}

				100% {
					background: red;
				}
			}

			.error_flash {
				animation: flash 1s;
				animation-iteration-count: infinite;
			}
			.time_area{
				position:fixed;
				left: 50%;
				top:10%;
				font-size: 22px;
			}
		</style>
		<meta charset="utf-8" />
		<title>别踩白块</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<button id="start" onclick="start()">开始游戏</button>
		<div id="main">
			<div id="con">

			</div>
		</div>
		<div class="time_area" id="time_area"></div>
	</body>
</html>
<script type="text/javascript">
	let allNum = 10,
		index = 0
	let gametime = null,
		time = 0

	function create_row() {
		index++
		var list = ['cell', 'cell', 'cell', 'cell'];
		var i = Math.floor(Math.random() * 4);
		if (index <= allNum) {
			list[i] = 'cell black';
		}
		var newrow = document.createElement('div');
		newrow.className = "row"
		newrow.appendChild(create_cell(list[0]))
		newrow.appendChild(create_cell(list[1]))
		newrow.appendChild(create_cell(list[2]))
		newrow.appendChild(create_cell(list[3]))
		document.getElementById("con").appendChild(newrow)
	}

	function create_cell(classname) {
		var newcell = document.createElement('div')
		newcell.className = `${classname}`
		return newcell
	}

	function start() {
		index = 0
		gametime = setInterval(() => {
			time++
			document.getElementById("time_area").innerHTML=`${Math.floor(time/60)}"${time - 60*Math.floor(time/60)}`
		}, 50)
		document.getElementById("start").style.display = "none"
		for (var i = 0; i < 6; i++) {
			create_row()
		}
		scroll(0, document.body.scrollHeight)
		document.getElementById('main').onclick = function(ev) {
			ev = ev || event;
			if (is_black(ev.target.classList)) {
				create_row()
				ev.path[1].style.height = "0px"
				setTimeout(function() {
					ev.path[2].removeChild(ev.path[1])
				}, 500)
				if (index >= allNum + 6) {
					setTimeout(function() {
						alert("win");
						clearInterval(gametime)
					}, 500)
				}
			} else {
				GG(ev.target);
			};
		};
	}

	function is_black(classList) {
		if (classList.value.indexOf("black") != -1) {
			return true
		}
		return false
	}

	function GG(eve) {
		clearInterval(gametime)
		eve.className += " error_flash"
		setTimeout(function() {
			alert("输啦");
			document.getElementById("start").style.display = "";
			document.getElementById("con").innerHTML = ""
		}, 2000)
	}
</script>

花活2：添加音乐

我们知道，钢琴块点击是会播放声音的
我们也要！
上一个文章，我们介绍了AudioContext
捞一下：做个小钢琴~利用AudioContext获取振荡器并封装成光遇钢琴的样子

我们可以用利用数组，储存一首歌的旋律的音符的频率
用来生成黑块，点击黑块就播放这个声音
这里直接引用一段上面文章的代码

var son1=new AudioContext();
//创建AudioContext
var osc = son1.createOscillator()
//创建音频振荡器
var g = son1.createGain()
//获得音量控制器Gain
osc.connect(g)
//振荡器连接Gain
 osc.type = 'sine'
 //设置波形
 osc.frequency.value = 440
 //设置频率为440Hz，即中音la
g.connect(son1.destination)
//连接扬声器
g.gain.value = 1
//初始音高为1
osc.start();
//从时间轴的此时此刻当前开始发生
var stoptime = 1
osc.stop(stoptime);

这个可以播放一个一秒长的中音la
我们把他封装成一个函数：

var ctx
var sounds=[130,147,165,175,196,220,246,262,294,330,349,392,440,494,523,587,659,698,784,880,988,1047]
	function setContent(){
	    if(!ctx){
	        ctx = new AudioContext()
	    }
	}
	function makeSound(hz){
	    // 获得音频上下文
	    setContent();
	    //得到音频振荡器
	    var osc = ctx.createOscillator();
	    //得到音量控制对象
	    var g = ctx.createGain();
	    // 连接振荡器和音量控制对象
	    osc.connect(g);
	    osc.type = 'sine';
	    osc.frequency.value = hz;
	    var duration = 1;
	    g.connect(ctx.destination);
	    g.gain.value = 0;
	    osc.start();
	    g.gain.linearRampToValueAtTime(0.6,ctx.currentTime + 0.01)
	    osc.stop(ctx.currentTime + duration);
	    g.gain.exponentialRampToValueAtTime(0.01 , ctx.currentTime + duration)
	}

在这里补充一下乐理基础：

  1. 频率为波形的一个最小重复单元的长度，单位为Hz
  2. 第一国际音高为机械波440Hz，对应中音la，高音la为440折半，220，低音la为880（这里的高和低特指的是高八度和低八度），不过纯数字算出来的频率会让人听上去音调偏低
  3. 按照第一国际音高，从低8dao，到高8dao的频率约等于[130,147,165,175,196,220,246,262,294,330,349,392,440,494,523,587,659,698,784,880,988,1047]（加粗标出了基准点）

这里就给出最终版的源码了

》》能演奏的源码

<html>
	<head>
		<style>
			* {
				margin: 0;
				padding: 0;
				transition: all 0.5s;
			}

			#con {
				display: flex;
				flex-direction: column-reverse;
				/*这样就能让块自动往下掉*/
				justify-content: center
			}

			.row {
				display: flex;
				width: 99%;
				height: 19vh;
				/*这里的高度并不一定是20%，
				我只是想一页有五个，
				如果改小了记得在init方法里把初始的格子的循环多来几次*/
				max-width: 750px;
				/*设置一个最大值，要不电脑端太宽了丑死了*/
			}

			.cell {
				width: 25%;
				height: 99%;
				border-left: 1px solid #CCC;
			}

			.black {
				background-color: #000;
				border: 1px solid #CCC;
			}

			#start {
				width: 100%;
				height: 100%;
				border: 0;
				background-color: #000;
				color: #FFF;
				font-size: 25px;
			}

			@keyframes flash {
				0% {
					background: red;
				}

				50% {
					background: white;
				}

				100% {
					background: red;
				}
			}

			.error_flash {
				animation: flash 1s;
				animation-iteration-count: infinite;
			}
			.time_area{
				position:fixed;
				left: 50%;
				top:10%;
				font-size: 22px;
			}
		</style>
		<meta charset="utf-8" />
		<title>别踩白块</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<button id="start" onclick="start()">开始游戏</button>
		<div id="main">
			<div id="con">

			</div>
		</div>
		<div class="time_area" id="time_area"></div>
	</body>
</html>
<script type="text/javascript">
	let song=[0,0,2,0,0,2]
	//↑谱子
	var allNum = song.length,
		index = 0,
		create_index=0
	let gametime = null,
		time = 0
	let ctx
	var sounds=[130,147,165,175,196,220,246,262,294,330,349,392,440,494,523,587,659,698,784,880,988,1047]
	function create_row() {
		index++
		var list = ['cell', 'cell', 'cell', 'cell'];
		var i = Math.floor(Math.random() * 4);
		if (index <= allNum) {
			list[i] = 'cell black';
		}
		var newrow = document.createElement('div');
		newrow.className = "row"
		newrow.appendChild(create_cell(list[0]))
		newrow.appendChild(create_cell(list[1]))
		newrow.appendChild(create_cell(list[2]))
		newrow.appendChild(create_cell(list[3]))
		document.getElementById("con").appendChild(newrow)
	}

	function create_cell(classname) {
		var newcell = document.createElement('div')
		newcell.className = `${classname}`
		
		return newcell
	}

	function start() {
		index = 0
		gametime = setInterval(() => {
			time++
			document.getElementById("time_area").innerHTML=`${Math.floor(time/60)}"${time - 60*Math.floor(time/60)}`
		}, 50)
		document.getElementById("start").style.display = "none"
		for (var i = 0; i < 6; i++) {
			create_row()
		}
		scroll(0, document.body.scrollHeight)
		document.getElementById('main').onclick = function(ev) {
			ev = ev || event;
			if (is_black(ev.target.classList)) {
				create_row()
				makeSound(song[create_index])
				create_index++
				ev.path[1].style.height = "0px"
				setTimeout(function() {
					ev.path[2].removeChild(ev.path[1])
				}, 500)
				if (index >= allNum + 6) {
					setTimeout(function() {
						alert("win");
						clearInterval(gametime)
					}, 500)
				}
			} else {
				GG(ev.target);
			};
		};
	}

	function is_black(classList) {
		if (classList.value.indexOf("black") != -1) {
			return true
		}
		return false
	}

	function GG(eve) {
		clearInterval(gametime)
		if(eve.className!="cell")return
		eve.className += " error_flash"
		document.getElementById('main').onclick=null
		setTimeout(function() {
			alert("输啦");
			document.getElementById("start").style.display = "";
			document.getElementById("con").innerHTML = ""
		}, 2000)
	}

	function setContent(){
	    if(!ctx){
	        ctx = new AudioContext()
	    }
	}
	function makeSound(index){
	    // 获得音频上下文
	    setContent();
	    //得到音频振荡器
	    var osc = ctx.createOscillator();
	    //得到音量控制对象
	    var g = ctx.createGain();
	    // 连接振荡器和音量控制对象
	    osc.connect(g);
	    osc.type = 'sine';
	    osc.frequency.value = sounds[index];
	    var duration = 1;
	    g.connect(ctx.destination);
	    g.gain.value = 0;
	    osc.start();
	    g.gain.linearRampToValueAtTime(0.6,ctx.currentTime + 0.01)
	    osc.stop(ctx.currentTime + duration);
	    g.gain.exponentialRampToValueAtTime(0.01 , ctx.currentTime + duration)
	}
</script>

let song=[0,0,2,0,0,2]这一行是谱子
从0到20分别是从低音dao到高音si
[0,0,2,0,0,2]其实是葫芦娃的不知道家人们听出来没(乐
把葫芦娃完整地附上吧
[0, 0, 2, 0, 0, 2, 5, 5, 5, 4, 5, 4, 0, 2]

笨笨2019
关注
  • 4
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
js HTML5网页钢琴支持鼠标键盘控制的网页钢琴演奏代码
11-07
js HTML5网页钢琴支持鼠标键盘控制的网页钢琴演奏代码
网页版“别踩白块”实战笔记
sumisu666的博客
01-25 509
事件对象 • 什么是事件对象？ • 就是当你触发了一个事件以后，对该事件的一些描述信息 • 例如： ° 你触发一个点击事件的时候，你点在哪个位置了，坐标是多少 ° 你触发一个键盘事件的时候，你按的是哪个按钮 • 每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做 事件对象 • 浏览器给了我们一个 黑盒子，叫做 window.event ，就是对事件信息的所有描述 • 这个玩意很好用，但是一般来说，好用的东西就会有 兼容性问题 ，在 IE低版本里面这个东西好用，但是在 高版本IE 和
JS高级-分享一个别踩白块的小游戏（源码）
Spirit_Breeze的博客
07-09 4544
"我是Spirit_Breeze,中文&amp;lt;晟世清风&gt;,在这纷纷乱世之中,祈望能有一股清流之风." 本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究,欢迎研究讨论,转载请备注地址和作者,谢谢。第7章综合案例（别踩白块JS）整体思路：1：创建基本的静态页面；2：让div动起来3：动态创建Div4：动起来后，填补缺失的div 5：随机创建黑块6：绑定点击事件7：点...
基于Linux、QT、C++的“别踩白块儿”小游戏
G1842965496的博客
08-14 1937
基于Linux、QT、C++的“别踩白块儿”小游戏 一、功能实现 完善的游戏界面、游戏倒计时、得分记录、历史最高分显示 二、功能描述 1、界面为4*4，一行中只有一个黑块，使用qrand函数，采用时间种子保证 每次产生是随机数不同，在将随机数对4取余来作为黑块的位置。 2、初始时间设定值为30，通过定时器每100ms发出一次信号，刷新时间。 3、通过工厂模式，完成对黑块和白块的生产，并采用queue容器来储存块。 4、当玩家点击黑块时，delete队头的4个块并pop弹出，在加入4个新块， 最后将队列中所有
js 编写的简单游戏代码,js小游戏游戏代码大全
chatgpt002的博客
10-18 3922
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。操作方式：鼠标点击胜利条件：无失败条件：小鸟碰到了屏幕上下的水管就算失败看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
js 编写的简单游戏代码,javascript小游戏开发
神经网络爱好者
11-06 1291
戳这里拿原码👉github创建一个4 x 4的面板（HTML5表实现），总共16个格子。其中一个格子是空的，其他格子从1到15随机编号Deepl降重。可通过单击格子将当前空格子旁边的任何图块移入当前空格子。将格子按顺序逐行排列即为胜利✌️。当用户点击了与空格子不相邻的格子时，用户会收到提醒。这里就直接附上html的码，因为很短，就没什么好说的。
【微信小程序】别踩白块源码免费分享
九芒星的博客
04-26 3398
微信小程序“别踩白块”源码分享一、项目目录框架及配置1.文件框架（1）pages文件夹：（2）app.js（3）app.json（4）app.wxss（5）app.wxml（6）project.config.json（7）sitemap.json（8）utills文件夹（2）项目配置二、别踩白块结构分析1. 模块功能：2. 文件配置二、别踩白块各模块代码1. 全局配置（1）app.json（2）app.js（3）app.wxss（4）project.config.json2.首页配置（index）（1）i.
原生JS实现别踩白块小游戏.zip
05-15
里面是自己学习原生JavaScript时，敲的别踩小白块小游戏，仅供各位感兴趣的网友下载借阅，学习编程思维和编程逻辑。
js实现一款简单踩白块小游戏(曾经很火)
10-15
本文给大家分享原生js实现曾经很火的一款小游戏—别踩白块，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
cocos-js小游戏《别踩白块》游戏源码以及素材
04-04
cocos-js原生小游戏《别踩白块》游戏源码以及全套素材资源，可以查看预览运行效果。
七个精典JS写的游戏源码
06-19
精选七个精典JS写的游戏源码，如果你正需要开发游戏，又或者你想学习JS游戏开发，又或者你想更深入学习和参照高手的代码，相信它一定适合你
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发
08-29
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发，补充了上一版的欠缺的两个小程序代码。为全部《HTML+CSS3+JS动画小游戏开发》文档的源码
JS小游戏源码
04-22
各种js小游戏源码例如：微信打飞机， 泡泡龙，开心消消乐，架子鼓；所有代码均可正常运行，你值得拥有！
JavaScript简单小游戏
07-13
使用JavaScript简单做Html小游戏
原生微信小程序源码 - -小游戏-别踩白块
最新发布
05-01
原生微信小程序源码 - -小游戏-别踩白块 原生微信小程序源码 - -小游戏-别踩白块
h5和原生js实现别踩白块小游戏
07-31
h5和原生js实现别踩白块小游戏; 利用Html5和原生js,css实现的别踩白块小游戏,功能简单,提供给csdn博友们交流使用,希望大家能关注一下我的博客,谢谢大家
别踩白块html源码,原生JS实现别踩白块小游戏（七）
weixin_30092093的博客
06-22 509
在前面的文章《原生JS实现别踩白块小游戏(六)》中，为大家介绍了实现别踩白块小游戏的js代码中移动效果的方法概述。下面我们就继续结合源代码中js代码部分，为大家介绍具体的实现方法。相关js代码如下：//移动效果function move(obj) {//默认速度与计分var speed = 5, num = 0;obj.timer = setInterval(function () {//速度va...
C语言项目：别踩白块游戏（双人版），450行源码分享+详细思路
致力于C语言C++知识分享！
01-09 2495
这次我们制作的《别踩白块儿》是双人版的，可以支持你和你的朋友对战比赛哦！
html钢琴块游戏源码,好玩的钢琴块游戏
weixin_33833234的博客
06-03 602
时间：2021-06-02编辑：qingtian崩坏3黑轩辕怎么打?崩三黑轩辕是比较难打的副本，被玩家成为轩辕帝，因为很多玩家到在这这张图上，下面小编就为大家带本全网最详细最全图文攻略，祝各位舰长都能早日通过，感兴趣的小伙伴就来跟着小编来看看吧。时间：2021-06-02编辑：qingtian崩坏3探索关潜行刺杀任务怎么做?崩坏3探索关潜行刺杀是大多玩家都比较不想打的副本，但是有难于丰厚的奖励和报...
微信小程序云开发关于一个账本app包括首页登录的代码怎么写附源码
07-28
微信小程序云开发是一种云原生的开发模式，可以实现前端页面与后端云存储、云函数等的高度集成。下面是一个简单的账本应用的首页登录功能的代码示例： 1. 首先，在小程序的app.js文件中，初始化云开发环境： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

笨笨2019

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值