0

I'm making word invasion game for practicing javascript. word falls from the top, and should type out to discard words and get points however, when I type letters in input box, I could not type more than one letter. for example for word 'car' if I type 'c', and then 'a', c disappears. and only a remains. the related code part is below. Just ignore the listx, listy part. Am I using input type text wrong or something implemented erroneously?

<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;
}

entire code is here

<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>
1
  • You might want to use count = parseInt(document.getElementById(id).innerHTML,10) Commented Jul 7, 2015 at 9:25

1 Answer 1

1

this line

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

clears your input, on every key stroke

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.