Question

我基本上正在尝试创建这个数字猜谜游戏。每当用户点击其中一个圆圈时，它应该改变颜色，并且它应该存储该数字并检查它是否与数组中的数字匹配，如果匹配，则用户获胜，如果不是，则获胜用户输了。但我在制作它时遇到了麻烦。我能够创建一个板，当你点击圆圈它改变颜色然后我做了一个新的项目，我用于数字猜测而不使用HTML只是javascript，看看我是否可以只是理解制作游戏的概念和它工作。然而，在将它们组合在一起之后，结果是非常错误的。现在，点击圆圈后不仅会得到错误的结果，而且点击它时圆圈的颜色也不会改变。我该怎么办？我哪里出错了..请解释一下。这是我的代码。顺便说一句，我使用的修改变量是将数组减少到3个元素，所以在这5个数组元素中，用户只选择3个。

 var Color="#F1C40F";	
    function theFunctions(element){
    if(Color=='#F1C40F')
    {
    Color='#F00';
    }
    else
    {
    Color='#F1C40F';
    }
    element.style.backgroundColor=Color;
    var number= new Array(1,2,3,4,5);
    var time=new Array();
    var i;
    var modify= new Array();
    for(i=0;i<3;i++){
    modify[i]=number[i];
    }
    for(i=0;i<3;i++){
    time[i]=number;
    if(modify[i]==time[i]){
    document.write(time[i]+" Correct");
    }
    else{
    document.write("Sorry but you lost the correct order is "+modify);
    break;
    }
    }
    };

   div#gameboard{
    background:#D35400;
    border:#999 2px solid;
    width:1200px;
    height:900px;
    margin:35px;
    margin-top:40px;
    padding:30px;
    }
    div#board{
    background:#EB984E;
    height:800px;
    width:800px;
    margin-top:20px;
    margin-left:20px;
    padding:30px;
    }
    div.circleBase {
        border-radius: 50%;
        behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    	width: 130px;
        height: 130px;
        background-color:#F1C40F;
        border: 3px solid black;
    }

<div id="gameboard">
    <div id="board">
    <div class="circleBase" onclick="theFunctions(1);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 1</p>
    </div>
    <div class="circleBase" style="margin-left:160px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 2</p>
    </div>
    <div class="circleBase" style="margin-left:320px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 3</p>
    </div>
    <div class="circleBase" style="margin-left:480px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 4</p>
    </div>
    <div class="circleBase" style="margin-left:640px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 5</p>
    </div>
    <div class="circleBase" style="margin-top:10px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 6</p>
    </div>
    <div class="circleBase" style="margin-left:160px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 7</p>
    </div>
    <div class="circleBase" style="margin-left:320px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 8</p>
    </div>
    <div class="circleBase" style="margin-left:480px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:48px; font-size:70px; margin-top:25px;"> 9</p>
    </div>
    <div class="circleBase" style="margin-left:640px; margin-top:-136px;" onclick="theFunctions(this);">
    <p style="margin-left:30px; font-size:70px; margin-top:25px;"> 10</p>
    </div>
    </div>
    </div>

Answer 1

您在根<script>标记内有<style>和<html>个标记。如果将它们移到<head>标记内，则代码可以正常工作。删除</head>并在结束</script>标记后移至Realm。

虽然，当用户选择错误的序列时，您的代码当前会覆盖页面上的所有内容，但请尝试将css类添加到隐藏元素以显示成功/错误消息。

使用javascript和html创建程序时遇到问题

1 个答案: