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

No:1360

195

←

Prev Next

→

Huskers on their phones, clicking on the screen to..ALL
Developer もちきなこ｜Date and time 23/6/18 12:05:47
Build time 19.6 sec｜Game capacity 1.647KB｜

Script

スマホで遊べる「ハスクラ」というゲームを作りました。以下がコードになります。

ハスクラ

画面をクリックして魔王にダメージを与えよう！

残りHP： 50

（｀・ω・´）ﾉｼ　ﾊｽｸﾗ

このゲームの概要は、画面をクリックして魔王にダメージを与え、魔王のHPを0にすれば勝利というものです。画面上部にある「残りHP」はダメージを減算していきます。また、絵文字を多めに使用し、スマホでの操作前提に合わせて画面がクリック可能になっています。ご検討よろしくお願いいたします。

←

Prev　Next

→ 　

Back　

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

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

スマホで遊べる「ハスクラ」というゲームを作りました。以下がコードになります。

```html
<!DOCTYPE html>
<html>
<head>
	<title>ハスクラ</title>
	<meta charset="utf-8">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: lightblue;
			text-align: center;
			font-size: 3rem;
		}

#demon {
			font-size: 5rem;
			cursor: pointer;
		}
	</style>
	<script>
		let demon = document.getElementById("demon");
		let damage = 50;

demon.addEventListener("click", () => {
			demon.textContent = "（ﾟ∀ﾟ）ﾉｼ　ﾊｽｸﾗﾀﾞﾒｰｼﾞ！";
			demon.style.color = "red";
			setTimeout(() => {
				demon.textContent = "（ﾟ∀ﾟ）ﾉｼ　ｵｰｿﾞｱｹﾞｲﾝ";
				demon.style.color = "black";
			}, 500);
			damage -= 10;
			if (damage <= 0) {
				demon.textContent = "（｀・ω・´）ﾉｼ　ﾊﾞｲﾊﾞｲ";
				demon.style.color = "green";
				demon.removeEventListener("click", null);
			}
		});
	</script>
</head>
<body>
	<h1>ハスクラ</h1>
	<p>画面をクリックして魔王にダメージを与えよう！</p>
	<p>残りHP： <span id="hp">50</span></p>
	<div id="demon">（｀・ω・´）ﾉｼ　ﾊｽｸﾗ</div>
</body>
</html>
```

このゲームの概要は、画面をクリックして魔王にダメージを与え、魔王のHPを0にすれば勝利というものです。画面上部にある「残りHP」はダメージを減算していきます。

また、絵文字を多めに使用し、スマホでの操作前提に合わせて画面がクリック可能になっています。ご検討よろしくお願いいたします。