堆棧內存溢出
  簡體   English   中英

如何清除圖像進入下一個HTML畫布游戲？

[英]How to clear image right into next html canvas games?

 原文  2016-05-27 11:40:34  5   1    javascript/ jquery/ html/ css/ html5-canvas

問題描述

我做了一個游戲，一個賽車游戲。 代碼是：

index.html 

<!DOCTYPE html>
<html>
<head>
    <title> Race car </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script>
        var ctx;

            //save the parameters to variables for easier clearing
        var x_Car = 30,
            y_Car = 95,
            width_Car = 110,
            height_Car = 55,
            imgCar = new Image();
        imgCar.src = "cars/race-car.png";

        var nrMonsters = 0,
            imgMonster = new Image();
        imgMonster.src = "Monster/yellow_monster.png";

        var width_Monster = 100;
        var height_Monster = 20;
        var x_Monster = 50;
        var y_Monster = 5;
        var speed = 1;

        // function drawMonster() {
        //     ctx.drawImage(imgMonster, x_Monster, y_Monster, width_Monster, height_Monster);
        // }
        function drawCar() {
            ctx.drawImage(imgCar, x_Car, y_Car, width_Car, height_Car);
        }

        function rand() {
            var left = 50;
            var right = 150;
            var z;
            var random = Math.random();

            if (random > 0.5) {
                 z = right;
            } else {
                 z = left;
            }
            return z;
        }

        valX = rand();

        function draw(x, y) {
           //ctx.save();
            if (valX == 50 && x_Car > 75) {
                ctx.clearRect(x + 5, -5, 150, 150);  // 95 cu 150
            } else if (valX == 50) {
                ctx.clearRect(x + 5, y, 150, 10);
            } else if (valX == 150 && x_Car < 32){
                ctx.clearRect(x + 150, -5, 260, 150);  // 95 cu 150
            } else if (valX == 150) {
                ctx.clearRect(x + 150, y, 260, 10);
            }

            ctx.drawImage(imgMonster, valX, y, width_Monster, height_Monster);
            ctx.restore();

            y += speed;
            if (y == y_Car && x_Car < 32 && valX == 50
             || y == y_Car && x_Car > 75 && valX == 150
             || y > y_Car && y < y_Car + height_Car && x_Car < 32 && valX == 50
             || y > y_Car && y < y_Car + height_Car && x_Car > 75 && valX == 150) {
                window.location.href = "you_lost_the_game.html";
                // alert("You lost the game");
            }

            var loopTimer = setTimeout("draw(" + x + ", " + y + ")", 20);

           if (y == 150 && nrMonsters < 15
            || y == 160 && nrMonsters >= 15) {
                valX = rand();
                nrMonsters++;

                console.log(nrMonsters);
                document.getElementById("numarObstacole").innerHTML  = nrMonsters;

                if (nrMonsters == 5
                 || nrMonsters == 10
                 || nrMonsters == 20
                 || nrMonsters == 25) {
                // || nrMonsters == 20 || nrMonsters == 27) {
                    speed += 1;
                } else if (nrMonsters == 15) {
                    speed += 1;
                }

                draw(0, 0);

                if (nrMonsters == 25) {
                    window.location.href = "win.html";
                }
           }

        }

        function init() {
            ctx = document.getElementById("canvas").getContext("2d");
            // audio
            // myAudio = new Audio('http://static1.grsites.com/archive/sounds/cars/cars002.wav'); 
            myAudio = new Audio("Sounds/Get low NFS.mp3");
            myAudio.addEventListener("ended", function() {
                this.currentTime = 0;
                this.play();
            }, false);
            myAudio.play(); 

            //draw wall

            draw(0, 0); 
            drawCar();

            function moveRight() {
                ctx.clearRect(x_Car, y_Car, width_Car, height_Car);
                x_Car = x_Car + 120;
                if(x_Car > 220){
                    x_Car -= 120;
                    drawCar();
                } else {
                    drawCar();
                }
            }

            function moveLeft() {
                ctx.clearRect(x_Car, y_Car, width_Car, height_Car);
                x_Car = x_Car-120;
                if (x_Car < 20) {
                    x_Car += 120;
                    drawCar();
                } else {
                    drawCar();
                }
            }

            function moveUp() {
                ctx.clearRect(x_Car, y_Car, width_Car, height_Car);
                y_Car = y_Car-20;
                drawCar();
            }

            function moveDown() {
                ctx.clearRect(x_Car, y_Car, width_Car, height_Car);
                y_Car = y_Car + 20;
                drawCar();
            }

            window.addEventListener("keypress", checkKeyPressed, false);

            function checkKeyPressed(e) {
                if (e.charCode == "97" || e.charCode == 027) {
                    moveLeft();
                }
                if (e.charCode == "100" || e.charCode== 026) {
                    moveRight();
                }
                if (e.charCode == "119" || e.charCode== 024) {
                    moveUp();
                }
                if (e.charCode == "115" || e.charCode== 025) {
                    moveDown();
                }
            }
        }

        function moveRight() {
            ctx.clearRect(x_Car, y_Car, width_Car, height_Car);
            x_Car = x_Car + 120;
            if (x_Car > 220) {
                x_Car -= 120;
                drawCar();
            } else {
                drawCar();
            }
        }

        function moveLeft() {
            ctx.clearRect(x_Car, y_Car, width_Car, height_Car);
            x_Car = x_Car - 120;
            if(x_Car < 20) {
                x_Car += 120;
                drawCar();
            } else {
                drawCar();
            }
        }

        function moveUp() {
            ctx.clearRect(x_Car, y_Car, width_Car, height_Car);
            y_Car = y_Car - 20;
            drawCar();
        }

        function moveDown() {
            ctx.clearRect(x_Car, y_Car, width_Car, height_Car);
            y_Car = y_Car + 20;
            drawCar();
        }

        window.addEventListener("keypress", checkKeyPressed, false);

        function checkKeyPressed(e) {
            if (e.charCode == "97") {
                moveLeft();
            }
            if (e.charCode == "100") {
                moveRight();
            }
            if (e.charCode == "119") {
                moveUp();
            }
            if (e.charCode == "115") {
                moveDown();
            }
        }
    </script>
</head>
<body onLoad="init();">
    <div id="moveButons">
        <table>
            <tr>
                <td></td>
                <td>
                    <input class="button" id="up" type="button" value="Move Up" onclick="moveUp()"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <input class="button" id="left" type="button" value="Move Left" onclick="moveLeft()"/>
                </td>
                <td></td>
                <td>
                    <input class="button" id="right" type="button" value="Move Right" onclick="moveRight()"/>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input class="button" id="down" type="button" value="Move Down" onclick="moveDown()"/>
                </td>
                <td></td>
            </tr>
        </table>
    </div>
    <p class="numarObstacole">
        Ai trecut peste <span id="numarObstacole"> 0 </span> obstacole
    </p>
    <canvas id="canvas">
        Your browser doesn't support the HTML5 element canvas.
    </canvas>
</body>
</html>

style.css 

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: yellow;
}

#canvas {
    background: white;
    margin-left: 50%;
    position: absolute;
    left: -206px;
    width: 412px;
    height: 100%;
    background-image: url("street/street (2).jpg");
    background-position: 0px 0px;
    background-repeat: repeat-y;

    -webkit-animation: animatedBackground 5s linear infinite;
       -moz-animation: animatedBackground 5s linear infinite;
            animation: animatedBackground 5s linear infinite;
}

#moveButons {
    position: absolute;
    left: 20px;
    top: 50px;
}

@-webkit-keyframes animatedBackground {
    from {  background-position: 0 100%;  }
      to {  background-position: 0 0;     }
}
@-moz-keyframes animatedBackground {
    from {  background-position: 0 100%;  }
      to {  background-position: 0 0;     }
}
@keyframes animatedBackground {
    from {  background-position: 0 100%;  }
      to {  background-position: 0 0;     }
}

#lostGame {
    text-align: center;
    color: red;
    margin-top: 175px;
}

#win {
    text-align: center;
    color: blue;
    margin-top: 175px;
}

#canvas_lost {
    width: 320px;
    height: 240px;
    background: url("Joker/the-joker-laughing-1.jpg");
    margin-left: 50%;
    position: absolute;
    left: -160px;
}

#canvas_win {
    width: 320px;
    height: 240px;
    background: url("Joker/joker.gif");
    margin-left: 50%;
    position: absolute;
    left: -160px;
}

.button {
    color: blue;
    font-size: 17px;
    text-align: center;
    background: #6BA7FA;
    width: 100px;
}

.numarObstacole {
    position: absolute;
    color: #1F1;
    background: silver;
    font-size: 20px;
    font-family: Serif;
}

#numarObstacole {
    color: blue;
    font-size: 22px;
    font-family: sans-serif;
}

win.html 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title> Win </title>
    <script>
        function init() {
            var canvas = document.getElementById("canvas_win");
            var ctx = canvas.getContext("2d");

            var myAudio = new Audio("Sounds/Fireworks Finale.mp3"); 
            myAudio.addEventListener("ended", function() {
                this.currentTime = 0;
                this.play();
            }, false);
            myAudio.play();

            var otherAudio = new Audio("Sounds/Audience_Applause.mp3"); 
            otherAudio.addEventListener("ended", function() {
                this.currentTime = 0;
                this.play();
            }, false);
            otherAudio.play()
        }
    </script>
</head>
<body onLoad="init();">
    <h1 id="win"> You win </h1>
    <canvas id="canvas_win">
        Your browser doesn't support the HTML5 element canvas.
    </canvas>
</body>
</html>

you_lost_the_game.html 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title> You lost the game </title>
    <script>
        function init() {
            var canvas = document.getElementById("canvas_lost");
            var ctx = canvas.getContext("2d");

            var myAudio = new Audio("Sounds/hahaha-Peter_De_Lang.mp3");
            myAudio.addEventListener("ended", function() {
                this.currentTime = 0;
                this.play();
            }, false);
            myAudio.play();
        }
    </script>
</head>
<body onLoad="init();">
    <h1 id="lostGame"> You lost the game </h1>
    <canvas id="canvas_lost">
        Your browser doesn't support the HTML5 element canvas.
    </canvas>
</body>
</html>

問題出在怪物形象上。

當此圖像以更高的速度出現在汽車圖像上時，它會留下一些“痕跡”。

我該如何解決？

1 個解決方案

解決方案1
 1  2017-03-01 04:48:50

答案

我相信您的問題在於您使用clearRect清除。 與其仔細尋找清理畫布的特定位置（即ctx.clearRect(x + 150, -5, 260, 150); ）， ctx.clearRect(x + 150, -5, 260, 150);直接進行以下操作： 

// Get <canvas> on a variable
var canvas = document.getElementById("canvas");

// ctx is still the same
var ctx = canvas.getContext("2d");


function draw(x, y) {

    // Clears everything on the canvas on every loop
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ...

這樣，汽車或怪物留下的任何“痕跡”都將在每一幀清除。

現在，對於編碼建議：

  1. 無需在音頻結束時添加事件偵聽器，只需將loop屬性設置為true 。 這是一些代碼： 
// Your current code
var myAudio = new Audio("Sounds/---.mp3"); 
myAudio.addEventListener("ended", function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();


// Some smaller and more efficient code
var myAudio = new Audio("Sounds/---.mp3");
myAudio.loop = true;  // Restarts the audio every time it reaches the end
myAudio.play();
  1. 這段代碼沒有多大意義： 
if (nrMonsters == 5
 || nrMonsters == 10
 || nrMonsters == 20
 || nrMonsters == 25) {
// || nrMonsters == 20 || nrMonsters == 27) {
    speed += 1;
} else if (nrMonsters == 15) {
    speed += 1;
}

如果事情 這樣做，否則做同樣的事情 ？ 快速解決方法： 

if (nrMonsters == 5
 || nrMonsters == 10
 || nrMonsters == 15
 || nrMonsters == 20
 || nrMonsters == 25) {
    speed += 1;
}
  1. 您在這里不需要else ： 
// From the moveRight() function
if (x_Car > 220) {
    x_Car -= 120;
    drawCar();
} else {
    drawCar();
}

您會發現，無論如何，如果要使用drawCar() ，則無需將其放入if 。 這里是更好的代碼： 

if (x_Car > 220) {
    x_Car -= 120;
}
drawCar();
  1. 您不應該使用這些前導零： 
// From the checkKeyPressed() function
if (e.charCode == "97" || e.charCode == 027) {  ...  }

那個027 （和一些后面帶有0數字）被當作基數8 。 我很確定這不是您想要在其中使用八進制數的意圖，但是如果是這樣，那么正確的格式是在其前面加上0o而不是一個零。 

var binal = 0b10;  // (0b)10 in base 2 is equal to 2 in decimal
var octal = 0o10;  // (0o)10 in base 8 is equal to 8 in decimal
var hexal = 0x10;  // (0x)10 in base 16 is equal to 16 in decimal

這就是我發現的全部。 祝您游戲順利！ 干杯!

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在HTML5上放新圖像之前如何清除Canvas？ 如何清除包含圖像的畫布？ 如何清除畫布中的圖像上的矩形 canvas的比例如何？ (html) 如何清除HTML畫布中某節的反面？ 如何清除Canvas中的特定行：HTML5 JS游戲和HTML5畫布游戲有什么區別？ 裁剪后的圖像未在HTML5畫布中的前一個圖像旁邊繪制 如何在html5畫布上轉到“下一頁” 如何在按下向左和向右箭頭鍵時旋轉HTML5畫布上的圖像
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM