个人中心
gpt4 book ai didi

javascript - 如何将图像直接清除到下一个 html Canvas 游戏中？

转载 作者：太空宇宙 更新时间：2023-11-04 10:12:28 26 4
gpt4 key购买 nike

我制作了一款游戏，一款赛车游戏。代码是:

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>

样式.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>

问题出在怪物图像上。

当这个图像以更快的速度到达汽车图像时，它会留下一些“痕迹”。

我该如何解决？

最佳答案

答案

我认为您的问题与使用 clearRect 进行清理有关。与其仔细寻找特定位置来清除 Canvas (即 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 开头的后续数字)被视为 base 8 number .我很确定你不是打算在那里有一个八进制数，但如果是这种情况，那么正确的格式是用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

这就是我找到的所有内容。祝你游戏好运!干杯!

关于javascript - 如何将图像直接清除到下一个 html Canvas 游戏中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37482603/

26 4 0
文章推荐： java - 在 session.close() 之后设置 session=null 是否有意义？
文章推荐： python - 使用 bs4 查找包含文本的 html 标签 (h2)
文章推荐： java - InspectIT APM - 无法深入了解方法
文章推荐： python - 统计字符串中长度为n(未给出)的子串出现x次
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com