AI game creator

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

No:1064

142

←

Prev Next

→

Mario.
Developer User3230｜Date and time 23/6/18 1:23:16
Build time 33.176 sec｜Game capacity 2.623KB｜

Script

上記はスマホで遊べるマリオのシンプルな実装例です。左右の矢印キーでマリオを動かし、上矢印キーでジャンプさせます。地面に立っているとジャンプできますが、地面から離れるとジャンプできなくなります。また、地面の上を歩いている時はマリオが地面に沿って移動します。画像ファイルはそれぞれmario.pngとground.pngとする必要があります。

←

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;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	<script>
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");
		const marioImg = new Image();
		marioImg.src = "mario.png";
		const groundImg = new Image();
		groundImg.src = "ground.png";

const mario = {
			x: 30,
			y: 150,
			width: 26,
			height: 33,
			speedX: 0,
			speedY: 0,
			jumping: false
		}

const ground = {
			x: 0,
			y: canvas.height - 30,
			width: canvas.width,
			height: 30
		}

document.addEventListener('keydown', handleKeyDown);
		document.addEventListener('keyup', handleKeyUp);

function handleKeyUp(e){
			if(e.key === "ArrowLeft" || e.key === "ArrowRight"){
				mario.speedX = 0;
			}
		}

function update(){
			mario.x += mario.speedX;
			mario.y += mario.speedY;

if(mario.x < 0){
				mario.x = 0;
			}
			if(mario.x > canvas.width - mario.width){
				mario.x = canvas.width - mario.width;
			}

if(mario.y < 0){
				mario.y = 0;
				mario.speedY = 0;
			}
			if(mario.y > canvas.height - mario.height){
				mario.y = canvas.height - mario.height;
				mario.speedY = 0;
				mario.jumping = false;
			}

if(mario.y + mario.height > ground.y && mario.x + mario.width > ground.x && mario.x < ground.x + ground.width){
				mario.y = ground.y - mario.height;
				mario.speedY = 0;
				mario.jumping = false;
			}
		}

function draw(){
			ctx.drawImage(groundImg, ground.x, ground.y, ground.width, ground.height);
			ctx.drawImage(marioImg, mario.x, mario.y, mario.width, mario.height);
		}

function loop(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			update();
			draw();
			requestAnimationFrame(loop);
		}

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