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

No:4248

3683

←

Prev Next

→

View dynamically drawn shapes by JavaScript
Developer anonymous｜Date and time 70/1/1 9:31:30
Build time unknown 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>