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

No:51518

160

←

Prev Next

→

Documentary about 9/11
Developer User15380｜Date and time 24/3/12 19:48:12
Build time 1.017 sec｜Game capacity 0.045KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

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

動的な線画ゲーム

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

←

Prev　Next

→ 　

Back　

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

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p>下記のように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>