将控制台日志信息移动到浏览器网页

时间:2016-04-29 04:51:17

标签: javascript

我是一名学生正在从事一个小型视频游戏的班级项目。在游戏中,我有一个随机数生成器编码为1到20之间的按钮。当我按下该按钮时,信息将进入控制台日志。我想做的是将这些信息发送到网页,让它留在那里并记录下来。

Round 1: 5, 

Round 2: 16

等等。我不想让老师帮忙,因为我已经问过他这么多了。我想在没有得到老师的直接帮助的情况下自己学习。我也浏览了整个互联网,并没有找到任何有助于我尝试工作的东西。 请帮忙!

 <html>
 <head> 
<script src="js/createjs-2014.12.12.min.js"></script>   
<script>
var multiplier = 1;
var myStage, txt;
var score = 0
var buttonSheild;


function init(){
myStage = new createjs.Stage(document.getElementById("myCanvas"));

buttonSheild = new createjs.Bitmap("images/buttonSheild.png");
buttonSheild.scaleX = buttonSheild.scaleY = 0.25;
buttonSheild.x = 200;
buttonSheild.y = 0;
myStage.addChild(buttonSheild, txt);

txt = new createjs.Text("did it work");

buttonSheild.addEventListener("click", textClicked);

createjs.Ticker.addEventListener('tick', drawNewFrame);
createjs.Ticker.setFPS(12);
}
function textClicked(){
score++;
txt.text = "does this work?";}
function drawNewFrame(){
myStage.update(12);}


function demoRoll(num){

console.log("You rolled " + rollDie(num) + " out of " + num);

console.log("Multiplier = " + multiplier);

} 

function rollDie(num){

    switch (num) {

        case 20:

            var D20 = (Math.floor(Math.random()*num)+1);

            if (D20 == 20){

                multiplier = 2;

            }

            else{

                multiplier = 1;

            }

            return D20;

            break;

        case 6:

            var D6 = (Math.floor(Math.random()*num)+1)*multiplier;

            multiplier = 1;

            return D6;

            break;

    }        

    }




</script>

</head>
<body>
<button onClick="demoRoll(20)">Roll D20</button>
<button onClick="demoRoll(6)">Roll D6</button>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

您可以使用

document.body.insertAdjacentHTML("beforeend", "<p>" + textToBeInserted + "</p>");

以下是您的代码示例:

<html>
 <head> 

</head>
<body>
<button onClick="demoRoll(20)">Roll D20</button>
<button onClick="demoRoll(6)">Roll D6</button>

<script src="js/createjs-2014.12.12.min.js"></script>   
<script>
var multiplier = 1;
var myStage, txt;
var score = 0
var buttonSheild;


function init(){
myStage = new createjs.Stage(document.getElementById("myCanvas"));

buttonSheild = new createjs.Bitmap("images/buttonSheild.png");
buttonSheild.scaleX = buttonSheild.scaleY = 0.25;
buttonSheild.x = 200;
buttonSheild.y = 0;
myStage.addChild(buttonSheild, txt);

txt = new createjs.Text("did it work");

buttonSheild.addEventListener("click", textClicked);

createjs.Ticker.addEventListener('tick', drawNewFrame);
createjs.Ticker.setFPS(12);
}
function textClicked(){
score++;
txt.text = "does this work?";}
function drawNewFrame(){
myStage.update(12);}


function demoRoll(num){

document.body.insertAdjacentHTML("beforeend", "<p>You rolled " + rollDie(num) + " out of " + num + "</p>");

document.body.insertAdjacentHTML("beforeend", "<p>Multiplier = " + multiplier + "</p>");

} 

function rollDie(num){

    switch (num) {

        case 20:

            var D20 = (Math.floor(Math.random()*num)+1);

            if (D20 == 20){

                multiplier = 2;

            }

            else{

                multiplier = 1;

            }

            return D20;

            break;

        case 6:

            var D6 = (Math.floor(Math.random()*num)+1)*multiplier;

            multiplier = 1;

            return D6;

            break;

    }        

    }




</script>
</body>
</html>