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

No:2566

1024

←

Prev Next

→

Gangi Mario
Developer User3585｜Date and time 23/6/22 0:11:54
Build time 31.458 sec｜Game capacity 2.576KB｜

Script

ガンギマリオ

スマホで左右にスワイプすると移動, 上にスワイプするとジャンプします。

←

Prev　Next

→ 　

Back　

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

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

<DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ガンギマリオ</title>
	<style>
		canvas{
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>ガンギマリオ</h1>
	<canvas id="game" width="400" height="400"></canvas>
	<p>スマホで左右にスワイプすると移動, 上にスワイプするとジャンプします。</p>
	<script>
		var canvas = document.getElementById("game");
		var ctx = canvas.getContext("2d");

var mario = {
			x: 50,
			y: 350,
			width: 50,
			height: 50,
			speed: 7,
			jumpHeight: 100,
			jumpSpeed: 10,
			emoji: "😎"
		}

var enemy = {
			x: 300,
			y: 350,
			width: 50,
			height: 50,
			speed: 5,
			emoji: "👿"
		}

var isJumping = false;

function draw(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Mario
			ctx.font = "45px serif";
			ctx.fillText(mario.emoji, mario.x, mario.y);

// Draw Enemy
			ctx.font = "45px serif";
			ctx.fillText(enemy.emoji, enemy.x, enemy.y);

// Move Mario
			if(movingLeft && mario.x > 0){
				mario.x -= mario.speed;
			}
			if(movingRight && mario.x < canvas.width - mario.width){
				mario.x += mario.speed;
			}

// Jump Mario
			if(isJumping){
				if(mario.y > canvas.height - mario.jumpHeight){
					mario.y -= mario.jumpSpeed;
				}else{
					isJumping = false;
				}
			}else{
				if(mario.y < canvas.height - mario.height){
					mario.y += mario.jumpSpeed;
				}
			}

// Move Enemy
			if(enemy.x > canvas.width - enemy.width || enemy.x < 0){
				enemy.speed *= -1;
			}
			enemy.x += enemy.speed;

// Collision Detection
			if(collide(mario, enemy)){
				alert("Game over!");
				document.location.reload();
			}

requestAnimationFrame(draw);
		}

function collide(a, b){
			if(a.x < b.x + b.width &&
				a.x + a.width > b.x &&
				a.y < b.y + b.height &&
				a.y + a.height > b.y){
				return true;
			}
			return false;
		}

var movingLeft = false;
		var movingRight = false;

document.addEventListener("touchstart", handleTouchStart);
		document.addEventListener("touchend", handleTouchEnd);

function handleTouchStart(event){
			var x = event.touches[0].clientX;
			var y = event.touches[0].clientY;

if(x < canvas.width/2 && y > canvas.height/2){
				movingLeft = true;
			}
			if(x > canvas.width/2 && y > canvas.height/2){
				movingRight = true;
			}
			if(y < canvas.height/2){
				if(!isJumping){
					isJumping = true;
					mario.y -= mario.jumpSpeed;
				}
			}
		}

function handleTouchEnd(event){
			movingLeft = false;
			movingRight = false;
		}

draw();
	</script>
</body>
</html>