AI game creator

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

No:6

917

←

Prev Next

→

Mario games
Developer User1006｜Date and time 23/4/18 21:31:20
Build time unknown sec｜Game capacity 5.171KB｜

Script

Score:0

Lives:3

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>マリオゲーム</title>
	<style>
		body{
			margin: 0;
			padding: 0;
			overflow: hidden;
		}

canvas{
			background-color: #fff;
			display: block;
		}

.game-container{
			position: relative;
			width: 800px;
			height: 600px;
			margin: 0 auto;
			background-image: url("background.png");
			background-size: cover;
		}

#score-board{
			position: absolute;
			top: 20px;
			left: 20px;
			font-size: 24px;
			color: #FFF;
			font-weight: bold;
			text-shadow: 0px 0px 5px #000;
		}

#lives-board{
			position: absolute;
			top: 20px;
			right: 20px;
			font-size: 24px;
			color: #FFF;
			font-weight: bold;
			text-shadow: 0px 0px 5px #000;
		}
	</style>
</head>
<body>
	<div class="game-container">
		<canvas id="game-canvas" width="800" height="600"></canvas>
		<div id="score-board">Score:0</div>
		<div id="lives-board">Lives:3</div>
	</div>
	<script>
		//キャンバス要素を取得
		var canvas = document.getElementById("game-canvas");

//2Dコンテキストを取得
		var ctx = canvas.getContext("2d");

//変数の定義
		var marioX = 50;
		var marioY = 450;
		var marioWidth = 39;
		var marioHeight = 50;
		var marioSpeedX = 0;
		var marioSpeedY = 0;
		var marioMaxSpeedX = 5;
		var gravity = 0.5;
		var jumpPower = 10;
		var jumping = false;
		var jumpLimit = 10;
		var jumpCount = 0;
		var groundY = 550;
		var goombaX = 700;
		var goombaY = 500;
		var goombaWidth = 64;
		var goombaHeight = 64;
		var goombaSpeedX = -3;
		var goombaDead = false;
		var score = 0;
		var lives = 3;
		var gameOver = false;

//マリオの画像をロード
		var marioImg = new Image();
		marioImg.src = "mario.png";

//グーバの画像をロード
		var goombaImg = new Image();
		goombaImg.src = "goomba.png";

//キーボードイベントのリスナーを登録
		document.addEventListener("keydown", function(event){
			//左矢印キーが押された場合
			if(event.keyCode === 37){
				marioSpeedX = -marioMaxSpeedX;
			}
			//右矢印キーが押された場合
			else if(event.keyCode === 39){
				marioSpeedX = marioMaxSpeedX;
			}
			//スペースキーが押された場合
			else if(event.keyCode === 32){
				if(!jumping){
					jumping = true;
					jumpCount = 0;
					marioSpeedY = -jumpPower;
				}
			}
		});

//キーボードイベントのリスナーを登録
		document.addEventListener("keyup", function(event){
			//左矢印キーが離された場合
			if(event.keyCode === 37){
				marioSpeedX = 0;
			}
			//右矢印キーが離された場合
			else if(event.keyCode === 39){
				marioSpeedX = 0;
			}
		});

//マリオの移動処理
		function moveMario(){
			//左端に到達した場合
			if(marioX < 0){
				marioX = 0;
				marioSpeedX = 0;
			}
			//右端に到達した場合
			else if(marioX + marioWidth > canvas.width){
				marioX = canvas.width - marioWidth;
				marioSpeedX = 0;
			}

//ジャンプ中の場合
			if(jumping){
				jumpCount++;
				marioY += marioSpeedY;
				marioSpeedY += gravity;

//ジャンプ上限に達した場合
				if(jumpCount >= jumpLimit){
					jumping = false;
					marioSpeedY = 0;
				}
			}
			//ジャンプしていない場合
			else{
				//マリオが地面に接している場合
				if(marioY + marioHeight >= groundY){
					marioY = groundY - marioHeight;
				}
				else{
					marioY += gravity;
				}
			}

marioX += marioSpeedX;
		}

//グーバの移動処理
		function moveGoomba(){
			goombaX += goombaSpeedX;

//画面外に出た場合
			if(goombaX + goombaWidth < 0){
				goombaX = canvas.width;
			}
		}

//衝突判定処理
		function collisionDetection(){
			//マリオとグーバの衝突判定
			if(marioX + marioWidth > goombaX && marioX < goombaX + goombaWidth && marioY + marioHeight > goombaY && marioY < goombaY + goombaHeight && !goombaDead){
				lives--;
				if(lives < 0){
					gameOver = true;
				}
				else{
					marioX = 50;
					marioY = 450;
				}
			}

//スコア加算処理
			if(marioX > goombaX + goombaWidth && marioX < goombaX + goombaWidth + 5 && !goombaDead){
				score += 100;
			}
		}

//画面更新処理
		function update(){
			if(gameOver){
				if(confirm("ゲームオーバー\n再プレイしますか？")){
					window.location.reload();
				}
				else{
					window.close();
				}
			}

ctx.clearRect(0, 0, canvas.width, canvas.height);

//マリオを描画
			ctx.drawImage(marioImg, marioX, marioY, marioWidth, marioHeight);

//グーバを描画
			if(!goombaDead){
				ctx.drawImage(goombaImg, goombaX, goombaY, goombaWidth, goombaHeight);
			}

//スコアボードを更新
			document.getElementById("score-board").innerHTML = "Score:" + score;

//残りのライフを更新
			document.getElementById("lives-board").innerHTML = "Lives:" + lives;

//マリオの移動処理を実行
			moveMario();

//グーバの移動処理を実行
			moveGoomba();

//衝突判定処理を実行
			collisionDetection();

//0.01秒後に再度update関数を実行
			setTimeout(update, 10);
		}

//update関数を実行
		update();
	</script>
</body>
</html>