javascript 文本输入操作

Question

我正在制作文字入侵游戏来练习javascript。单词从顶部掉下来，应该打出丢弃单词并获得分数但是，当我在输入框中输入字母时，我不能输入超过一个字母。例如单词 'car' 如果我输入 'c'，然后输入 'a'，c 就会消失。只有一个遗迹。相关代码部分如下。忽略 listx, listy 部分。我是否使用了错误的输入类型文本或实施错误？

<div id = 'input'>Input<input type = 'text' id = 'inputbox'></div>


function doKey(keyPressed) {
    if (window.event.keyCode === 13) {
        var submission = document.getElementById('inputbox').value;
        var result = checkLetter(submission);
    }
    //somethings here (unrelated)

    document.getElementById('inputbox').value = ''; //return to the first step
}

 function checkLetter (letter) {
    for(i = 0; i < alpha.length; i++) {
        if (letter == alpha[i]) {
            return i;
        }
    }
    return -1;
}

完整代码在这里

<canvas id = "ctx" width = "500" height = "500" style = "border:1px solid #000000;"></canvas>
<h1>Typing Game</h1>

<div id = 'input'>Input<input type = 'text' id = 'inputbox'></div>
<div id = 'Score'>SCORE : <span id = 'score'>0</span></div>
<div id = 'LifePoint'>LIFE : <span id = 'life'>10</span></div>

<script>

var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial'; //font should be fixed

var y = 10; //starting height

var spdY = 50;

var listx = [];
var listy = [];
var alpha = [];
var intervalTime = 800;



setInterval(update, intervalTime); //appearance interval

function doKey (keyPressed) {
    if (window.event.keyCode === 13) { //if pressed enter
        var submission = document.getElementById('inputbox').value;
        var result = checkLetter(submission);
        if (result > -1) {
            //value deletion
            alpha.splice(result, 1);
            //positions deletion
            listx.splice(result, 1);
            listy.splice(result, 1);
            increaseScore('score');
        } else {
            console.log("this is an error");
        }
    }
    document.getElementById('inputbox').value = ''; //return to the first step
}

function increaseScore(id) {
    var count = document.getElementById(id).innerHTML;
    count++;
    document.getElementById(id).innerHTML = count;
}

function decreaseScore(id) {
    var count = document.getElementById(id).innerHTML;
    count--;
    document.getElementById(id).innerHTML = count;
}

function lifeDeduction() {
    for (i=0; i<alpha.length; i++) {
        if (listy[i] > 500) {
            alpha.splice(i,1)
            listx.splice(i, 1);
            listy.splice(i, 1);
            decreaseScore('life');
        }
    }
}

function checkLetter (letter) {
    for(i = 0; i < alpha.length; i++) {
        if (letter == alpha[i]) {
            return i;
        }
    }
    return -1;
}

function getLetter() {
    var letters = ['apple', 'banana', 'color','door','egg','fraction','garlic','hello','icecream','junk','kawa'
    ,'lemon','monster','notorious','octopus','pure','qwerty','rabbit','strange','television','ultra','vex','window','xavi',
    'yellow','zzzzzzz']
    var i = Math.floor(Math.random()*27);
    var randomLetter = letters[i];
    alpha.push(randomLetter);
    var x = Math.floor((Math.random() * 450) + 1);
    listx.push(x);
    listy.push(y);
    //console.log(alpha);
}


function endoftheGame() {
    ctx.clearRect(0,0,500,500);
    ctx.fillText("END", 250, 250);
    ctx.fillText("Press R to restart", 250, 300);
}

function update() {
    if (document.getElementById('life').innerHTML == 0) {
        alpha = []
        listx = []
        listy = []
        console.log("fail");
        endoftheGame();
    } else {
        //console.log(alpha);
        //console.log(listx);
        //console.log(listy);
        spdY = 50 + 5*(document.getElementById('score').innerHTML/10);//speed
        lifeDeduction()
        getLetter();
        ctx.clearRect(0,0,500,500);
        draw();
    }
}

function draw() {
    for (i = 0; i < alpha.length; i++) {
        listy[i] += spdY;
        ctx.fillText(alpha[i],listx[i],listy[i]);
    }
}

document.getElementsByTagName("body")[0].onkeypress = doKey;


</script>

Answer 1

这一行

document.getElementById('inputbox').value = ''; //return to the first step

在每次击键时清除您的输入

javascript 文本输入操作

javascript text input manipulation

javascript

input

textinput