Question

所以我有一个网站，其中有一个画布和一个文本输入，在文本输入中我写下我想要的任何东西，然后它显示在画布内。我想做的是让文字掉落并且几乎像google gravity一样反弹。这是我到目前为止所看到的Gravity Bottom。

到目前为止，这是我的代码的重要部分：

<script>
function startGame() {
    myGameArea.start();
}

var myGameArea = {
    canvas : createElementOnDom('CANVAS','myCANVAS'),
    start : function() {
        this.canvas.width = 500;
        this.canvas.height = 500;
        this.context = this.canvas.getContext("2d");
        this.gravity = 0.05;
        this.gravitySpeed = 0;

        document.body.insertBefore(this.canvas,document.body.childNodes[0]);

        }

}

    function createElementOnDom (type,id) {
   var element=document.createElement(type);
   element.id=id;
   return element;
}
function myFunction() {
    var canvas = document.getElementById("myCANVAS");
var ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
ctx.fillText(document.getElementById("Box").value,10,50);
}
</script>
<style>
canvas { 
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}
</style>
</head>
<body>
<body onload="startGame()">
<br>
    <input type="text" name="Box" id="Box" value="" placeholder="Write whatever"/>
<button onclick="myFunction()">Submit</button>

重力类似谷歌引力 - javascript，html

0 个答案: