我正在制作一个游戏插槽并在插画中创建图像但是当我将它们转移到javascript时它们真的很大。反正有没有在javascript中使它们变小或我是否必须再次创建它们并使它们变小？
这是我的代码：
window.onload = function() {
//global variables
var credit=0;
var betAmount=0;
var THREE_DIAMONDS="";
var TWO_DIAMONDS="";
var ONE_DIAMOND="";
var SAME_BOTH="";
var SAME_COLOR="";
var SAME_SHAPE="";
var redSquare={shape:"square", color:"red", width:100, height:100, image:"images/apple.png"};
var blueCircle={shape:"circle", color:"blue", width:100, height:100,image:"images/apple2.png"};
var blueSquare={shape:"square", color:"blue", width:100, height:100,image:"images/apple3.png"};
var blueTriangle={shape:"triangle", color:"blue", width:100, height:100,image:"images/cherry.png"};
var greenCircle={shape:"circle", color:"green",width:100, height:100, image:"images/cherry2.png"};
var greenSquare={shape:"square", color:"green", width:100, height:100,image:"images/cherry3.png"};
var greenTriangle={shape:"triangle", color:"green", width:100, height:100,image:"images/watermelon.png"};
var redCircle={shape:"circle", color:"red", width:100, height:100,image:"images/watermelon2.png"};
var redTriangle={shape:"triangle", color:"red", width:100, height:100,image:"images/watermelon3.png"};
var yellowDiamond={shape:"diamond", color:"yellow", width:100, height:100,image:"images/passion.png"};
var blackSquare={shape:"square", color:"black", width:100, height:100,image:"images/blackSquare.png" };
var slotShapes= [blackSquare, redSquare, redTriangle, redCircle, greenSquare, greenTriangle, greenCircle, blueSquare, blueTriangle, blueCircle, yellowDiamond]
//attaches event to the drop down!
document.getElementById("theList").onchange = function() {
credit = parseInt(document.getElementById("theList").value);
document.getElementById("credits").value= credit;
document.getElementById("theList").disabled = true;
document.getElementById("theList").value = 0;
document.getElementById("clickMe").disabled = false;
document.getElementById("img1").src = slotShapes[Math.floor(Math.random()*9)+1].image;
document.getElementById("img2").src = slotShapes[Math.floor(Math.random()*9)+1].image;
document.getElementById("img3").src = slotShapes[Math.floor(Math.random()*9)+1].image;
document.getElementById("output").innerHTML = "Good luck!!!";
}
var threePics=[];
document.getElementById("clickMe").onclick = function() {
if (document.getElementById("bet1").checked === true){
betAmount="1";
} else if (document.getElementById("bet2").checked === true){
betAmount="2";
} else if (document.getElementById("bet3").checked === true){
betAmount="3";
}
credit = credit - betAmount;
document.getElementById("credits").value= credit;
for(i = 0; i < 3; i++){
var random = Math.floor(Math.random()*19)+1;
switch (random)
{
case 1:
case 2:
document.getElementById("img" + (i+1)).src = slotShapes[1].image;
threePics[i]= slotShapes[1];
break;
case 3:
case 4:
document.getElementById("img" + (i+1)).src = slotShapes[2].image;
threePics[i]= slotShapes[2];
break;
case 5:
case 6:
document.getElementById("img" + (i+1)).src = slotShapes[3].image;
threePics[i]= slotShapes[3];
break;
case 7:
case 8:
document.getElementById("img" + (i+1)).src = slotShapes[4].image;
threePics[i]= slotShapes[4];
break;
case 9:
case 10:
document.getElementById("img" + (i+1)).src = slotShapes[5].image;
threePics[i]= slotShapes[5];
break;
case 11:
case 12:
document.getElementById("img" + (i+1)).src = slotShapes[6].image;
threePics[i]= slotShapes[6];
break;
case 13:
case 14:
document.getElementById("img" + (i+1)).src = slotShapes[7].image;
threePics[i]= slotShapes[7];
break;
case 15:
case 16:
document.getElementById("img" + (i+1)).src = slotShapes[8].image;
threePics[i]= slotShapes[8];
break;
case 17:
case 18:
document.getElementById("img" + (i+1)).src = slotShapes[9].image;
threePics[i]= slotShapes[9];
break;
case 19:
document.getElementById("img" + (i+1)).src = slotShapes[10].image;
threePics[i]= slotShapes[10];
break;
default:
break;
}
}
if (threePics[0].color === "yellow" && threePics[1].color === "yellow" && threePics[2].color === "yellow"){
//jackpot
} else if (threePics[0].color === "yellow" && threePics[1] === "yellow" ||
threePics[0].color === "yellow" && threePics[2] === "yellow" ||
threePics[1].color === "yellow" && threePics[2] === "yellow") {
document.getElementById("output").innerHTML = "NICE!!! Two diamonds pay " + (TWO_DIAMONDS * betAmount) + " on a bet of " + betAmount;
} else if (threePics[0].color === "yellow" || threePics[1].color === "yellow" || threePics[2].color === "yellow") {
credit = credit + (ONE_DIAMOND * betAmount);
} else if (threePics[0].shape === threePics[1].shape && threePics[0].shape === threePics[2].shape &&
threePics[0].color === threePics[1].color && threePics[0].color === threePics[2].color) {
document.getElementById("output").innerHTML = "Same shape and color pays " + (SAME_BOTH * betAmount) + " on a bet of " + betAmount;
credit = credit + (SAME_SHAPE * betAmount);
}
else if (threePics[0].shape === threePics[1].shape && threePics[0].shape === threePics[2].shape) {
document.getElementById("output").innerHTML = "Same shape pays " + (SAME_SHAPE * betAmount) + " on a bet of " + betAmount;
credit = credit + (SAME_SHAPE * betAmount);
} else if (threePics[0].color === threePics[1].color && threePics[0].color === threePics[2].color) {
document.getElementById("output").innerHTML = "Same color pays " + (SAME_COLOR * betAmount) + " on a bet of " + betAmount;
credit = credit + (SAME_COLOR * betAmount);
}
else {
document.getElementById("output").innerHTML = "Too bad. Loss of " + betAmount;
}
}
}
答案 0 :(得分：0)
您可以手动设置宽度和高度
document.getElementById("img" + (i+1)).width = '12px';
document.getElementById("img" + (i+1)).height = '12px';
答案 1 :(得分：0)
如果您正在使用Illustrator创建图像，则可以选择将其创建为svg并将其嵌入<svg>标记内并在其中设置属性。还有简单的css技巧来硬编码高度*宽度，最好使用＆＃39;％＆＃39;用于响应式布局。