Js制作的文字游戏
自己制作的文字游戲。(:
?
?
?
<!DOCTYPE html>
<html lang="en">
<head>
?? ?<meta charset="UTF-8">
?? ?<title>文字游戲</title>
?? ?<style type="text/css">
?? ??? ?#wrap{
?? ??? ??? ?width: 400px;height: 550px;
?? ??? ??? ?border: 1px solid black;
?? ??? ??? ?margin: 50px auto 0px;
?? ??? ??? ?position: relative;
?? ??? ?}
?? ??? ?#left{
?? ??? ??? ?width: 80px;height: 30px;
?? ??? ??? ?position: absolute;
?? ??? ??? ?left: 30px;top: 10px;
?? ??? ?}
?? ??? ?#right{
?? ??? ??? ?width: 80px;height: 30px;
?? ??? ??? ?position: absolute;
?? ??? ??? ?right: 40px;top: 10px;
?? ??? ?}
?? ??? ?#one{
?? ??? ??? ?width: 250px;height: 250px;
?? ??? ??? ?/*background: green;*/
?? ??? ??? ?position: absolute;
?? ??? ??? ?left: 75px;top: 70px;
?? ??? ??? ?text-align: center;
?? ??? ??? ?line-height: 250px;
?? ??? ??? ?font-size: 150px;
?? ??? ??? ?
?? ??? ?}
?? ??? ?p{
?? ??? ??? ?margin: 0;padding-top: 0;
?? ??? ??? ?width: 300px;height: 80px;
?? ??? ??? ?position: absolute;
?? ??? ??? ?left: 50px;top: 350px;
?? ??? ??? ?text-indent: 2em;
?? ??? ??? ?font-size: 25px;
?? ??? ?}
?? ??? ?#two{
?? ??? ??? ?width: 100%;height: 100px;
?? ??? ??? ?position: absolute;
?? ??? ??? ?left: 0;bottom: 0px;
?? ??? ??? ?
?? ??? ??? ?
?? ??? ?}
?? ??? ?#two span{
?? ??? ??? ?display: block;
?? ??? ??? ?width: 80px;height: 80px;
?? ??? ??? ?margin-top: 20px;
?? ??? ??? ?font-size: 70px;
?? ??? ??? ?text-align: center;
?? ??? ??? ?float: left;
?? ??? ??? ?cursor: pointer;
?? ??? ?}
?? ?</style>
</head>
<body>
?? ?<div id="wrap">
?? ??? ?<span id="left">時間:</span>
?? ??? ?<span id="right">分數:</span>
?? ??? ?<div id="one">黑</div>
?? ??? ?<p>根據上面的字的顏色從下面選擇正確的字，選擇正確自動開始</p>
?? ??? ?<div id="two">
?? ??? ??? ?<span></span>
?? ??? ??? ?<span></span>
?? ??? ??? ?<span></span>
?? ??? ??? ?<span></span>
?? ??? ??? ?<span></span>
?? ??? ?</div>
?? ?</div>
?? ?<script type="text/javascript">
?? ??? ?var left = document.getElementById('left');
?? ??? ?var right = document.getElementById('right');
?? ??? ?var one = document.getElementById('one');
?? ??? ?var two = document.getElementById('two');
?? ??? ?var span = two.getElementsByTagName('span');
?? ??? ?var text = ['黑','藍','黃','綠','紅'];
?? ??? ?var color = ['black','blue','yellow','green','red'];
?? ??? ?// time = setInterval(function(){
?? ??? ?// ?? ?left.innerHTML = '時間:' + i + 's';
?? ??? ?// ?? ?i--;
?? ??? ?// ?? ?if (i < 0) {
?? ??? ?// ?? ??? ?clearInterval(time);
?? ??? ?// ?? ??? ?alert('Game? Over');
?? ??? ?// ?? ?};
?? ??? ?// },1000)
?? ??? ?function num(){
?? ??? ??? ?var a = Math.floor(Math.random()*5);
?? ??? ??? ?return a;
?? ??? ?}
?? ??? ?function random (){
?? ??? ??? ?var five = [];
?? ??? ??? ?while(five.length < 5){
?? ??? ??? ??? ?var rand = num();
?? ??? ??? ??? ?if (five.indexOf(rand) == -1) {
?? ??? ??? ??? ??? ?five.push(rand);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?return five;
?? ??? ?}
?? ??? ?function text2(){
?? ??? ??? ?var san = num();
?? ??? ??? ?si = num();
?? ??? ??? ?one.innerHTML = text[san];
?? ??? ??? ?one.style.color = color[si];
?? ??? ??? ?var yi = random();
?? ??? ??? ?var er = random();
?? ??? ??? ?for(var f = 0; f < span.length; f++){
?? ??? ??? ??? ?span[f].innerHTML = text[yi[f]];
?? ??? ??? ??? ?span[f].style.color = color[er[f]];
?? ??? ??? ??? ?span[f].index = yi[f];
?? ??? ??? ?}?? ?
?? ??? ?}
?? ??? ?text2();
?? ??? ?var score = 0;
?? ??? ?var t = 10;
?? ??? ?right.innerHTML = '分數:' + score;
?? ??? ?left.innerHTML = '時間:' + t + 's';
?? ??? ?var play = false;
?? ??? ?for(var f = 0; f < span.length; f++){
?? ??? ??? ?span[f].onclick = function(){
?? ??? ??? ??? ?
?? ??? ??? ??? ?if (si == this.index && t != 0) {
?? ??? ??? ??? ??? ?score++;
?? ??? ??? ??? ??? ?play = true;
?? ??? ??? ??? ??? ?right.innerHTML = '分數:' + score;
?? ??? ??? ??? ??? ?text2();
?? ??? ??? ??? ?}else if (si != this.index && play) {
?? ??? ??? ??? ??? ?t--;
?? ??? ??? ??? ??? ?left.innerHTML = '時間:' + t + 's';
?? ??? ??? ??? ??? ?if (t <= 0) {
?? ??? ??? ??? ??? ??? ?clearInterval(time);
?? ??? ??? ??? ??? ??? ?play = false;
?? ??? ??? ??? ??? ?};
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?}
?? ??? ?time = setInterval(function(){
?? ??? ??? ?if (play) {
?? ??? ??? ??? ?t--;
?? ??? ??? ??? ?left.innerHTML = '時間:' + t + 's';
?? ??? ??? ??? ?if (t <= 0) {
?? ??? ??? ??? ??? ?clearInterval(time);
?? ??? ??? ??? ??? ?play = false;
?? ??? ??? ??? ??? ?alert('Game? Over');
?? ??? ??? ??? ?};
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ?
?? ??? ?},1000)
?? ?</script>
</body>
</html>
轉載于:https://www.cnblogs.com/llz1314/p/5790766.html
總結
- 上一篇： Android无法生成R文件的终极解决办
- 下一篇： jQuery中的渐变动画效果