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

No:109

306

←

Prev Next

→

Rainbow Drawing Game
Developer ひさひさ｜Date and time 23/5/19 12:43:53
Build time 44.187 sec｜Game capacity 1.283KB｜

Script

Rainbow Drawing Game

Touch the screen with your finger.、Lets paint a rainbow!

This game is、Touch the screen with your finger.、You can draw rainbow-colored lines. When away from the screen or、If the mouse is released, the drawing ends. Gradually changing the hue、Draw a beautiful rainbow! You can also operate it with your smartphone.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<body>
<h1>虹を描くゲーム</h1>
<p>指で画面をタッチして、虹を描こう！</p>

var isDrawing = false;
var lastX;
var lastY;
var hue = 0;

canvas.addEventListener("mousedown", function(e) {
  isDrawing = true;
  lastX = e.offsetX;
  lastY = e.offsetY;
});

canvas.addEventListener("mousemove", function(e) {
  if (isDrawing) {
    context.beginPath();
    context.moveTo(lastX, lastY);
    context.lineTo(e.offsetX, e.offsetY);
    context.strokeStyle = "hsl(" + hue + ", 100%, 50%)";
    context.stroke();
    lastX = e.offsetX;
    lastY = e.offsetY;
    hue = (hue + 1) % 360;
  }
});

canvas.addEventListener("mouseup", function() {
  isDrawing = false;
});

canvas.addEventListener("mouseleave", function() {
  isDrawing = false;
});

</script>

</body>
</html>

このゲームは、指で画面をタッチして、虹色のラインを描くことができます。画面から離れた場合や、マウスを離した場合は描画が終了します。色相を徐々に変えながら、綺麗な虹を描いてみましょう！スマホでも操作が可能です。