1

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

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;
    }
}

请参阅以下参考链接。我正在尝试开发与此http://www.digyourowngrave.com/vector-runner/相同的游戏

4

0 回答 0