Spirited Away made into a video game's game

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

No:38207

←

Prev Next

→

Spirited Away made into a video game
Developer User17279｜Date and time 24/1/23 12:04:34
Build time 8.188 sec｜Game capacity 2.032KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Spirited Away - Video Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  <script>
    // Variables
    var canvas;
    var canvasContext;
    var playerX = 100;
    var playerY = 100;
    var playerSpeed = 5;
    
    // Wait for the webpage to load before starting the game
    window.onload = function() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');
      document.addEventListener('keydown', keyPressed);

// Game loop
      var framesPerSecond = 30;
      setInterval(function() {
        moveEverything();
        drawEverything();
      }, 1000/framesPerSecond);
    }

// Handle key presses
    function keyPressed(event) {
      if(event.keyCode === 37) { // Left arrow key
        playerX -= playerSpeed;
      } else if(event.keyCode === 38) { // Up arrow key
        playerY -= playerSpeed;
      } else if(event.keyCode === 39) { // Right arrow key
        playerX += playerSpeed;
      } else if(event.keyCode === 40) { // Down arrow key
        playerY += playerSpeed;
      }
    }

// Update game objects
    function moveEverything() {
      // Game logic goes here
    }

// Draw game objects
    function drawEverything() {
      // Clear canvas
      colorRect(0, 0, canvas.width, canvas.height, 'black');
      
      // Draw the player character (Chihiro)
      colorCircle(playerX, playerY, 20, 'white');
    }

// Helper function to draw colored rectangles
    function colorRect(leftX, topY, width, height, fillColor) {
      canvasContext.fillStyle = fillColor;
      canvasContext.fillRect(leftX, topY, width, height);
    }

// Helper function to draw colored circles
    function colorCircle(centerX, centerY, radius, fillColor) {
      canvasContext.fillStyle = fillColor;
      canvasContext.beginPath();
      canvasContext.arc(centerX, centerY, radius, 0, Math.PI*2, true);
      canvasContext.fill();
    }
  </script>
</body>
</html>