原生javascript制作盖房子小游戏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盖房子</title>
		<style>
			@keyframes diaoluo {
    
				from {
    
					opacity: 1;
					margin-top: 0;
					transform: rotate(0);
				}
				to {
    
					opacity: 0;
					margin-top: 100px;
					transform: rotate(720deg);
				}
			}
			
			* {
    
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.wrap {
    
				width: 800px;
				height: 500px;
				border: 1px solid red;
				margin: 0 auto;
				position: relative;
			}
			
			ul {
    
				width: 400px;
				height: 20px;
				position: absolute;
			}
			
			li {
    
				width: 20px;
				height:
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
游戏说明:<br>一个5*5的方格 打算往每个格子里放房子,有4种颜色的房子 <br>蓝色的房子 占10人口 随便放在哪里都行 <br>红色的房子 占20人口 要求和蓝色的房子相邻 <br>绿色的房子 占30人口 要求和蓝色,红色的房子相邻 <br>黄色的房子 占40人口 要求和蓝色,红色,绿色的房子相邻 <br>问 如何放置 才能使5*5的格子占用的人口数量最大?<br><br>操作说明:<br>拉动各颜色的房子到欲放置的格子处释放鼠标,如果格子符合该颜色房子的需求则房子成功放入,否则房子不放入,如:欲放黄色房子,则本格子上下左右需存在蓝绿红三种房子。 <br>单击任何一个格子弹出该格子当前可放入的房子选项,双击房子即可放入,或者选中其中一个后按回车或点选择亦可放入。 <br>双击有房子的格子或房子即可拆掉此房子。 <br>键盘操作: <br>按上下左右箭头可在表格内移动,当前格子背景色为黑色,如无选中则从第一行第一列开始,按回车后选择房子,按Delete或“.”为拆掉房子。 <br>如果弹出选择房子时,上下左右箭头为选择当前格子可用的房子(如:向放黄色房子需先在需要放置的格子上下左右格放好蓝绿红房子,方可选择),按下回车后此房子加入格子内,Esc键为不做选择并关掉选择房子。 <br>如果拆除房子的邻居有对本房子要求时本房子不可拆除,需先拆除对于本房子做要求的房子,如:想拆掉蓝色房子,但上下左右有红色房子则需先拆掉红色房子方可拆掉蓝色房子。
游戏说明:<br>一个5*5的方格 打算往每个格子里放房子,有4种颜色的房子 <br>蓝色的房子 占10人口 随便放在哪里都行 <br>红色的房子 占20人口 要求和蓝色的房子相邻 <br>绿色的房子 占30人口 要求和蓝色,红色的房子相邻 <br>黄色的房子 占40人口 要求和蓝色,红色,绿色的房子相邻 <br>问 如何放置 才能使5*5的格子占用的人口数量最大?<br><br>操作说明:<br>拉动各颜色的房子到欲放置的格子处释放鼠标,如果格子符合该颜色房子的需求则房子成功放入,否则房子不放入,如:欲放黄色房子,则本格子上下左右需存在蓝绿红三种房子。 <br>单击任何一个格子弹出该格子当前可放入的房子选项,双击房子即可放入,或者选中其中一个后按回车或点选择亦可放入。 <br>双击有房子的格子或房子即可拆掉此房子。 <br>键盘操作: <br>按上下左右箭头可在表格内移动,当前格子背景色为黑色,如无选中则从第一行第一列开始,按回车后选择房子,按Delete或“.”为拆掉房子。 <br>如果弹出选择房子时,上下左右箭头为选择当前格子可用的房子(如:向放黄色房子需先在需要放置的格子上下左右格放好蓝绿红房子,方可选择),按下回车后此房子加入格子内,Esc键为不做选择并关掉选择房子。 <br>如果拆除房子的邻居有对本房子要求时本房子不可拆除,需先拆除对于本房子做要求的房子,如:想拆掉蓝色房子,但上下左右有红色房子则需先拆掉红色房子方可拆掉蓝色房子。 <br>按Ctrl+Z可后退一步,如果后退后未再做操作按Ctrl+Y可前进一步,可多次后退或前进(在房子总数足够或后退步数足够的情况下),反之后退前进无效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值