-1
私はJava Scriptの絶対的な初心者です。私の仕事は、マップ上の特定の位置にマウスがあると、曲が再生されるインタラクティブラジオを作ることです。それは動作しますが、ブラウザウィンドウの特定のサイズでのみ動作します。サイズを変更すると、「曲の位置」が間違って配置されます。ブラウザウィンドウの変更でウィンドウのX位置が変わる
私はp5ライブラリを使用しています。
これは私のHTMLコードです：
<!DOCTYPE html>
<html>
<head>
<title>Canvas Trial</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"> </script>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
</head>
<body>
<center><p class="title">CHRISTMAS RADIO</p></center>
<div class="radio" id="clickArea" onmousemove="trackMouse()">
<img id="radio" onclick="rotate()" src="images/radio.png""></img>
</div>
</body>
</html>
は、これは私のCSSコードです：
canvas{
background-image: url("images/Map1.png");
background-position: center center;
background-repeat: no-repeat no-repeat;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 800px;
border:solid 2px;
border-bottom-color:#ffe;
border-left-color:#eed;
border-right-color:#eed;
border-top-color:#ccb;
max-height:100%;
max-width:100%;
}
p.title{
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
font-weight: 900;
color: white;
text-shadow: -2px 0 #c61819, 0 2px #c61819, 2px 0 #c61819, 0 -2px #c61819;
}
.radio{
position:relative;
top: 10%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
border: solid 2px;
border-color:#52361b;
padding:0;
width: 944px;
height:165px;
}
これは私のJavaスクリプトです：
var x = "";
var y = "";
var song1;
var song2;
function preload() {
song1 = loadSound('audio/2.mp3');
song2 = loadSound('audio/3.mp3');
}
function setup() {
createCanvas(944,566);
}
function draw() {
clear();
x = mouseX;
rect(x, y, 20, 565);
fill(82, 54, 27);
}
function trackMouse(){
var x = event.clientX;
console.log(window.screenX);
if(x>315&&x<340){
song1.loop();
document.getElementById("clickArea").style.backgroundColor="white";
} else {
song1.stop();
document.getElementById("clickArea").style.backgroundColor="black";
}
if(x>400&&x<450){
song2.loop();
document.getElementById("clickArea").style.backgroundColor="#FFDAB9";
} else {
song2.stop();
document.getElementById("clickArea").style.backgroundColor="black";
}
}
//document.getElementById("canvas").style.background-image="url("images/Map2.png")";
あなたが何か提案/アドバイスはありますか？