Javascript 如何在HTML5画布中连续移动线条_Javascript_Html_Canvas_Cordova

Javascript 如何在HTML5画布中连续移动线条

javascript html canvas cordova

Javascript 如何在HTML5画布中连续移动线条,javascript,html,canvas,cordova,Javascript,Html,Canvas,Cordova,我是HTML5画布游戏开发的初学者。我试图创建一个简单的游戏，其中包含两条线和一个典型的例子车在中间。当玩家滑动设备时，characterexample car应该使用Phonegap中的加速度计左右移动，我得到坐标并根据加速度计完成角色移动。问题是根据characterexample car连续移动线路。到目前为止，我已经这样尝试过了，请看看我的代码 HTML文件 <html> <head>  <met

我是HTML5画布游戏开发的初学者。我试图创建一个简单的游戏，其中包含两条线和一个典型的例子车在中间。当玩家滑动设备时，characterexample car应该使用Phonegap中的加速度计左右移动，我得到坐标并根据加速度计完成角色移动。问题是根据characterexample car连续移动线路。到目前为止，我已经这样尝试过了，请看看我的代码

HTML文件

<html>
<head>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<script type="text/javascript" src="js/jquery_v1.9.1.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/acelometer.js"></script>
</head>
<body>
<canvas id="can" style="position: fixed;"> </canvas>
<div id="accelerometer"></div>
</body>
</html>

Javascript文件

var watchID = null;
var can;
var context;
var canvasX;
var canvasY;
var x, y;
var mousePosX, mousePosY;
var canInnerWidth, canInnerHeight;
var cx1 = 0, cy1 = 0;
var lwx1, lwx2, lhy1, lhy2, rwx3, rwx4, rhy3, rhy4;
var car = new Image();
car.src = "img/car.jpg";
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
init();
startWatch();
}
function init() {

can = document.getElementById('can');
context = can.getContext('2d');

can.width = can.parentNode.clientWidth;
can.height = can.parentNode.clientHeight;
// circle coordinates
cx1 = can.width / 2;
cy1 = can.height - can.height / 9;
console.log("Circle x co-ordinates :" + cx1);
console.log("Circle y co-ordinates :" + cy1);

// for lines co-ordiantes
lwx1 = can.width / 3;
lwx2 = 0;
lhy1 = 0;
lhy2 = can.height - can.height / 10;
// right
rwx3 = can.width - can.width / 3;
rwx4 = can.width;
rhy3 = 0;
rhy4 = can.height - can.height / 10;
console.log("canvas width :" + can.width);
console.log("canvas height :" + can.height);

initialLines();
//drawCircle();
   }
   function initialLines() {
can.width = can.width;
// left side..
context.strokeStyle = 'green';
context.beginPath();
context.moveTo(can.width / 3, 0);
context.lineTo(0, can.height - can.height / 10);
context.stroke();

// right..
context.strokeStyle = 'green';
context.beginPath();
context.moveTo(can.width - can.width / 3, 0);
context.lineTo(can.width, can.height - can.height / 10);
context.stroke();

  }
  function drawImagess() {
context.drawImage(car, cx1, cy1);

 }
 function redrawCircle(cx1, cy1, j) {
var radius = 7;
can.width = can.width;
initialLines();
context.beginPath();
context.arc(cx1, cy1, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.strokeStyle = '#003300';
context.stroke();
   }
    function drawNewLinesOnRightSide(rwx4, lwx2, lhy2, cx1) {
can.width = can.width;
context.drawImage(car, cx1, cy1);
context.strokeStyle = 'green';

context.beginPath();
context.moveTo(rwx3, rhy3);
context.lineTo(rwx4, rhy4);
context.stroke();
context.strokeStyle = 'green';
context.beginPath();
context.moveTo(lwx1, lhy1);
context.lineTo(lwx2, lhy2);
context.stroke();   
  }
  function drawNewLinesOnLeftSide(lwx2, rwx4, rhy4, cx1){   
can.width = can.width;
context.drawImage(car, cx1, cy1);
context.strokeStyle = 'green';
context.beginPath();
context.moveTo(lwx1, 0);
context.lineTo(lwx2, lhy2);
context.stroke();

context.strokeStyle = 'green';
context.beginPath();
context.moveTo(rwx3, 0);
context.lineTo(rwx4, rhy4);
context.stroke();

 }
 // Start watching the acceleration

 function startWatch() {

// Update acceleration every 3 seconds
var options = {
    frequency : 1000
};

watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,
        options);
 }

 // Stop watching the acceleration

  function stopWatch() {
if (watchID) {
    navigator.accelerometer.clearWatch(watchID);
    watchID = null;
} 
  }

 // onSuccess: Get a snapshot of the current acceleration
 //
 function onSuccess(acceleration) {

var can = document.getElementById('can');
var context = can.getContext('2d');
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />'
        + 'Acceleration Y: ' + acceleration.y + '<br />'
        + 'Acceleration Z: ' + acceleration.z + '<br />' + 'Timestamp: '
        + acceleration.timestamp + '<br />';

if(acceleration.y > 0 && acceleration.y < 2){
    for(var i = 0; i < 10; i++){
    can.width = can.width;
    drawNewLinesOnRightSide(rwx4, lwx2, lhy2, cx1);
    context.drawImage(car, cx1, cy1);
    cx1++;
    rwx4 -= 2;
    lwx2 += 1;
    lhy2 -= 2;

    }
}else if(acceleration.y > 2 && acceleration.y < 10){
    for(var i = 0; i < 10; i++){
    can.width = can.width;
    drawNewLinesOnRightSide(rwx4, lwx2, lhy2, cx1);
    context.drawImage(car, cx1, cy1);
    cx1 += 3;
    rwx4 -= 2;
    lwx2 += 1;
    lhy2 -= 2;

    }
}else if(acceleration.y < 0 && acceleration.y > -2){
        for(var i = 0; i < 10; i++){
            can.width = can.width;
            drawNewLinesOnLeftSide(rwx4, lwx2, lhy2, cx1);
            context.drawImage(car, cx1, cy1);
            cx1--;  
            lwx2 += 2;
            rwx4 -= 3;
            rhy4 -= 4;
    }
}else if(acceleration.y < -2 && acceleration.y > -10){
    for(var i = 0; i < 10; i++){
        can.width = can.width;
        drawNewLinesOnLeftSide(lwx2, rwx4, rhy4, cx1);
        context.drawImage(car, cx1, cy1);
        cx1 -= 3;
        lwx2 += 2;
        rwx4 -= 3;
        rhy4 -= 4;
    }
}

请参阅下面的参考链接。

我正在尝试开发与此相同的游戏

从我所能说的来看，它应该已经存在了。。。当加速度改变时，它会增加直线的x和y。。。你遇到了什么问题？@Zeaklous先生，谢谢你的回复。。当加速度改变但线条跨越画布边界时添加，以及当线条到达指定边界时如何停止绘制线条。如果你不介意的话。请在横向模式下根据加速度仅Y轴添加线条移动代码。请保存生命Sir要限制线经过某个点的移动，您应该创建一个变量来跟踪它，例如var distanceFromStart=0；加速度的内部加上x的变化，比如距离fromStart+=1；或者任何你设定的值。然后，如果当前值等于/高于您的最大值或等于/低于您的最小值，您可以使用if语句来防止移动。谢谢您的回复。我已经检查了所有不同类型条件的可能性，但无法工作。我不明白我做错了什么。最后，我用一些固定的坐标移动线条，这不是一种效率，在这里检查我的代码，因为加速度计，我不能创建小提琴。我想移动像矢量跑步者游戏一样的线条，在加速度计中使用Y轴。明天是做这个游戏的最后期限。你能像那个游戏那样移动线吗？？先生，请帮帮我。提前谢谢