AI game creator

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

No:35938

151

←

Prev Next

→

Super Mario world
Developer User16701｜Date and time 24/1/16 4:55:52
Build time 20.128 sec｜Game capacity 4.391KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
   <title>Super Mario World Game</title>
   <style>
      canvas {
         border: 1px solid black;
         display: block;
         margin: 0 auto;
      }
   </style>
</head>
<body>
   <canvas id="marioCanvas" width="800" height="600"></canvas>
   <script>
      // Enclosing the entire script in script tags within an HTML file

/
      Mario png

var context = canvas.getContext("2d");

// Mario character object with initial position and size
      var mario = {
         x: 50,
         y: 550,
         width: 50,
         height: 50,
         dx: 0,
         dy: 0,
         speed: 5
      };
	  
	  // Flag to track if the game is already finished
	  var gameFinished = false;

// Pictograms representing the game elements
      var marioIcon = "\uD83D\uDC7A";
      var obstacleIcon = "\uD83D\uDD36";

// Function to draw mario and obstacles on the canvas
      function draw() {
         context.clearRect(0, 0, canvas.width, canvas.height);
		 
		 // Check if the game is already finished
		 if (!gameFinished) {
			context.font = "40px Arial";
			context.fillText(marioIcon, mario.x, mario.y);
		 
			// Draw some obstacles
			var obstacleX = 300;
			var obstacleY = 550;
			var obstacleWidth = 50;
			var obstacleHeight = 50;
			
			// First obstacle
			context.font = "40px Arial";
			context.fillText(obstacleIcon, obstacleX, obstacleY);
			
			// Second obstacle
			obstacleX = 500;
			context.font = "40px Arial";
			context.fillText(obstacleIcon, obstacleX, obstacleY);
			
			// Third obstacle
			obstacleX = 700;
			context.font = "40px Arial";
			context.fillText(obstacleIcon, obstacleX, obstacleY);
		 }
		 else {
			// Game finished message
			context.font = "40px Arial";
			context.fillText("¡Juego terminado!", canvas.width/2 - 200, canvas.height/2);
		 }
		 
      }

// Function to update mario's position
      function update() {
		 // Check if the game is already finished
		 if (!gameFinished) {
			 mario.x += mario.dx;
			 mario.y += mario.dy;
			 
			 if (mario.x < 0) {
				 mario.x = 0;
			 }
			 
			 if (mario.x + mario.width > canvas.width) {
				 mario.x = canvas.width - mario.width;
			 }
			 
			 if (mario.y < 0) {
				 mario.y = 0;
			 }
			 
			 if (mario.y + mario.height > canvas.height) {
				 mario.y = canvas.height - mario.height;
			 }
		 }	      
      }

// Function to handle keyboard input for controlling mario
      function handleInput() {
		 // Check if the game is already finished
		 if (!gameFinished) {
			 document.addEventListener("keydown", function(event) {
				if (event.keyCode === 37) {
				   mario.dx = -mario.speed; // Move left
				}
			 
				if (event.keyCode === 39) {
				   mario.dx = mario.speed; // Move right
				}
			 
				if (event.keyCode === 38) {
				   mario.dy = -mario.speed; // Move up
				}
			 
				if (event.keyCode === 40) {
				   mario.dy = mario.speed; // Move down
				}
			 });
			 
			 document.addEventListener("keyup", function(event) {
				if (event.keyCode === 37 || event.keyCode === 39) {
				   mario.dx = 0; // Stop moving on x-axis
				}
			 
				if (event.keyCode === 38 || event.keyCode === 40) {
				   mario.dy = 0; // Stop moving on y-axis
				}
			 });
		 }	      
      }

// Function to check collision between mario and obstacles
      function checkCollision() {
		 // Check if the game is already finished
		 if (!gameFinished) {
			 var obstacleX = [300, 500, 700];
			 var obstacleY = 550;
			 var obstacleWidth = 50;
			 var obstacleHeight = 50;
			 
			 for (var i = 0; i < obstacleX.length; i++) {
				 if (mario.x < obstacleX[i] + obstacleWidth &&
					 mario.x + mario.width > obstacleX[i] &&
					 mario.y < obstacleY + obstacleHeight &&
					 mario.y + mario.height > obstacleY) {
						 gameFinished = true; // Collision detected, game over
				 }
			 }
		 }	      
      }

// Game loop function to update, handle input, check collision and redraw the canvas
      function gameLoop() {
         update();
         handleInput();
         checkCollision();
         draw();
         requestAnimationFrame(gameLoop);
      }

// Start the game loop
      gameLoop();

</script>
</body>
</html>