Stars When you tap the screen, a star mark is drawn by JavaScript at the tapped position. Tap various places and create your own starry sky!'s game

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

No:2318

4446

←

Prev Next

→

Stars When you tap the screen, a star mark is draw..ALL
Developer もちきなこ｜Date and time 23/6/20 22:50:10
Build time 22.612 sec｜Game capacity 1.437KB｜

Script

HTMLファイル:

概要: - 画面をタップすると星マークが描かれます。 - ランダムな色が選ばれます。 - 線の幅は2に設定されています。 - 星マークは8本の線で構成されています。 - スマホで操作する場合も動作します。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

HTMLファイル:

```html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>お星さま</title>
	<style>
		canvas {
			display: block;
			margin: 0 auto;
		}
	</style>
</head>

var colorArray = ['#FFCE33', '#F7A51F', '#F15A29', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CB648'];

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

canvas.addEventListener("click", function(event) {
			drawStar(event.clientX, event.clientY);
		});

function drawStar(x, y) {
			ctx.lineWidth = 2;
			ctx.strokeStyle = colorArray[getRandomInt(0, colorArray.length)];
			ctx.beginPath();
			ctx.moveTo(x, y-15);
			ctx.lineTo(x+8, y-5);
			ctx.lineTo(x+15, y);
			ctx.lineTo(x+8, y+5);
			ctx.lineTo(x, y+15);
			ctx.lineTo(x-8, y+5);
			ctx.lineTo(x-15, y);
			ctx.lineTo(x-8, y-5);
			ctx.closePath();
			ctx.stroke();
		}

function getRandomInt(min, max) {
			return Math.floor(Math.random() * (max - min)) + min;
		}
	</script>
</body>
</html>
```

概要:

- 画面をタップすると星マークが描かれます。
- ランダムな色が選ばれます。
- 線の幅は2に設定されています。
- 星マークは8本の線で構成されています。
- スマホで操作する場合も動作します。