Make a game with a joystick to move right and left's game

Click here for free DL of the app version that can save data.

No:11087

←

Prev Next

→

Make a game with a joystick to move right and lef..ALL
Developer unknown｜Date and time 23/8/7 21:10:44
Build time 30.516 sec｜Game capacity 3.715KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file with JavaScript. The game uses a joystick-like interface to move an avatar left and right on the screen. Please note that this is just a basic demonstration and can be expanded upon for a full-fledged game.

This game creates a canvas element where an avatar is displayed as a blue square. The joystick control is represented by a light gray circle. By touching the left side of the joystick, the avatar moves to the left, and by touching the right side, the avatar moves to the right. The game continuously updates the avatar's position based on the joystick control. You can save this code as an HTML file and open it in a web browser on your smartphone to play the game.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Joystick Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

// Set initial position of the avatar
      var avatarX = canvas.width / 2;
      var avatarY = canvas.height - 30;

// Set joystick properties
      var joystickRadius = 50;
      var joystickX = joystickRadius;
      var joystickY = canvas.height - joystickRadius;

// Variables to track joystick movement
      var isLeftPressed = false;
      var isRightPressed = false;

// Event listeners for joystick touch controls
      canvas.addEventListener("touchstart", handleTouchStart);
      canvas.addEventListener("touchend", handleTouchEnd);

// Event handlers for joystick touch controls
      function handleTouchStart(event) {
        var touches = event.changedTouches;
        for (var i = 0; i < touches.length; i++) {
          var touchX = touches[i].pageX;
          var touchY = touches[i].pageY;

// Check if the touch is within the joystick area
          if (touchX >= 0 && touchX <= joystickRadius*2 && touchY >= canvas.height - joystickRadius*2) {
            if (touchX < joystickX) {
              // Move left
              isLeftPressed = true;
            } else if (touchX > joystickX + joystickRadius) {
              // Move right
              isRightPressed = true;
            }
            break;
          }
        }
      }

function handleTouchEnd(event) {
        var touches = event.changedTouches;
        for (var i = 0; i < touches.length; i++) {
          var touchX = touches[i].pageX;
          var touchY = touches[i].pageY;

// Check if the touch is within the joystick area
          if (touchX >= 0 && touchX <= joystickRadius*2 && touchY >= canvas.height - joystickRadius*2) {
            isLeftPressed = false;
            isRightPressed = false;
            break;
          }
        }
      }

// Game loop
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw joystick
        context.beginPath();
        context.arc(joystickX, joystickY, joystickRadius, 0, Math.PI * 2);
        context.fillStyle = "lightgray";
        context.fill();
        context.closePath();

// Draw avatar
        context.beginPath();
        context.rect(avatarX - 15, avatarY - 15, 30, 30);
        context.fillStyle = "blue";
        context.fill();
        context.closePath();

// Move avatar based on joystick control
        if (isLeftPressed) {
          avatarX -= 2;
        } else if (isRightPressed) {
          avatarX += 2;
        }

requestAnimationFrame(draw);
      }

draw(); // Start the game loop
    })();
  </script>
</body>
</html>
```

You can save this code as an HTML file and open it in a web browser on your smartphone to play the game.