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

No:855

339

←

Prev Next

→

word barrage
Developer User3161｜Date and time 23/6/17 20:29:11
Build time 29.331 sec｜Game capacity 2.295KB｜

Script

単語弾幕

このアプリは「単語弾幕」という名前の、シンプルなゲームです。画面上にランダムに表示される単語を、スペースキーを押すことで弾幕として表示します。単語は「こんにちは」「ありがとう」「さようなら」「おはよう」「こんばんは」の5種類があります。画面に表示されている単語を読んで、その言葉を打ち込むスピードや正確性を競う、単純なゲームルールとなっています。スマホでも使えるよう、画面サイズに合わせてレスポンシブ対応しています。絵文字は使用しませんでしたが、文字のサイズやフォント、色などは変数でカスタマイズ可能な設計となっています。

←

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>
		body {
			margin: 0;
			padding: 0;
			background-color: #555;
			text-align: center;
		}
		canvas {
			border: 1px solid #fff;
			background-color: #000;
			margin: 20px auto;
			display: block;
		}
		h1 {
			color: #fff;
			font-size: 2em;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<h1>単語弾幕</h1>
	<canvas id="canvas" width="360" height="640"></canvas>
	<script>
		// 変数
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var words = ["こんにちは", "ありがとう", "さようなら", "ありがとう", "おはよう", "こんばんは"];
		var intervalId;
		var fontSize = "30px";
		var fontType = "Arial";
		var color = "#fff";
		var x = canvas.width / 2;
		var y = 0;
		var dy = 2;
		
		// キーイベント
		document.addEventListener("keydown", function(event) {
			if (event.keyCode == 32) {
				event.preventDefault();
				startGame();
			}
		});
		
		// ゲーム開始
		function startGame() {
			intervalId = setInterval(draw, 10);
		}
		
		// 描画
		function draw() {
			// 背景
			ctx.fillStyle = "#000";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			// フォント
			ctx.font = fontSize + " " + fontType;
			ctx.fillStyle = color;
			// テキスト
			ctx.fillText(words[Math.floor(Math.random() * words.length)], x, y);
			// 位置
			y += dy;
			if (y > canvas.height) {
				y = 0;
			}
		}
	</script>
</body>
</html>