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

No:4248

4317

←

Prev Next

→

View dynamically drawn shapes by JavaScript
Developer もちきなこ｜Date and time 23/6/27 15:51:33
Build time 20.347 sec｜Game capacity 1.89KB｜

Script

下記のようにJavascriptで実装された「動的な線画ゲーム」を作成しました。

動的な線画ゲーム

このスクリプトを実行すると、ウィンドウ内でマウスを動かすと線画が動的に描画されていきます。また、ゲームスタートするとランダムな色の線がランダムな時間で続けて描かれます。スマホでも操作可能で、即座に実行されます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

下記のようにJavascriptで実装された「動的な線画ゲーム」を作成しました。

<!DOCTYPE html> 
<html> 
<head> 
<title>Drawing Game</title> 
</head> 
<body> 
<h1>動的な線画ゲーム</h1>

// キャンバスサイズの設定 
canvas = document.getElementById('canvas'); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight;

context = canvas.getContext('2d'); 
context.lineWidth = 3;

//マウスでの描画機能の実装 
function startDraw(event){ 
    context.beginPath(); 
    context.moveTo(event.clientX, event.clientY); 
    draw = true; 
}

function endDraw(){ 
    draw = false; 
}

function moveDraw(event){ 
    if(draw === true){ 
        context.lineTo(event.clientX, event.clientY); 
        context.stroke(); 
    } 
}

//マウスでの描画機能を呼び出す 
canvas.addEventListener('mousedown', startDraw); 
canvas.addEventListener('mouseup', endDraw); 
canvas.addEventListener('mousemove', moveDraw);

//ランダムな色の線を繰り返しあとから描画 
function drawLine(time){ 
    context.beginPath(); 
    context.moveTo(Math.random()*canvas.width, Math.random()*canvas.height); 
    context.lineTo(Math.random()*canvas.width, Math.random()*canvas.height); 
    context.strokeStyle= '#'+Math.floor(Math.random()*16777215).toString(16); 
    context.stroke(); 
    setTimeout(drawLine, time, time); 
}

//ゲームスタート 
drawLine(100);

</script>

</body> 
</html>