moonwalk's game | AI game creator

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

No:3410

1395

moonwalk
Developer User3655｜Date and time 23/6/25 1:12:07
Build time 43.51 sec｜Game capacity 3.812KB｜

→ 　

1　

1　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<title>ムーンウォーク</title>
	<style type="text/css">
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body onload="startGame()">

<div style="text-align:center;">
	<h1>ムーンウォーク</h1>
	<p>スペースキーを押してジャンプ！</p>
</div>

<script>
	var myGamePiece;
	var myObstacles = [];
	var myScore;
	var jumpSound = new Audio('jump.wav');
	var gravity = 0.1;
	var jumpPower = -4;

function startGame() {
		myGamePiece = new component(30, 30, "🚀", 10, 120);
		myScore = new component("30px", "Consolas", "white", 280, 40, "text");
		myGameArea.start();
	}

var myGameArea = {
		canvas : document.createElement("canvas"),
		start : function() {
			this.canvas.width = 480;
			this.canvas.height = 270;
			this.context = this.canvas.getContext("2d");
			document.body.insertBefore(this.canvas, document.body.childNodes[0]);
			this.frameNo = 0;
			this.interval = setInterval(updateGameArea, 20);
			window.addEventListener('keydown', function (e) {
				if (e.keyCode === 32) {
					myGamePiece.jump();
				}
			})
		},
		clear : function() {
			this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
		},
		stop : function() {
			clearInterval(this.interval);
		}
	}

function component(width, height, color, x, y, type) {
		this.type = type;
		if (type === "text") {
			this.text = color;
		}
		this.width = width;
		this.height = height;
		this.speedX = 0;
		this.speedY = 0;
		this.x = x;
		this.y = y;
		this.update = function() {
			ctx = myGameArea.context;
			if (type === "text") {
				ctx.font = this.width + " " + this.height;
				ctx.fillStyle = color;
				ctx.fillText(this.text, this.x, this.y);
			} else {
				ctx.fillStyle = color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			}
		}
		this.newPos = function() {
			this.x += this.speedX;
			this.y += this.speedY + gravity;
			this.hitBottom();
		}
		this.hitBottom = function() {
			var rockbottom = myGameArea.canvas.height - this.height;
			if (this.y > rockbottom) {
				this.y = rockbottom;
				this.speedY = 0;
			}
		}
		this.crashWith = function(otherobj) {
			var myleft = this.x;
			var myright = this.x + (this.width);
			var mytop = this.y;
			var mybottom = this.y + (this.height);
			var otherleft = otherobj.x;
			var otherright = otherobj.x + (otherobj.width);
			var othertop = otherobj.y;
			var otherbottom = otherobj.y + (otherobj.height);
			var crash = true;
			if ((mybottom < othertop) ||
				(mytop > otherbottom) ||
				(myright < otherleft) ||
				(myleft > otherright)) {
				crash = false;
			}
			return crash;
		}
		this.jump = function() {
			if (this.speedY === 0) {
				this.speedY = jumpPower;
				jumpSound.play();
			}
		}
	}

function updateGameArea() {
		var x, y, minGap, maxGap, minH, maxH;
		for (i = 0; i < myObstacles.length; i += 1) {
			if (myGamePiece.crashWith(myObstacles[i])) {
				myGameArea.stop();
				return;
			} 
		}
		myGameArea.clear();
		myGameArea.frameNo += 1;
		if (myGameArea.frameNo === 1 || everyinterval(150)) {
			x = myGameArea.canvas.width;
			minGap = 50;
			maxGap = 200;
			y = myGameArea.canvas.height - 25;
			minH = 20;
			maxH = 200;
			gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
			height = Math.floor(Math.random()*(maxH-minH+1)+minH);
			myObstacles.push(new component(10, height, "gray", x, 0));
			myObstacles.push(new component(10, x - height - gap, "gray", x, height + gap));
		}
		for (i = 0; i < myObstacles.length; i += 1) {
			myObstacles[i].x += -1;
			myObstacles[i].update();
		}
		myScore.text="SCORE: " + myGameArea.frameNo;
		myScore.update();
		myGamePiece.newPos();
		myGamePiece.update();
	}

function everyinterval(n) {
		if ((myGameArea.frameNo / n) % 1 === 0) {return true;}
		return false;
	}
</script>

</body>
</html>