A game to punish the developer Hisashi for neglecting the appeasement of DOSUKU.'s game

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

No:382

←

Prev Next

→

A game to punish the developer Hisashi for neglect..ALL
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/13 15:10:39
Build time 62.145 sec｜Game capacity 4.692KB｜

Script

The following is an example of an application implementation that includes JavaScript.

This application is、The yellow circle that the player controls by keyboard or touch and the、The pink circle that moves the developers hips is shown. The objective is for the player to move around without hitting the developers awning. When the player hits the developers awning、Because the game is set up to punish the hijinks.、I did not make the production after that. Background is blue、Players are yellow circles、Developers awning is a pink circle with、I use more pictograms. Also、Assuming operation with a smartphone、Touch operation is also taken into consideration.

←

Prev　Next

→ 　

Back　

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

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

以下がJavaScriptを含んだアプリの実装例です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>スクのアプデを放置した開発者ひさしをお仕置きするゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #a7d3ff;
		}
		canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		
		// プレイヤーを描画する関数
		function drawPlayer(x, y) {
			ctx.beginPath();
			ctx.arc(x, y, 40, 0, 2 * Math.PI);
			ctx.fillStyle = "yellow";
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();
			ctx.arc(x - 20, y - 15, 10, 0, 2 * Math.PI);
			ctx.fillStyle = "black";
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();
			ctx.arc(x + 20, y - 15, 10, 0, 2 * Math.PI);
			ctx.fillStyle = "black";
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();
			ctx.moveTo(x - 20, y + 15);
			ctx.lineTo(x + 20, y + 15);
			ctx.strokeStyle = "black";
			ctx.lineWidth = 6;
			ctx.stroke();
			ctx.closePath();
		}
		
		// 開発者ひさしを描画する関数
		function drawDeveloper(x, y) {
			ctx.beginPath();
			ctx.arc(x, y, 50, 0, 2 * Math.PI);
			ctx.fillStyle = "#ff99e6";
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();
			ctx.arc(x - 20, y - 20, 10, 0, 2 * Math.PI);
			ctx.fillStyle = "black";
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();
			ctx.arc(x + 20, y - 20, 10, 0, 2 * Math.PI);
			ctx.fillStyle = "black";
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();
			ctx.moveTo(x - 20, y + 20);
			ctx.lineTo(x + 20, y + 20);
			ctx.strokeStyle = "black";
			ctx.lineWidth = 6;
			ctx.stroke();
			ctx.closePath();
			ctx.beginPath();
			ctx.moveTo(x, y);
			ctx.lineTo(x - 30, y + 50);
			ctx.lineTo(x + 30, y + 50);
			ctx.fillStyle = "black";
			ctx.fill();
			ctx.closePath();
		}
		
		// 開発者ひさしを動かす関数
		function moveDeveloper(dx, dy) {
			developerX += dx;
			developerY += dy;
			if (developerX < 50) {
				developerX = 50;
			}
			if (developerX > canvas.width - 50) {
				developerX = canvas.width - 50;
			}
			if (developerY < 50) {
				developerY = 50;
			}
			if (developerY > canvas.height - 50) {
				developerY = canvas.height - 50;
			}
		}
		
		// タイマーイベントでアニメーションを更新する関数
		function update() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawPlayer(playerX, playerY);
			drawDeveloper(developerX, developerY);
			requestAnimationFrame(update);
		}
		
		// キーボードイベントでプレイヤーを動かす関数
		function keydown(e) {
			if (e.keyCode === 37) { // 左
				playerX -= 10;
			} else if (e.keyCode === 38) { // 上
				playerY -= 10;
			} else if (e.keyCode === 39) { // 右
				playerX += 10;
			} else if (e.keyCode === 40) { // 下
				playerY += 10;
			}
		}
		
		// タッチイベントでプレイヤーを動かす関数
		function touchstart(e) {
			e.preventDefault();
			var touch = e.changedTouches[0];
			startX = touch.pageX;
			startY = touch.pageY;
		}
		function touchmove(e) {
			e.preventDefault();
			var touch = e.changedTouches[0];
			var dx = touch.pageX - startX;
			var dy = touch.pageY - startY;
			playerX += dx;
			playerY += dy;
			startX = touch.pageX;
			startY = touch.pageY;
		}
		
		// 初期状態を設定する
		var playerX = canvas.width / 2;
		var playerY = canvas.height / 2;
		var developerX = 100;
		var developerY = 100;
		var startX;
		var startY;
		drawPlayer(playerX, playerY);
		drawDeveloper(developerX, developerY);
		requestAnimationFrame(update);
		
		// イベントリスナーを設定する
		document.addEventListener("keydown", keydown);
		canvas.addEventListener("touchstart", touchstart);
		canvas.addEventListener("touchmove", touchmove);
	</script>
</body>
</html>

このアプリは、プレイヤーがキーボードまたはタッチ操作で操作する黄色い丸と、開発者ひさしを動かすピンク色の丸を表示しています。プレイヤーは開発者ひさしに当たらずに動き回ることが目的です。プレイヤーが開発者ひさしに当たると、「ひさしをお仕置き」するゲームだという設定のため、その後の演出は作らなかったです。

背景は青色、プレイヤーは黄色い丸、開発者ひさしはピンク色の丸と、絵文字を多めに使っています。また、スマホでの操作を前提とし、タッチ操作も考慮しています。