我在玩内存游戏时遇到了一些困难。此任务的第一步是仅当我输入与占位符相同的名称时才启用“播放”按钮。 (我已将占位符设置为“连征”)。此问题已得到解决。当我在表单中输入“连征”时，该按钮将被启用。第二步是在我点击“播放”按钮后，应该会显示并播放游戏。此外，在我单击“播放”按钮之前，游戏不应出现。
我的问题是，当我点击“播放”按钮时，没有出现游戏，所以一定是出了什么问题。问题在哪里？
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="type/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" href= "main.css" />
<title>HTML 5</title>
<meta charset="UTF-8">
</head>
<body>
<form name="play">
<div class="play">
<p>Name:
<br/>
<input type= "text" placeholder="Lianzheng" id= "inputField" onkeyup="myFunction()" onkeydown="myFunction()">
<br/>
<p><input type="button" name="play" disabled="disabled" id="play" value="play" onclick="play()">
</p>
</div>
</form>
<script>
function myFunction() { //check whether the input value is equal to the placeholder value
var placeholderValue = document.getElementById("inputField").placeholder;
var valueEntered = document.getElementById("inputField").value;
if(placeholderValue == valueEntered){
document.getElementById("play").removeAttribute("disabled");
}
else{
if(!document.getElementById("play").hasAttribute("disabled")){
document.getElementById("play").setAttribute("disabled","disabled")
}
}
}
setInterval(function(){ // set the interval
var placeholderValue document.getElementById("inputField").placeholder;
var valueEntered = document.getElementById("inputField").value;
if(placeholderValue == valueEntered){
document.getElementById("play").removeAttribute("disabled");
}
else{
if(!document.getElementById("play").hasAttribute("disabled")){
document.getElementById("play").setAttribute("disabled","disabled")
}
}
},1000);
</script>
</body>
</html>
Javascript:
var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J','K','K','L','L'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function(){
var i = this.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function play(){
tiles_flipped = 0;
var output = '';
memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
}
document.getElementById('memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val){
if(tile.innerHTML == "" && memory_values.length < 2){
tile.style.background = '#FFF';
tile.innerHTML = '<img src="' +val + '.png"/>';
if(memory_values.length == 0){
memory_values.push(val);
memory_tile_ids.push(tile.id);
} else if(memory_values.length == 1){
memory_values.push(val);
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1]){
tiles_flipped += 2;
memory_values = [];
memory_tile_ids = [];
if(tiles_flipped == memory_array.length){
alert("Board cleared... generating new board");
document.getElementById('memory_board').innerHTML = "";
newBoard();
}
} else {
function flip2Back(){
var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background = 'url(tile_bg.jpg) no-repeat';
tile_1.innerHTML = '<img src="' + val + '.png"/>';
tile_2.style.background = 'url(tile_bg.jpg) no-repeat';
tile_2.innerHTML = '<img src="' + val + '.png"/>';
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}
}
CSS:
form {
border-color: #A3BDDD;
border-width: 1px;
border-style: solid;
width: 3in;
height: 2in;
background-color: #DCE6F2;
}
div#memory_board{
background:#CCC;
border:#999 1px solid;
width:800px;
height:540px;
padding:24px;
margin:0px auto;
}
div#memory_board > div{
background: url(tile_bg.jpg) no-repeat;
border:#000 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:64px;
cursor:pointer;
text-align:center;
}
最佳答案
试试 onclick="play()"
<input type="submit" name="play" disabled="disabled" id="play" value="play" onclick="play()">
关于javascript - 使用 Javascript、CSS 和 HTML 玩内存游戏的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29349735/