javascript制作移动的方块,小游戏移动小方块
使用JavaScript开发俄罗斯方块游戏的开发思路是什么
不需要利用坐标来完成，利用表格来完成会更简单一点。这个我没有做过，但是可以说一下大概的思路。我做贪吃蛇的时候也是利用表格来做的。
1、建立背景，背景即为一个表格。每一个单元格设置ID值，方便以后使用。
2、建立各种块，比如说方块啊什么的。具体方法，比如说方块，一旦你确定了方块中的一个格子的ID，根据计算，你可以算出方块中所有格子的ID。其他的块建立方法也是如此。
3、产生一个随机数，每隔随机数代表一种块，比如如果是1，则会产生长条形，如果是2，则产生方块等等。
4、根据产生的块，在背景里改变块所占的单元格的颜色，表示这个块，然后块慢慢的下落，这个用id值和定时器就可以完成。在下落的时候，注意要用颜色值来判断下面的一个是否已经有块，有了就不在下落，停在这里，没有则下落。
5、一旦块一停住，则遍历表格，发现表格的一行的颜色不是背景色，表示这行已经被占满了，可以让这行以上的所有有块的单元格，下落一行。
6、如此循环……
呵呵，表达能力不好，不知道我这样说清楚了没有……
求javascript写一个方块或图片沿窗体做矩形运动的代码
用 jQuery 给你写了一个，保存成 html 文件用浏览器打开即可看到效果。
如果 不能打开，自己下一个 jquery，然后修改一下路径。
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
title移动方块/title
style type="text/css"
html, body {
width: 100%;
height: 100%;
}
#box {
position: absolute;
width: 20px;
height: 20px;
background: #FF0;
border: 1px solid #F00;
}
#fig {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background: #E4F2FF;
border: 1px solid #B1C6D9;
}
/style
script type="text/javascript" src=" "/script
script type="text/javascript"
$(document).ready(function() {
var $fig = $('#fig');
var $box = $('#box');
var P = $fig.position();
var M = 2;
var L = P.left - $box.width() - M;
var T = P.top - $box.height() - M;
var R = P.left + $fig.width() + M;
var B = P.top + $fig.height() + M;
var left = L;
var top = T;
$box.css('left', left);
$box.css('top', top);
var status = 0;
var STEP = 5;
setInterval(function() {
switch(status) {
case 0:
if(left R) {
left += STEP;
if(left R) left = R;
$box.css('left', left);
} else {
status = 1;
}
break;
case 1:
if(top B) {
top += STEP;
if(top B) top = B;
$box.css('top', top);
} else {
status = 2;
}
break;
case 2:
if(left L) {
left -= STEP;
if(left L) left = L;
$box.css('left', left);
} else {
status = 3;
}
break;
case 3:
if(top T) {
top -= STEP;
if(top T) top = T;
$box.css('top', top);
} else {
status = 0;
}
break;
default: break;
}
}, 100);
});
/script
/head
body
div id="box"/div
div id="fig"/div
/body
/html
用JS制作跟随鼠标移动的方块
!DOCTYPE?html
html
??head
meta?charset=UTF-8
titleYugi/title
style
*{
margin:0;
padding:0;
}
/style
script
var?Yugi?=?function(w,?h,?v)?
{
????this.w?=?w;
????this.h?=?h;
????this.v?=?v;
};
Yugi.prototype?=?new?Yugi;
Yugi.prototype.constructor?=?Yugi;
Yugi.pointToPoint?=?function(a,?b)?{
????return?Math.sqrt(Math.pow(a[0]?-?b[0],?2)?+?Math.pow(a[1]?-?b[1],?2));
}
Yugi.pointToAngle?=?function(origin,?point)?{
????var?PI?=?Math.PI;
????if?(point[0]?==?origin[0])?{
????????if?(point[1]??origin[1])
????????????return?PI?*?0.5;
????????return?PI?*?1.5
????}?else?if?(point[1]?==?origin[1])?{
????????if?(point[0]??origin[0])
????????????return?0;
????????return?PI;
????}
????var?t?=?Math.atan((origin[1]?-?point[1])?/?(origin[0]?-?point[0])?*?1);
????if?(point[0]??origin[0]??point[1]??origin[1])
????????return?t?+?2?*?PI;
????if?(point[0]??origin[0]??point[1]??origin[1])
????????return?t;
????return?t?+?PI;
}
Yugi.prototype.create?=?function(e,?_sX,?_sY)?
{
????var?div?=?document.createElement("div");
????div.style.position?=?"absolute";
????div.style.cursor?=?"pointer";
????div.style.width?=?this.w?+?"px";
????div.style.height?=?this.h?+?"px";
var?L?=?e.clientX?+?_sX?-?this.w?/?2,?T?=?e.clientY?+?_sY?-?this.h?/?2;
????div.style.left?=?L?+?"px";
????div.style.top?=?T?+?"px";
????div.style.backgroundColor?=?"red";
????document.body.appendChild(div);
????this.elem?=?div;
????this.currPoint?=?[L,?T];
};
Yugi.prototype.move?=?function(e,?_sX,?_sY)?
{
????var?me?=?this,?x?=?e.clientX?+?_sX?-?me.w?/?2,?y?=?e.clientY?+?_sY?-?me.h?/?2;
????var?newPoint?=?[x,?y];
????var?sleep?=?20,?speed?=?me.v?/?sleep;
????me.interval??clearInterval(me.interval);
????me.interval?=?setInterval(function()?{
????????var?len?=?Yugi.pointToPoint(me.currPoint,?newPoint);
????????if?(len??1)?{
????????????clearInterval(me.interval);
????????????me.interval?=?0;
????????}?else?{
????????????var?angle?=?Yugi.pointToAngle(me.currPoint,?newPoint);
????????????me.currPoint?=?[me.currPoint[0]?+?Math.cos(angle)?*?Math.min(len?/?2,?speed),?me.currPoint[1]?+?Math.sin(angle)?*?Math.min(len?/?2,?speed)];
????????????me.elem.style.left?=?me.currPoint[0]?+?'px';
????????????me.elem.style.top?=?me.currPoint[1]?+?'px';
????????}
????},?sleep);
};
var?yugi?=?new?Yugi(30,?30,?500);
document.onclick?=?function(e)?
{
????e?=?e?||?window.event;
????var?_sX?=?window.pageXOffset?||?document.documentElement.scrollLeft?||?document.body.scrollLeft;
????var?_sY?=?window.pageYOffset?||?document.documentElement.scrollTop?||?document.body.scrollTop;
????var?me?=?yugi;
????if?(!me.elem)?{
????????me.create(e,?_sX,?_sY);
????}?
????else?{
????????if?(!me.interval)?{
????????????var?cloned?=?document.createElement("div");
????????????cloned.innerHTML?=?me.elem.outerHTML;
????????????document.body.appendChild(cloned.children[0]);
????????}
????????me.move(e,?_sX,?_sY);
????}
};
document.oncontextmenu?=?new?Function("return?false");
/script
??/head
body/body
/html