midterm project report(自動停車系統) - YYBS/ee240500 GitHub Wiki
system
期中完成的任務 是使用三軸加速器控制車子在網頁上移動 並且可以紀錄走過的路徑
code
這是主要畫圖和操控圖片的code
window.onload = function()
{
x = 0;
y = 0;
speed = 5;
angle = 0;
mod = 0;
`canvas = document.getElementById("canvas");`
`context = canvas.getContext("2d");`
`car = new Image();`
`car.src="images/car.jpg";`
`window.addEventListener("keydown", keypress_handler, false);`
`window.addEventListener("keyup", keyup_handler, false);`
`var move = setInterval(function()`
`{`
`draw(canvas);`
`}, 30);`
`var lala = setInterval(function()`
`{`
`redraw();`
`}, 30);`
};
loop = false;
xArry = new Array();
yArry = new Array();
angleArray = new Array();
function reSet() {
xArry.length = 0;
yArry.length = 0;
angleArray.length =0;
window.clearInterval(toMemThePath);
window.clearInterval(toPath);
a = 0;
b = 0;
x = 0;
y = 0;
angle1 = 0;
angle =0;
loop = false;
}
function startStop(){
loop = !loop;
if (loop) {
alert("let's go");
temp = -1;
getpath();
}
else
{
window.clearInterval(toMemThePath);
alert("repeat");
toPath = setInterval(function()
{
if (!loop && (temp+1) < xArry.length ) {
temp +=1;
a=xArry[temp];
b=yArry[temp];
angle1 = angleArray[temp];
}
}, 30);
`}`
};
function getpath() {
toMemThePath = setInterval(function()
{
xArry.push(x);
yArry.push(y);
angleArray.push(Math.PI/180 * angle);
}, 30);
};
function redraw() {
c = document.getElementById("canvas2");
context = c.getContext("2d");
context.clearRect(0, 0, 1200, 1200);
`context.save();`
`context.translate(a, b);`
`context.rotate(angle1);`
`context.drawImage(car, -(car.width/2), -(car.height/2)); `
`context.restore();`
};
function draw(a)
{
context = a.getContext("2d");
context.clearRect(0, 0, 1200, 1200);
`x += (speed*mod) * Math.cos(Math.PI/180 * angle);`
`if (x >canvas.width || x<0) {`
`x -= (speed*mod) * Math.cos(Math.PI/180 * angle);`
`}`
`y += (speed*mod) * Math.sin(Math.PI/180 * angle);`
`if (y >canvas.height || y<0) {`
`y -= (speed*mod) * Math.sin(Math.PI/180 * angle);`
`}`
`context.save();`
`context.translate(x, y);`
`context.rotate(Math.PI/180 * angle);`
`context.drawImage(car, -(car.width/2), -(car.height/2)); `
`context.restore();`
}