A 3D rendered platformer game where you control a ball with shadows and toon shading's game

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

No:13073

151

←

Prev Next

→

A 3D rendered platformer game where you control a ..ALL
Developer User5767｜Date and time 23/8/26 19:37:06
Build time 20.477 sec｜Game capacity 2.844KB｜

Script

Sure! Here's an example of a simple 3D rendered platformer game using JavaScript, HTML, and CSS. This game allows you to control a ball with shadows and toon shading effects. Please note that this is just a basic implementation and can be further enhanced with more gameplay features, levels, and graphics.

To play the game, you can copy the above code into a single HTML file, save it with a `.html` extension, and open it in a compatible web browser on your smartphone. The game uses the smartphone's orientation values (`e.gamma` and `e.beta`) to control the ball movement. Tilt your smartphone to move the ball in different directions on the 3D platform. The ball is rendered with shadows and toon shading effects using canvas API calls.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
  <title>3D Platformer Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

// Set initial ball position and velocity
      let ballX = 400;
      let ballY = 300;
      let velocityX = 0;
      let velocityY = 0;
      
      // Game loop
      function update() {
        // Update ball position based on velocity
        ballX += velocityX;
        ballY += velocityY;

// Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw ball with shadows and toon shading
        ctx.beginPath();
        ctx.arc(ballX, ballY, 20, 0, Math.PI * 2, false);
        ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = 3;
        ctx.fillStyle = "#FF0000";
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = "#000000";
        ctx.stroke();

// Request next animation frame
        requestAnimationFrame(update);
      }

// Update ball velocity based on user input
      function handleInput(e) {
        // Check smartphone orientation
        if (e.gamma) {
          velocityX = -e.gamma / 10; // Adjust sensitivity if needed
          velocityY = e.beta / 10; // Adjust sensitivity if needed
        }
      }

// Attach event listener to capture smartphone orientation
      window.addEventListener("deviceorientation", handleInput, true);

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