vue 实现hangingman（简易_haning 实现-CSDN博客

本文链接：https://blog.csdn.net/hl_dont/article/details/89669764

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>hangman</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="pa">
	<div id='word' v-modle:text="w" v-if="Wordshow">
		{{w}}
	</div>
	<button v-if="!word" @click="RandWord">start</button>

	<div id="letter-button" v-if="word">
			<button type="button" id="a" @click="ShowLetter('a')">a</button>
			<button type="button" id="b" @click="ShowLetter('b')">b</button>
			<button type="button" id="c" @click="ShowLetter('c')">c</button>
			<button type="button" id="d" @click="ShowLetter('d')">d</button>
			<button type="button" id="e" @click="ShowLetter('e')">e</button>
			<button type="button" id="f" @click="ShowLetter('f')">f</button>
			<!--......这里的id可以用模板代替，就不用那么多id了-->
	</div>


</div>

<script>

	String.prototype.replaceAt=function(index, character) {
    	return this.substr(0, index) + character + this.substr(index+character.length);
	}

	var p= new Vue({
		el:"#pa",
		data:{
			word:"",
			w:"",
			times:0,
			guesstime:0,
		},
		
		methods:{
			//先不设置随机单词
			RandWord : function(){
				this.word = "adaf";
				this.times = this.word.length;
				for(var i=0;i<this.times;i+=1){
					this.w+='-';
				}
				this.guesstime = 0;
			},
			Wordshow : function(){
				//console(this.word===this.w);
				if(this.word==this.w){
					this.w="you win：the word is "+this.word;
					this.word="";
					return;
				}
				if(this.times<=this.guesstime){
					this.w="you lose：the word is "+this.word;
					this.word="";
					return;
				}
				return;
			},

			ShowLetter : function(k){
				this.guesstime+=1;
				var p=document.getElementById(k);
				p.setAttribute('disabled',true);

				var i=0;
				while(i<this.times){
					if(this.word[i]==k){
						console.log(this.w[i]);
						this.w=this.w.replaceAt(i,k);
					}
					i+=1;
				}
				this.Wordshow();


			}

		}

	});

</script>




</body>
</html>