0
私の割り当てはランダムに3〜6個のランダムな色の四角形をランダムに描画し、次に2秒ごとに別のものをランダムに描画し、動かすようにアニメートします。これを完了してください。マウスクリックで四角形が消えるようにするだけです。オブジェクトをマウスでクリックするとキャンバスオブジェクトが消えます
マイHtmlの
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 5</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/assignment5.css">
</head>
<body>
<header>
<h1>Assignment 5</h>
</header>
<!--the height and width attributes size the canvas-->
<canvas id="canvas" width="1200" height="600"></canvas>
<script src="js/assignment5.js" charset="utf-8"></script>
<footer>
Copyright © no one in particular...
</footer>
私のJavascriptの
randomBoxes();
function getRandomColor() { //Generates a random hex number for the color
var color = '#';
for (var i = 0; i < 6; i++) {
color += (Math.random() * 16 | 0).toString(16);
}
return color;
}
function boundryNum(theMin, theMax) {
var theRange = (theMax - theMin) + 1;
var randomNum = Math.floor((Math.random() * theRange) + theMin);
return randomNum;
}
function drawbox() {
var width = Math.floor(Math.random() * 200) +20; //Random witdth 20-200
var height = Math.floor(Math.random() * 200) + 20; //Random height 20-200
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(boundryNum(25,800),boundryNum(25,400),width,height); //ctx.fillRect(x, y, width, height), where x and y are the coordinates of the starting place on the canvas.
context.fillStyle = getRandomColor();
}
function randomBoxes(){
var number = Math.floor(Math.random() * 5) + 1; //Three to six times....
while(number >= 0){
drawbox();
number--;
}
setInterval(drawbox, 2000)
}
私はこれと私の上の研究の二日間を行っている
html{
font-size: 14px;
}
header{
background-color: black;
height: 3rem;
text-align: center;
}
h1{
color: white;
}
h2{
color:black;
}
body{
background-color: black;
padding-left: 30px;
padding-right: 30px;
}
#canvas {
position: absolute;
top: 4.5rem; //Starting point top-left.
left: 1.5rem;
width: 1000px;
height: 500px;
background: black;
animation: move 3s ease infinite;
}
@keyframes move {
50% {
transform: translate(800px, 200px); //(horizotal travel, verticle travel)
}
}
footer{
background-color: lime;
text-align: center;
color: black;
margin-top: 800px;
}
私のCssキャンバスのマウス座標を使って配列を調べ、矩形の座標との比較を行い、キャンバスの描画のclearRectangle属性を使って矩形をクリアするということです。私はこの課題の最後のステップで本当に立ち往生しています。それがどのように行われているか分かっているなら、私はそれを行う方法を学ぶ準備ができています。
このクラスの最終プロジェクトでは、矩形の作成を高速化し、グラデーションとシャドウの一部を与えることで、難易度が上がるゲームにしたいと考えています。ありがとう。
申し訳ありませんが、私の元のコメントでは、CSSでアニメーションをやっていることを忘れていました。ボックスにクリックハンドラを添付して削除することもできますが、JSでアニメーションを行い、配列を使用してボックスを管理することに切り替えることができます。私はそれがあなたに動きの様式をより良くコントロールできると思います。 – JonSG
あなたのデザインは少し珍しいです。 **開始のヒント：**通常のデザインは、すべてのrectを配列に配置し、すべてのrectをキャンバスに描画することです。キャンバスの矩形を移動することはできませんが、キャンバスを消去して、すべての矩形を新しい位置に再描画することができます（移動の効果を作り出す）。キャンバスの 'mousedown'イベントに登録することで、ユーザーがイベントをクリックするのを聞くことができます。マウスが 'mousex> rectx && mousex recty && mousey
markE