js.js

var startTime;
var playGames;
var gameTime = 0;
var startText = "";
var score = 0;
$(function() {
    $("body").keypress(function() {
        if (event.keyCode == 119) {
            $(".bottom_top").css("background-color", "gray");
            if ($(".top").text() == "★") {
                score += 100;
                $(".bottom_center").text("score:" + score);
            }
            setTimeout("clearStyle('119')", 100);
        } else if (event.keyCode == 97) {
            $(".bottom_left").css("background-color", "gray");
            if ($(".left").text() == "★") {
                score += 100;
                $(".bottom_center").text("score:" + score);
            }
            setTimeout("clearStyle('97')", 100);
        } else if (event.keyCode == 100) {
            $(".bottom_right").css("background-color", "gray");
            if ($(".right").text() == "★") {
                score += 100;
                $(".bottom_center").text("score:" + score);
            }
            setTimeout("clearStyle('100')", 100);
        } else if (event.keyCode == 115) {
            $(".bottom_bottom").css("background-color", "gray");
            if ($(".bottom").text() == "★") {
                score += 100;
                $(".bottom_center").text("score:" + score);
            }
            setTimeout("clearStyle('115')", 100);
        }
    });
    $(".center").click(function() {
        if ($(".center").text() == "start Game") {
            score = 0;
            $(".bottom_center").text("score");
            gameTime = 0;
            startText = $(".title").text();
            $(".center").text("out Game");
            startTime = setInterval("playTime()", 1000);
            playGames = setInterval("playGame()", 2200);
        } else {
            clearInterval(startTime);
            clearInterval(playGames);
            $(".center").text("start Game");
            $(".title").text(startText);
        }
    });
});

function playTime() {
    gameTime++;
    var info = startText + gameTime + "s";
    $(".title").text(info);
}

function playGame() {
    var ranTime = (Math.random() * 500) + 500;
    setTimeout("playGo()", ranTime);
}

function playGo() {
    var ranImg = parseInt(Math.random() * 4);
    var ranNum = parseInt((Math.random() * 500) + 500);
    if (ranImg == 0) {
        $(".top").text("★");
        setTimeout("clearStar('0')", ranNum);
    } else if (ranImg == 1) {
        $(".left").text("★");
        setTimeout("clearStar('1')", ranNum);
    } else if (ranImg == 2) {
        $(".right").text("★");
        setTimeout("clearStar('2')", ranNum);
    } else if (ranImg == 3) {
        $(".bottom").text("★");
        setTimeout("clearStar('3')", ranNum);
    }
}

function clearStar(num) {
    if (num == 0) {
        $(".top").text("");
    } else if (num == 1) {
        $(".left").text("");
    } else if (num == 2) {
        $(".right").text("");
    } else if (num == 3) {
        $(".bottom").text("");
    }
}

function clearStyle(num) {
    if (num == 119) {
        $(".bottom_top").css("background-color", "lightslategray");
    } else if (num == 97) {
        $(".bottom_left").css("background-color", "lightslategray");
    } else if (num == 100) {
        $(".bottom_right").css("background-color", "lightslategray");
    } else if (num == 115) {
        $(".bottom_bottom").css("background-color", "lightslategray");
    }
}