2013-10-06 21:21:52Morris
[Javascript] Action 定時練習
寫一個類似貪吃蛇的模擬動作，無須考慮撞牆、吃到自己，隨著時間身體會增長。
預設身體最多 50 節
先用 JQuery 對還沒出來的 49 節做隱藏，隨著時間在呼叫 show()。
<html>
<head>
<title>JavaScript Animation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
<?php
for($i = 1; $i < 50; $i++)
echo "$(\"#ball$i\").hide(1000);";
?>
});
</script>
<style type="text/css">
*{margin: 0;padding: 0;}
.ball{
width: 50px;height:50px;
border-top-left-radius:25px;
border-top-right-radius:25px;
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
background-color:purple;
border:#F00 3px solid;
position : absolute;
}
.triangle-up {
position: absolute;
top: 300px;
left: 200px;
height: 0;
width: 0;
border: 50px solid #e5c3b2;
border-color: transparent transparent #e5c3b2 transparent;
}
.triangle-right {
position: absolute;
top: 410px;
left: 310px;
height: 0;
width: 0;
border: 50px solid #e5c3b2;
border-color: transparent transparent transparent #e5c3b2;
}
.triangle-down {
position: absolute;
top: 510px;
left: 200px;
height: 0;
width: 0;
border: 50px solid #e5c3b2;
border-color: #e5c3b2 transparent transparent transparent;
}
.triangle-left {
position: absolute;
top: 410px;
left: 90px;
height: 0;
width: 0;
border: 50px solid #e5c3b2;
border-color: transparent #e5c3b2 transparent transparent;
}
</style>
<script type="text/javascript">
//var width = screen.availWidth;
var width = 1080;
var height = 720;
//var height = screen.availHeight;
var dir = 2;
var dx = [0,0,1,-1];
var dy = [1,-1,0,0];
var velocity = 20;
var ballcount = 0;
var Obj, preObj;
function init(){
Obj = document.getElementById('ball0');
Obj.style.position= 'relative';
Obj.style.left = '0px';
Obj.style.top = '0px';
ballcount = 1;
}
function moveRight(){
dir = 2;
}
function moveDown(){
dir = 0;
}
function moveUp(){
dir = 1;
}
function moveLeft(){
dir = 3;
}
window.onload = init;
var timer = setInterval(function(){moveAction()},100);
var timerAddBall = setInterval(function(){addBall()}, 3000);
function afterBall(i) {
var Obj = document.getElementById("ball"+i);
var preObj = document.getElementById("ball"+(i-1));
var x = parseInt(preObj.style.left);
var y = parseInt(preObj.style.top);
Obj.style.left = x + "px";
Obj.style.top = y + "px";
}
function moveAction() {
var Obj = document.getElementById("ball0");
var x = parseInt(Obj.style.left);
var y = parseInt(Obj.style.top);
if((x%3 == 0 && dir >= 2) || (y%3 == 0 && dir < 2)) {
for(var i = ballcount-1; i > 0; i--)
afterBall(i);
}
x = (x+dx[dir]*velocity+width)%width;
y = (y+dy[dir]*velocity+height)%height;
Obj.style.left = x + "px";
Obj.style.top = y + "px";
}
function addBall() {
if(ballcount == 50) return;
$("#ball"+ballcount).show(500);
ballcount++;
}
</script>
</head>
<body>
<form>
<div class="ball" id="ball0"></div>
<?php
for($i = 1; $i < 50; $i++)
echo "<div class=\"ball\" id=\"ball$i\""."></div>";
?>
<div class="triangle-left" ></div></br>
<div class="triangle-up" ></div></br>
<div class="triangle-down" ></div></br>
<div class="triangle-right" ></div>
</form>
</body>
</html>
try
offset
and
attr