Javascript 点击图片时结束游戏

Question

嘿，这是我第一次使用 Whosebug！

我正在构建一个小型 javascript html5 游戏，您可以在其中单击类似打地鼠的对象。目标是杀死尽可能多的 "gem green" 和“ gem blue" as as possible in 10 seconds, and when you click on the "gem red".. 游戏结束并播放声音。

我完成了大部分工作，但我找不到在单击 "gem red" 时结束游戏的方法。我尝试了很多功能和侦听器.. 但无济于事。 . 谁能帮我解决这个问题？

代码如下：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>HTML 5 Gem Game</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

    <style>
        section#game {
            width: 480px;
            height: 800px;
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
            position: relative;
            background-image: url('img/Splash.png');
            position: relative;
            color: #ffffff;
            font-size: 30px;
            font-family: "arial,sans-serif";
        }

        section#game .score{
            display: block;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        section#game .time{
            display: block;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        section#game .start{
            display: block;
            padding-top: 40%;
            margin: 0 auto 0 auto;
            text-align: center;
            width: 70%;
            cursor: pointer;
        }

        section#game .start .high-scores{
            text-align: left;
        }

        section#game .gem{
            display: block;
            position: absolute;
            width: 40px;
            height: 44px;
            cursor: pointer;
        }

        section#game .gem.green{
            background: url('img/Gem Green.png') no-repeat top left;
        }

        section#game .gem.blue{
            background: url('img/Gem Blue.png') no-repeat top left;
        }

        section#game .gem.red{
            background: url('img/Gem Red.png') no-repeat top left;
        }
    </style>
    <script>
        function addEvent(element, event, delegate ) {
            if (typeof (window.event) != 'undefined' && element.attachEvent)
                element.attachEvent('on' + event, delegate);
            else
                element.addEventListener(event, delegate, false);
        }

        function Game(){
            var game = document.querySelector("section#game");
            var score = game.querySelector("section#game span.score");
            var high_scores = game.querySelector("section#game ol.high-scores");
            var time = game.querySelector("section#game span.time");
            var start = game.querySelector("section#game span.start");

            function Gem(Class, Value, MaxTTL) {
                this.Class = Class;
                this.Value = Value;
                this.MaxTTL = MaxTTL;
            };

            var gems = new Array();
            gems[0] = new Gem('green', 10, 1.2);
            gems[1] = new Gem('blue', 20, 1);
            gems[2] = new Gem('red', 50, 0.75);

            function Click(event)
            {
                if(event.preventDefault) event.preventDefault();
                if (event.stopPropagation) event.stopPropagation();
                else event.cancelBubble = true;

                var target = event.target || event.srcElement;

                if(target.className.indexOf('gem') > -1){
                    var value = parseInt(target.getAttribute('data-value'));
                    var current = parseInt( score.innerHTML );
                    var audio = new Audio('music/blaster.mp3');
                    audio.play();
                    score.innerHTML = current + value;
                    target.parentNode.removeChild(target);
                }

                return false;
            }

            function Remove(id) {
                var gem = game.querySelector("#" + id);

                if(typeof(gem) != 'undefined')
                    gem.parentNode.removeChild(gem);
            }

            function Spawn() {
                var index = Math.floor( ( Math.random() * 3 ) );
                var gem = gems[index];

                var id = Math.floor( ( Math.random() * 1000 ) + 1 );
                var ttl = Math.floor( ( Math.random() * parseInt(gem.MaxTTL) * 1000 ) + 1000 ); //between 1s and MaxTTL
                var x = Math.floor( ( Math.random() * ( game.offsetWidth - 40 ) ) );
                var y = Math.floor( ( Math.random() * ( game.offsetHeight -  44 ) ) );

                var fragment = document.createElement('span');
                fragment.id = "gem-" + id;
                fragment.setAttribute('class', "gem " + gem.Class);
                fragment.setAttribute('data-value', gem.Value);

                game.appendChild(fragment);

                fragment.style.left = x + "px";
                fragment.style.top = y + "px";

                setTimeout( function(){
                    Remove(fragment.id);
                }, ttl)
            }

            <!-- parse high score keeper -->
            function HighScores() {
                if(typeof(Storage)!=="undefined"){
                    var scores = false;
                    if(localStorage["high-scores"]) {
                        high_scores.style.display = "block";
                        high_scores.innerHTML = '';
                        scores = JSON.parse(localStorage["high-scores"]);
                        scores = scores.sort(function(a,b){return parseInt(b)-parseInt(a)});

                        for(var i = 0; i < 10; i++){
                            var s = scores[i];
                            var fragment = document.createElement('li');
                            fragment.innerHTML = (typeof(s) != "undefined" ? s : "" );
                            high_scores.appendChild(fragment);
                        }
                    }
                } else {
                    high_scores.style.display = "none";
                }
            }

            function UpdateScore() {
                if(typeof(Storage)!=="undefined"){
                    var current = parseInt(score.innerHTML);
                    var scores = false;
                    if(localStorage["high-scores"]) {

                        scores = JSON.parse(localStorage["high-scores"]);
                        scores = scores.sort(function(a,b){return parseInt(b)-parseInt(a)});

                        for(var i = 0; i < 10; i++){
                            var s = parseInt(scores[i]);

                            var val = (!isNaN(s) ? s : 0 );
                            if(current > val)
                            {
                                val = current;
                                scores.splice(i, 0, parseInt(current));
                                break;
                            }
                        }

                        scores.length = 10;
                        localStorage["high-scores"] = JSON.stringify(scores);

                    } else {
                        var scores = new Array();
                        scores[0] = current;
                        localStorage["high-scores"] = JSON.stringify(scores);
                    }

                    HighScores();
                }
            }

            function Stop(interval) {
                clearInterval(interval);
            }

            this.Start = function() {
                score.innerHTML = "0";
                start.style.display = "none";
                var interval = setInterval(Spawn, 750);

                var count = 10;
                var counter = null;

                function timer()
                {
                    count = count-1;
                    if (count <= 0)
                    {
                        var left = document.querySelectorAll("section#game .gem");

                        for (var i = 0; i < left.length; i++) {
                            if(left[i] && left[i].parentNode) {
                                left[i].parentNode.removeChild(left[i]);
                            }
                        }
                        Stop(interval);
                        Stop(counter);
                        time.innerHTML = "Game Over!";
                        start.style.display = "block";

                        UpdateScore();

                        return;
                    } else {
                        time.innerHTML = count + "s left";
                    }
                }

                counter = setInterval(timer, 1000);

                setTimeout( function(){
                    Stop(interval);
                }, count * 1000)
            };

            addEvent(game, 'click', Click);
            addEvent(start, 'click', this.Start);
            HighScores();
        }

        addEvent(document, 'readystatechange', function() {
            if ( document.readyState !== "complete" )
                return true;

            var game = new Game();
        });
    </script>
</head>
<body>
    <div id="page">
        <section id="game">
            <span class="score">0</span>
            <span class="time">0</span>
            <span class="start">START!
            <ol class="high-scores"></ol>
            </span>
        </section>
    </div>
</body>
</html>

Answer 1

对于初学者，您不应包含样式 sheet 和整个 HTML 文件，因为两者都不相关，您应该使用 canvas 元素而不是这种混乱的使用CSS 和 html 元素，这将使您的代码大小减半。此外，您应该能够通过在单击红色 gem 时将某些全局布尔变量更改为 false 并且当布尔变量为 false 时（此 if 语句属于游戏循环的末尾）调用来解决此问题停止（arg）/clearInterval（arg）。鉴于您当前的代码似乎没有指示游戏状态的全局布尔变量（使用枚举通常是更简洁的解决方案，但简单的布尔值似乎适合这种情况）

Answer 2

阿莱西奥 -

您只需对代码进行一些小改动即可使其正常运行。下面的示例应该可以帮助您朝着正确的方向开始。祝你好运。

变化：

添加一个 endGame() 函数并将停止游戏逻辑从 timer() 函数移入其中。

向 click() 函数添加一行以检查红色 gem 点击。

if (target.className.indexOf('red') > 0) endGame("Red Gem - You win!");

在 Game 对象的顶部声明 count、counter 和 interval 变量。

下面的代码还有一些用于调试的小 CSS 更改，您可以删除这些更改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>HTML 5 Gem Game</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

    <style>

        section#game {
            width: 480px;
            height: 800px;
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
            position: relative;
            background-image: url('img/Splash.png');
   border: 1px red dotted;
            position: relative;
            color: red;
            font-size: 30px;
            font-family: "arial,sans-serif";
        }

        section#game .score{
            display: block;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        section#game .time{
            display: block;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        section#game .start{
            display: block;
            padding-top: 40%;
            margin: 0 auto 0 auto;
            text-align: center;
            width: 70%;
            cursor: pointer;
        }

        section#game .start .high-scores{
            text-align: left;
        }

        section#game .gem{
            display: block;
            position: absolute;
            width: 40px;
            height: 44px;
            cursor: pointer;
        }

        section#game .gem.green{
            background: url('img/Gem Green.png') no-repeat top left;
   background-color: green;
        }

        section#game .gem.blue{
            background: url('img/Gem Blue.png') no-repeat top left;
   background-color: blue;
        }

        section#game .gem.red{
            background: url('img/Gem Red.png') no-repeat top left;
   background-color: red;
        }
    </style>
    <script>
        function addEvent(element, event, delegate ) {
            if (typeof (window.event) != 'undefined' && element.attachEvent)
                element.attachEvent('on' + event, delegate);
            else
                element.addEventListener(event, delegate, false);
        }

        function Game(){
            var game = document.querySelector("section#game");
            var score = game.querySelector("section#game span.score");
            var high_scores = game.querySelector("section#game ol.high-scores");
            var time = game.querySelector("section#game span.time");
            var start = game.querySelector("section#game span.start");
   var interval, counter, count;

            function Gem(Class, Value, MaxTTL) {
                this.Class = Class;
                this.Value = Value;
                this.MaxTTL = MaxTTL;
            };

            var gems = new Array();
            gems[0] = new Gem('green', 10, 1.2);
            gems[1] = new Gem('blue', 20, 1);
            gems[2] = new Gem('red', 50, 0.75);

            function Click(event)
            {
                if(event.preventDefault) event.preventDefault();
                if (event.stopPropagation) event.stopPropagation();
                else event.cancelBubble = true;

                var target = event.target || event.srcElement;

                if(target.className.indexOf('gem') > -1){
                    var value = parseInt(target.getAttribute('data-value'));
                    var current = parseInt( score.innerHTML );
                    var audio = new Audio('music/blaster.mp3');
                    audio.play();
                    score.innerHTML = current + value;
                    target.parentNode.removeChild(target);
     
     if (target.className.indexOf('red') > 0) endGame("Red Gem - You win!");
     
                }

                return false;
            }

            function Remove(id) {
                var gem = game.querySelector("#" + id);

                if(typeof(gem) != 'undefined')
                    gem.parentNode.removeChild(gem);
            }

            function Spawn() {
                var index = Math.floor( ( Math.random() * 3 ) );
                var gem = gems[index];

                var id = Math.floor( ( Math.random() * 1000 ) + 1 );
                var ttl = Math.floor( ( Math.random() * parseInt(gem.MaxTTL) * 1000 ) + 1000 ); //between 1s and MaxTTL
                var x = Math.floor( ( Math.random() * ( game.offsetWidth - 40 ) ) );
                var y = Math.floor( ( Math.random() * ( game.offsetHeight -  44 ) ) );

                var fragment = document.createElement('span');
                fragment.id = "gem-" + id;
                fragment.setAttribute('class', "gem " + gem.Class);
                fragment.setAttribute('data-value', gem.Value);

                game.appendChild(fragment);

                fragment.style.left = x + "px";
                fragment.style.top = y + "px";

                setTimeout( function(){
                    Remove(fragment.id);
                }, ttl)
            }

            <!-- parse high score keeper -->
            function HighScores() {
                if(typeof(Storage)!=="undefined"){
                    var scores = false;
                    if(localStorage["high-scores"]) {
                        high_scores.style.display = "block";
                        high_scores.innerHTML = '';
                        scores = JSON.parse(localStorage["high-scores"]);
                        scores = scores.sort(function(a,b){return parseInt(b)-parseInt(a)});

                        for(var i = 0; i < 10; i++){
                            var s = scores[i];
                            var fragment = document.createElement('li');
                            fragment.innerHTML = (typeof(s) != "undefined" ? s : "" );
                            high_scores.appendChild(fragment);
                        }
                    }
                } else {
                    high_scores.style.display = "none";
                }
            }

            function UpdateScore() {
                if(typeof(Storage)!=="undefined"){
                    var current = parseInt(score.innerHTML);
                    var scores = false;
                    if(localStorage["high-scores"]) {

                        scores = JSON.parse(localStorage["high-scores"]);
                        scores = scores.sort(function(a,b){return parseInt(b)-parseInt(a)});

                        for(var i = 0; i < 10; i++){
                            var s = parseInt(scores[i]);

                            var val = (!isNaN(s) ? s : 0 );
                            if(current > val)
                            {
                                val = current;
                                scores.splice(i, 0, parseInt(current));
                                break;
                            }
                        }

                        scores.length = 10;
                        localStorage["high-scores"] = JSON.stringify(scores);

                    } else {
                        var scores = new Array();
                        scores[0] = current;
                        localStorage["high-scores"] = JSON.stringify(scores);
                    }

                    HighScores();
                }
            }

            function Stop(interval) {
                clearInterval(interval);
            }
   
            function endGame( msg ) {
    count = 0;
    Stop(interval);
                Stop(counter);
       var left = document.querySelectorAll("section#game .gem");
                for (var i = 0; i < left.length; i++) {
     if(left[i] && left[i].parentNode) {
      left[i].parentNode.removeChild(left[i]);
                    }
                }
                time.innerHTML = msg || "Game Over!";
                start.style.display = "block";
                UpdateScore();
   }
   
            this.Start = function() {
                score.innerHTML = "0";
                start.style.display = "none";
                interval = setInterval(Spawn, 750);

                count = 10;
                counter = null;

                function timer()
                {
                    count = count-1;
                    if (count <= 0)
                    {
                        endGame();

                        return;
                    } else {
                        time.innerHTML = count + "s left";
                    }
                }

                counter = setInterval(timer, 1000);

                setTimeout( function(){
                    Stop(interval);
                }, count * 1000)
            };

            addEvent(game, 'click', Click);
            addEvent(start, 'click', this.Start);
            HighScores();
        }

        addEvent(document, 'readystatechange', function() {
            if ( document.readyState !== "complete" )
                return true;

            var game = new Game();
        });
    </script>
</head>
<body>
    <div id="page">
        <section id="game">
            <span class="score">0</span>
            <span class="time">0</span>
            <span class="start">START!
            <ol class="high-scores"></ol>
            </span>
        </section>
    </div>
</body>
</html>

Javascript 点击图片时结束游戏

Javascript end game when click on image

html

javascript

onclick

cordova