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

No:15772

←

Prev Next

→

Dice with journey
Developer User6866｜Date and time 23/9/11 10:58:21
Build time 11.644 sec｜Game capacity 2.251KB｜

Script

Dice with Journey

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
   <title>Dice with Journey Game</title>
</head>
<body>
   <h1>Dice with Journey</h1>
   <canvas id="gameCanvas" width="400" height="300"></canvas>
   <script>
      // Initialize game variables
      var canvas, ctx;
      var currentPos = 0;
      var diceRolled = false;
      var diceValue = 0;
      var positions = [
         { x: 50, y: 250 }, // position 0
         { x: 100, y: 250 }, // position 1
         { x: 150, y: 250 }, // position 2
         { x: 200, y: 250 }, // position 3
         { x: 250, y: 250 }, // position 4
         { x: 300, y: 250 }, // position 5
         { x: 350, y: 250 }, // position 6
      ];

// Main game function
      function gameLoop() {
         update();
         draw();
         requestAnimationFrame(gameLoop);
      }

// Update game state
      function update() {
         if (diceRolled) {
            var newPos = currentPos + diceValue;
            if (newPos <= 6) {
               currentPos = newPos;
            }
            diceRolled = false;
         }
      }

// Draw game elements
      function draw() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the game board
         ctx.fillStyle = '#eeeeee';
         ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw the player
         ctx.fillStyle = '#ff0000';
         ctx.beginPath();
         ctx.arc(positions[currentPos].x, positions[currentPos].y, 15, 0, 2 * Math.PI);
         ctx.fill();
         ctx.closePath();

// Draw the dice
         ctx.fillStyle = '#0000ff';
         ctx.fillRect(50, 50, 50, 50);
         ctx.fillStyle = '#ffffff';
         ctx.font = '24px Arial';
         ctx.fillText(diceValue, 65, 85);
      }

// Handle dice roll
      function rollDice() {
         diceValue = Math.floor(Math.random() * 6) + 1;
         diceRolled = true;
      }

// Initialize the game
      function init() {
         canvas = document.getElementById('gameCanvas');
         ctx = canvas.getContext('2d');

// Attach click event to roll the dice
         canvas.addEventListener('click', rollDice);

gameLoop();
      }

// Start the game
      init();
   </script>
</body>
</html>