旋转V字俄罗斯方块
实现效果如图，也就是一个图像的旋转。注意，旋转后的文字是相对应的，而且文字还是立起的。第一次点击时显示，第二次点击时开始旋转。下面是我做这个效果的记录，方法这么差，我也就不说什么了。
先上HTML/CSS部分，这部分都是相同的。JS放在 script 标签里。
<!--
Author: XiaoWen
Create a file: 2016-12-04 17:03:21
Last modified: 2016-12-05 17:34:58
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V字方块</title>
<style>
body{
padding: 100px;
}
ul,li{
margin: 0;
padding: 0;
list-style:none;
width:500px;
height:500px;
background: #ccc;
}
ul{
position: relative;
}
li{
width: 100px;
height: 100px;
background: #f00;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 16px;
font-weight:bold;
position:absolute;
display:none;
}
</style>
</head>
<body>
<button>旋转</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
//这里的 js 代码分次放在下面的文章里。
</script>
</body>
</html>
HTML/CSS
第一次实现的代码，一边写一边都感觉后怕……这是在写JS还是在写CSS？
代码太多了。不但多，而且感觉乱，条理不清晰，不易使用。
开始的思路是直接让所有方块相对于左边定位。
<script>
var w=100;
var l=0;
var t=0;
var dir=1;
var a_li=document.getElementsByTagName("ul")[0].getElementsByTagName("li");
var btn=document.getElementsByTagName("button")[0];
for(var i=0;i<a_li.length;i++){
a_li[i].style.display="none";
}
btn.onclick=function(){
for(var i=0;i<a_li.length;i++){
a_li[i].style.display="block";
}
l=0;
t=0;
i=0;
block(dir)
dir++
if(dir==5){
dir=1;
}
}
//dir 方向，1 left/2 top/3 right/4 bottom
function block(dir){
for(var i=0; i<a_li.length;i++){
switch(dir){
case 1:
/*左*/
if(i<2){
a_li[i].style.left=l*w+"px";
a_li[i].style.top=t*w+"px";
l++;
t++;
}else if(i==2){
console.log(l,t,i)
a_li[i].style.left=l*w+"px";
a_li[i].style.top=t*w+"px";
}else{
l--;
t++;
a_li[i].style.left=l*w+"px";
a_li[i].style.top=t*w+"px";
}
break;
case 2:
/*上*/
if(i<2){
a_li[i].style.left=((a_li.length-l)-1)*w+"px";
a_li[i].style.top=t*w+"px";
l++;
t++;
}else if(i==2){
console.log(l,t,i)
a_li[i].style.left=l*w+"px";
a_li[i].style.top=t*w+"px";
}else{
l--;
t--;
a_li[i].style.left=l*w+"px";
a_li[i].style.top=t*w+"px";
}
break;
case 3:
/*右*/
if(i<2){
a_li[i].style.left=((a_li.length-l)-1)*w+"px";
a_li[i].style.top=((a_li.length-t)-1)*w+"px";
l++;
t++;
}else if(i==2){
console.log(l,t,i)
a_li[i].style.left=l*w+"px";
a_li[i].style.top=t*w+"px";
}else{
l++;
t--;
a_li[i].style.left=l*w+"px";
a_li[i].style.top=t*w+"px";
}
break;
default:
/*下*/
if(i<2){
a_li[i].style.left=l*w+"px";
a_li[i].style.top=((a_li.length-t)-1)*w+"px";
l++;
t++;
}else if(i==2){
console.log(l,t,i)
a_li[i].style.left=l*w+"px";
a_li[i].style.top=t*w+"px";
}else{
l++;
t++;
a_li[i].style.left=l*w+"px";
a_li[i].style.top=t*w+"px";
}
}
}
}
</script>
代码一
第二次实现的代码。上面写的
开始寻找新思路，然后一直看图……
发现：元素在每一边上的位置都是相同的。有一个方向的位置只增不减，有一个方向有增有减。如函数：fk(fx1,fx2)。然后，这种方法写出来的效果显然不符合要求，5的位置应该是1，没事，反正这是一个思路而已，办法总是人想的，代码行数正在减少中……
<script>
//思路：先不考虑具体元素，只考虑元素的位置。
//元素在每一边上的位置都是相同的。有一个方向的位置只增不减，有一个方向有增有减。如函数：fk(fx1,fx2)
var w=100;
var btn_num=0;
var a_li=document.getElementsByTagName("ul")[0].getElementsByTagName("li");
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
btn_num++;
switch(btn_num){
case 1:
for(var i=0;i<a_li.length;i++){
a_li[i].style.display="block";
}
fk("left","top");
break;
case 2:
fk("top","left");
break;
case 3:
fk("right","top");
break;
default:
fk("bottom","left");
btn_num=0;
}
}
//fx1 增减方向， fx2仅增方向
function fk(fx1,fx2){
for(var i=0;i<a_li.length;i++){
/*下面这四行用来消除上次的位置*/
a_li[i].style.left="auto";
a_li[i].style.top="auto";
a_li[i].style.right="auto";
a_li[i].style.bottom="auto";
if(i>parseInt(a_li.length/2)){ //取出中间以上的元素
a_li[i].style[fx1]=(a_li.length-i-1)*w+"px"; //a_li.length-i-1相当于a_li.length-(i+1)，表示剩下的位置关系。
a_li[i].style[fx2]=i*w+"px";
}else{
a_li[i].style[fx1]=i*w+"px";
a_li[i].style[fx2]=i*w+"px";
}
}
}
</script>
代码二
第三次，感觉总算是像点样子了。思路：直接四个边分别考虑，元素只相对某一边定位。
<script>
//思路：直接四个边分别考虑，元素只相对某一边定位。
//
var w=100;
var btn_num=0;
var a_li=document.getElementsByTagName("ul")[0].getElementsByTagName("li");
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
btn_num++;
switch(btn_num){
case 1:
for(var i=0;i<a_li.length;i++){
a_li[i].style.display="block";
}
fk("left","top");
break;
case 2:
fk("top","right");
break;
case 3:
fk("right","bottom");
break;
default:
fk("bottom","left");
btn_num=0;
}
}
//fx1定位的方向， fx2开始增加方向(下一方向)
function fk(fx1,fx2){
for(var i=0;i<a_li.length;i++){
/*下面这四行用来消除上次的位置*/
a_li[i].style.left="auto";
a_li[i].style.top="auto";
a_li[i].style.right="auto";
a_li[i].style.bottom="auto";
/****/
a_li[i].style[fx1]=i*w+"px";
a_li[i].style[fx2]=i*w+"px";
if(i>parseInt(a_li.length/2)){
a_li[i].style[fx1]=(a_li.length-(i+1))*w+"px";
a_li[i].style[fx2]=i*w+"px";
}
}
}
</script>
代码三
第三次写的代码，感觉函数fk(fx1,fx2)的第二个参数的存在有点鸡肋。按分析fx2是能根据fx1算出来的（也就是如果第一个参数是top，第二个就是right。顺时针方向的下一个），所以其实不用这个参数也可以。
我最后还是要了，因为我的想法是，如果不要的话还得在函数里判断一下fx1的参数，配合已知的fx2继续计算。这就得多写几行判断语句了，大概得增加十行代码以上吧。所以就手工传送参数2（下一个方向）吧。
那么，还有没有更简单的方法呢？
旋转V字俄罗斯方块的更多相关文章
- js旋转V字俄罗斯方块
实现效果如图,也就是一个图像的旋转.注意,旋转后的文字是相对应的,而且文字还是立起的.第一次点击时显示,第二次点击时开始旋转.下面是我做这个效果的记录,方法这么差,我也就不说什么了. 先上HTML/C ...
- JS随机生成100个DIV每10个换行(换色，生成V字和倒V)
附图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- 原生js，一些小应用（逢10进一，生成V字，多个div抖动）
第一题:每隔10个div换一行.并且鼠标移入 改变opacity. <!DOCTYPE html> <html lang="en"> <head> ...
- 自动生成V字型
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 轮滑基础（一）（前摔，葫芦步，推步，A字转弯，弓步转弯）
轮滑新手入门推荐? [柚子陪你学轮滑轮滑教学]第一集 轮滑安全 1,站: 站立:脚可以成v字,或者平行,手放膝盖或者前伸.平行站立 膝盖相距一拳头左右,两腿间距略小于肩宽.膝盖略弯,腰下压,抬头挺胸 ...
- 60行JS实现俄罗斯方块
参考文献:http://www.cnblogs.com/jimaojin/p/5413857.html 原版: <!doctype html><html><head> ...
- V for Vendetta
V for Vendetta V字仇杀队 复仇者V 安迪·沃卓斯基 and Larry Wachowski 思想,是最强大的武器.因为,世界上的独裁政府,有一个共同特点就是推行洗脑和愚民政策. 经典台 ...
- 教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏
早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大 ...
- 俄罗斯方块游戏JavaScript代码
JavaScript代码俄罗斯方块游戏 早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用 ...
随机推荐
- js 获取 通过 ”？“ 或者 ”&“ url 传过来参数值
请先 引用 jQuery的js <script> String.prototype.GetValue=function(para) { var reg = new RegExp(" ...
- 《Cracking the Coding Interview 》之 二叉树的创建 与 遍历(非递归+递归version)
#include <iostream> #include <cstdio> #include <vector> #include <stack> #de ...
- Quartus 的管脚分配
与管脚分配相关的一些功能在assignments菜单下, Remove assignments... Back-Annotate Assignment... Import Assignment... ...
- 解决KDE桌面环境下Eclipse崩溃的问题--让Eclipse使用特定的GTK2主题运行
最近在Kubuntu14.04上安装Eclipse,由于Ubuntu软件中心中的版本太老(3.8),而且会自动安装OpenJDK,于是到官网下载最新的4.4版.(Luna,代号很有亲切感有木有,女神万 ...
- java核心知识点学习----多线程并发之线程同步
1.什么是线程同步? 多线程编程是很有趣的事情,它很容易出现"错误情况",这种情况不是由编码造成的,它是由系统的线程调度造成的,当使用多个线程来访问同一个数据时,很容易出现&quo ...
- git 使用命令总结
当远程仓库有README.md的时候我们创建的工程里没有这个文件这时候你提交的仓库和远程的不一致就会导致提交被拒绝 此时我们可以先拉取主干到本地的temp分支 然后和本地的master分支合并 通过 ...
- Android开发涉及有点概念&相关知识点（待写）
前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...
- sd_cms置顶新闻，背景颜色突击显示
维护之前的一个客户网站,使用的是sd_cms系统,因为好久没有维护了,看到这网站的时候,真不敢相信,自己也曾做出过这样的网站. 客户要求置顶新闻始终在最上面,有背景颜色突击显示. 找到对应的代码,修改 ...
- [转载] 散列表(Hash Table)从理论到实用（中）
转载自:白话算法(6) 散列表(Hash Table)从理论到实用(中) 不用链接法,还有别的方法能处理碰撞吗?扪心自问,我不敢问这个问题.链接法如此的自然.直接,以至于我不敢相信还有别的(甚至是更好 ...
- sed初学
1.连接多个sed命令,使用;号 2.批量修改文本中匹配到相应字符串的行 例如,将文本中log_server_port = "12345" 的12345修改成变量中存储的值 sed ...