随机移动的小方块

最新推荐文章于 2023-09-24 11:22:30 发布
最新推荐文章于 2023-09-24 11:22:30 发布
阅读量641 收藏
点赞数
分类专栏： javascript 文章标签： Chrome prototype Mootools IE Safari
前段时间在问答里面看到一个问题，一个方块在每次上下左右移动一步的情况下，经过n步移动到终点。
试着写了一个 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Untitled Document</title>
		<style type="text/css">
			body{
				margin:0;
				padding:0;
			}
			#box{
				position:absolute;
				left:0;
				top:0;
				width:30px;
				height:30px;
				background-color:#f00;
			}
			.contaier{
				width:210px;
				height:210px;
				border-right:1px solid #333;
				border-bottom:1px solid #333;
				padding:0;
				margin:0;
			} .contaier dd{
				width:29px;
				height:29px;
				border-top:1px solid #333;
				border-left:1px solid #333;
				float:left;
				margin:0;
			}
			.step{
				margin-top:10px;
			}
			#step{
				width:50px;
			}
		</style>
	</head>
	<body>

		<dl class="contaier">
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
			<dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd><dd></dd>
		</dl>
		<div class="step">
			请输入步骤：<input type="text" id="step" /><input type="button" value="go" id="start" />
		</div>

		<div id="box"></div>
		<p>红色方块经过n步后，移动到最后一格</p>
		<script src="http://www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript">
			google.load('mootools','1.2.1');
		</script>
		<script type="text/javascript">
			var Box = function(id,n,temp){
				this.id = id;
				this.n = n.toInt();
				this.temp = temp;
			}
			Box.prototype.randomTemp = function(){
				if (!this.n) {
						return alert('请填写步骤数')
					}
					if(this.n<this.temp*2){
						return alert(this.n+'小于最少步骤数，请填写大一点 的数字')
					}
					var n = this.n;
					var temp = this.temp;
					var x=[];
					var y=[];
					var s={
						'x':[],
						'y':[],
					}
					x[n-1]=null;

					//x,y前半段,和=temp;
					(temp*2).times(function(i){
						if(i<temp){
							x[i]=1;
							y[i]=0;
						}else{
							x[i]=0;
							y[i]=1;
						}
					});

					//x,y的后半段，后半段和=0;
					var i = temp*2;
					var l = n;
					if(l-i == 0){return s;}
					while(i<l){
						if(i+1 == l){
							x[i]=0;
							y[i]=0;
							return s;
						}
						x[i] = $random(1,4);
						x[i] = x[i] == 3 ? -1 : x[i] ==2 ? 0 : x[i]==1 ? 0 : 1;
						y[i] = x[i] == 0 ? -1 : 0;
						x[i+1] = 0-x[i];
						y[i+1] = 0-y[i];
						i = i+2;
					}

					//对x,y两个数组进行随机排序 , 且满足：
					//  0 <= x[0]+x[1] + ... + x[n] <= temp;
					//  0 <= y[0]+y[1] + ... + y[n] <= temp;
					var p=0;
					var h={
						x:0,
						y:0
					};
					(n).times(function(i){
						if(l==0){return;}
						p= $random(1,l) -1;
						h.x = h.x + x[p];
						h.y = h.y + y[p];
						while( h.x<0 || h.x>temp || h.y<0 || h.y>temp){
							h.x = h.x -x[p];
							h.y = h.y -y[p];
							p= $random(1,l) -1;
							h.x = h.x + x[p];
							h.y = h.y + y[p];
						}
						s.x[i] = x[p];
						s.y[i] = y[p];
						x.splice(p,1);
						y.splice(p,1);
						l--;
					});
					return s;
			};
			Box.prototype.move = function(){
				if(!$(this.id)){
						return
					}
					var that = this;
					var id = $(this.id);
					this.left = 0;
					this.top = 0;
					var i=0;
					var s = this.randomTemp();
					this.m = new Fx.Morph(id,{
						link:'chain',
						onComplete:function(){
							i++;
							if(i==s.x.length){return}
							return that.go(s.x[i],s.y[i]);
						}
					});
					return this.go(s.x[i],s.y[i]);
			}
			Box.prototype.go = function(x,y){
				    this.left += x*30;
					this.top += y*30;
					return this.m.start({
						'left':this.left,
						'top':this.top
					})
			}

			window.addEvent('domready',function(){


				var div_x = new Element('p');
			    var div_y = new Element('p');

				$('start').addEvent('click',function(e){
					e.stop();

					var n = $('step').value;
					if (!n) {
						return alert('请填写步骤数')
					}
					if(n<6*2){
						return alert(n+'小于最少步骤数，请填写大一点 的数字')
					}

					var b = new Box('box',n.toInt(), 6);
					b.move();



					//x,y两个数组值
					div_x.set('text','x= '+ b.randomTemp().x);
					div_y.set('text','y= '+b.randomTemp().y);
					$$('body')[0].adopt(div_x, div_y);
				})



			})
		</script>
	</body>
</html>

dxtiger
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
俄罗斯小方块
08-21
5. **算法**：编写算法来生成随机的方块序列，以及判断当前方块能否放下、能否与已有方块合并以及行消除。 6. **动画效果**：通过更新游戏状态并在每次间隔后重绘画面，实现方块平滑下落的效果。 7. **状态管理**...
小案例-方块在浏览器页面随意移动
qq_44681872的博客
01-03 280
布局部分 <div id="box"></div> 样式部分 *{ margin: 0; padding: 0; font-family: "Microsoft Yahei"; } #box{ position: absolute; left: 100px; top: 100px;
JavaScript学习笔记26
学习记录
04-28 617
五、事件处理模型 — 事件冒泡、捕获 事件处理的两个模型：事件冒泡、捕获（不能同时存在） 只点了黄色区域，但是出现了 box,content,wrapper，往下漏了，就是事件冒泡 1、事件冒泡： 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上） 结构上存在父子关系的元素，如果点击到子元素，会一级级向父元素传递这个事件（从代码的角度是自底向上一层层冒泡的） 例：加了 margin，只点黄色的，还是出现了 box,content,wrap
JS动画随机移动效果和键盘控制移动效果
m0_47673203的博客
07-06 250
多个对象进行移动时使用onclick=("this")来获取当前点击对象，下面通过obj来获得参数，并根据offsetTop和offsetLeft获取对象当前的坐标值。然后根据活动区域生成一个随机数，由于活动区域的长为1200，所以生成随机数0-1200，作为移动到边界的横坐标值。根据document.onkeydown获取键盘输入,并根据keyCode识别键盘输入的数据，从而实现板的移动。当小球移动到边界时进行反转，从而实现镜像移动。
【具有路由 WSN 模拟器的随机方式移动】具有路由 WSN 模拟器的随机方式移动（Matlab代码实现）
最新发布
weixin_67304359的博客
09-24 31
这种随机的节点移动模拟了真实世界中节点的行为，因为无线传感器网络中的节点通常不会按照固定的轨迹移动。最后，我们评估了我们提出的方法的效果和性能。我们通过比较在使用我们的方法时的数据传输延迟、能耗和网络吞吐量等指标与使用其他方法时的指标，来评估我们的方法的优劣。通过这些工作步骤，我们能够更好地理解路由 WSN 模拟器的随机方式移动，并评估其在无线传感器网络中的应用效果和性能。我们的研究对于改进无线传感器网络的路由策略和性能优化具有重要意义，并可以为实际网络部署提供有价值的参考。行百里者，半于九十。
js案例一 :方块拖动效果
weixin_51040108的博客
09-04 771
js案例一 :方块拖动效果
Unrand-font：非随机字体家族的存储库
02-05
在使用Unrand-font的过程中，设计师可以将这些像素艺术字体应用到各种创意项目中，如游戏界面、网站设计、移动应用、海报制作等。它们不仅能够为作品增添独特的视觉效果，还可以通过像素艺术的风格唤起观众的情感...
拼图游戏 切图 移动方格
03-07
拼图游戏的基本原理是将一幅完整的图像分割成若干个小方块，然后随机打乱这些方块的位置。在【标签】中，“拼图”和“拼图游戏”是关键词，暗示了游戏的核心玩法。游戏的实现涉及图像处理，包括读取图片、切割图片...
VC++小游戏
11-14
在这个游戏中，一个随机生成的道路和一个可移动的小方块是主要元素，玩家可以通过键盘输入来控制小方块的移动方向，增加了互动性与趣味性。 首先，我们要理解的是**VC++**，这是微软提供的一个集成开发环境（IDE）...
俄罗斯方块10游戏
07-14
这些方块由不同形状的小方块组合而成，如一字型、T型、L型等。方块的颜色设定同样关键，通常有多种颜色以增加视觉效果，通过取方块颜色函数实现。 画方块是指在游戏区域内显示当前方块的过程。当方块被放置或移动时...
JS写的一个方块移动游戏
03-27
NULL 博文链接：https://zjixuanlv.iteye.com/blog/1159829
js 方框随键盘移动
m0_52946104的博客
09-21 260
方块随键盘移动
JS控制方块自动移动
wyjie1987的专栏
01-30 4502
通过JS的setTimeout事件来控制一个小方块绕屏幕移动： function autoMoveBox() { //debugger; var windowHeight = window.innerHeight; var windowWidth = window.innerWidth; var box = document.getElementById(
JavaScript随机方块
M_X_B_MR_L的博客
12-06 652
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随机方块</title> <link rel="stylesheet
js面向对象实现随机方块效果
weixin_43389331的博客
05-12 631
先看看效果在看分析：https://codepen.io/iyouu/pen/MdebQO 首先，分析对象，面向对象写，面向过程是分析如何一步一步实现方块，每一步骤都清晰明了。这里面向对象： 1、把方块看成一个对象； 2、工具对象；生成随机数封装成函数。不同功能的函数放到不同的对象中。 相关面向对象的东西这里就不写了，可以自己去网上搜索。 HTML代码： <!DOCTYPE html&g...
js实现小方块上下左右移动
蒲小若的博客
08-16 9748
#box{ width: 50px; height: 50px; position: absolute; background: palevioletred; } stop var speed = 10; var flag = true; var interId; function moveLeft(){
随机移动的小方块js
05-31
好的，以下是一个简单的随机移动小方块的 JavaScript 代码示例： ```javascript // 获取小方块元素 const box = document.querySelector('.box'); // 随机移动函数 function moveBox() { // 生成随机数作为 left 和 top 的值 const left = Math.floor(Math.random() * window.innerWidth); const top = Math.floor(Math.random() * window.innerHeight); // 设置小方块的位置 box.style.left = left + 'px'; box.style.top = top + 'px'; } // 每 2 秒调用一次随机移动函数 setInterval(moveBox, 2000); ``` 这段代码会获取一个类名为 `box` 的元素，然后定义一个 `moveBox` 函数用于随机移动小方块。`moveBox` 函数会在每 2 秒内生成新的随机坐标，并将小方块移动到该位置。最后，使用 `setInterval` 函数来调用 `moveBox` 函数以实现持续的随机移动效果。您可以将这段代码放入 HTML 文件中的 `<script>` 标签内来运行它。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值