0
我有一個Canvas動畫,其中服務對象的對象(我的意思是圖片aso是一個img元素)來自上下。使用requestAnimationFrame的Javascript畫布動畫由於路徑變化而變得更快
當我爲這個動畫製作2個主題(我的意思是對象根據主題有不同的圖片)之後,動畫在每個路徑變化和主題變化之後變得更快。
我沒有任何想法是什麼原因。如果任何人都可以幫助我,我會很高興。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript" src="../javascript/liabary.js"></script>
<link rel="stylesheet" href="../css/CSS.css">
</head>
<body class="body2">
<center class="font2"><h2>Cookie Clicker</h2></center>
<canvas id="canvas" style="border: 1px solid; width: 800px; height: 810px;">no support</canvas>
<img onclick="AnimationGroßCookie(); myFunctionAdd()" onMousedown="AnimationKleinCookie()" id="cookie" src="../img/cookie.png" alt="cookie">
<p class="font2" id="p1"></p><p class="font2" id="p2">gesammelte cookies:</p>
<div onclick="DoubleClicker()" class="font2" id="buyMenu">
<p id="DoubleClicker" style="font-size: 19px; margin-left:30px;">Double Clicker</p>
<p style="font-size: 19px; margin-left:55px; margin-top:-15px;">kosten 20</p>
</div>
<div onclick="GeheimesVideo(); " class="font2" id="buyMenu2">
<p>Super Geheimes Video</p> <!--wennn gekauft langsam größer werdenes video-->
<p>kosten: 10.000</p>
</div>
<div onclick="AddPerSecond()" class="font2" id="Platzhalter">
<p>Platzhalter: 1cookie per second</p>
<p>kosten: 100</p>
</div>
<div onclick="ThemeÄndern0(); ThemeÄndernPath();" class="font2" id="Theme1">
<p>Cookie Theme:ändern per click</p>
</div>
<div onclick="ThemeÄndern1(); ThemeÄndernPath();" class="font2" id="Theme2">
<p>Donut Theme:ändern per click</p>
</div>
<script>
console.log("Start");
var counter = 0;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); //ctx = contex
var img = new Image();
var add1 = 10;
var rAF;//raf = requestAnimationFrame
Theme = 0;
canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;
img.onload = function() {
console.log("Loaded image");
if (rAF) cancelAnimationFrame(rAF); //cancel prev animation frame
Hallo();
};
function ThemeÄndernPath() {
var cookie = document.getElementById('cookie');
if (Theme == 0) {
img.src="../img/cookie.png";
cookie.src="../img/cookie.png";
} else {
img.src="../img/donut2.png";
cookie.src="../img/donut2.png";
}
}
ThemeÄndernPath();
//var CookieClickSound = Math.floor((Math.random() * 6) + 0);
var cookieArrayBreite =[];
cookieArrayBreite[0] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[1] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[2] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[3] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[4] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[5] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[6] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[7] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[8] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[9] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[10] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[11] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[12] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[13] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[14] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[15] = Math.floor((Math.random() * 810) + 0);
var cookieArrayHöhe =[];
cookieArrayHöhe[0] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[1] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[2] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[3] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[4] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[5] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[6] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[7] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[8] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[9] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[10] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[11] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[12] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[13] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[14] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[15] = Math.floor((Math.random() * 810) + 0);
setTimeout(function() { cookieCanvas(); },3000); //dont work
window.setInterval(myCallback, 13200);
function myCallback() {
cookieArrayBreite[0] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[1] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[2] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[3] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[4] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[5] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[6] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[7] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[8] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[9] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[10] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[11] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[12] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[13] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[14] = Math.floor((Math.random() * 810) + 0);
cookieArrayBreite[15] = Math.floor((Math.random() * 810) + 0);
console.log(cookieArrayBreite);
}
window.setInterval(myCallback, 13200);
function myCallback() {
cookieArrayHöhe[0] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[1] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[2] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[3] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[4] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[5] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[6] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[7] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[8] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[9] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[10] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[11] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[12] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[13] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[14] = Math.floor((Math.random() * 810) + 0);
cookieArrayHöhe[15] = Math.floor((Math.random() * 810) + 0);
console.log(cookieArrayHöhe);
}
function Hallo() {
if (add1 == 800) {
add1 = 10; // need to reset add's value
console.log("resetet");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(0, 0, 1000, 1000);
ctx.fillStyle = "lightblue";
ctx.fill();
ctx.drawImage(img, cookieArrayBreite[0], cookieArrayHöhe[0] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[1], cookieArrayHöhe[1] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[2], cookieArrayHöhe[2] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[3], cookieArrayHöhe[3] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[4], cookieArrayHöhe[4] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[5], cookieArrayHöhe[5] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[6], cookieArrayHöhe[6] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[7], cookieArrayHöhe[7] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[8], cookieArrayHöhe[8] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[9], cookieArrayHöhe[9] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[10], cookieArrayHöhe[10] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[11], cookieArrayHöhe[11] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[12], cookieArrayHöhe[12] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[13], cookieArrayHöhe[13] + add1, 50, 50);
} else {
console.log("Animation begining");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(0, 0, 1000, 1000);
ctx.fillStyle = "lightblue";
ctx.fill();
ctx.drawImage(img, cookieArrayBreite[0], cookieArrayHöhe[0] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[1], cookieArrayHöhe[1] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[2], cookieArrayHöhe[2] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[3], cookieArrayHöhe[3] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[4], cookieArrayHöhe[4] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[5], cookieArrayHöhe[5] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[6], cookieArrayHöhe[6] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[7], cookieArrayHöhe[7] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[8], cookieArrayHöhe[8] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[9], cookieArrayHöhe[9] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[10], cookieArrayHöhe[10] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[11], cookieArrayHöhe[11] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[12], cookieArrayHöhe[12] + add1, 50, 50);
ctx.drawImage(img, cookieArrayBreite[13], cookieArrayHöhe[13] + add1, 50, 50);
add1++;
}
rAF = requestAnimationFrame(Hallo);
requestAnimationFrame(Hallo);
}
</script>
<audio controls autoplay id="AudioClick">
<source src="" type="">
Audio element is not supported by your browser
</audio>
</body>
</html>
而且她liabarys:
function ThemeÄndern1(){
Theme = 1;
}
function ThemeÄndern0(){
Theme = 0;
}
PS:請原諒我在我的文字gramatical錯誤,我現在還是學生:)
ah okay i tr它感謝你。 :D – Yuto
我編輯它,你的意思是這樣嗎? – Yuto
,如果我這樣做,腳本是如此之快以至於我的瀏覽器正在編寫代碼,所以無法工作。 – Yuto