lire la table des matières
JavaScript implémente le jeu de correspondance de table
Exemple de description :
lorsque l'utilisateur clique sur deux motifs ou caractères identiques, l'association est réussie et le jeu est gagné une fois que toutes les associations sont réussies.
Le cas 008 utilise des petits jeux courants pour vous aider à améliorer votre capacité à appliquer JS pour résoudre des problèmes pratiques. Il convient de noter que ce cas a été simplifié dans une large mesure. Lorsque vous pratiquez après les cours, vous pouvez utiliser votre imagination pour aller plus loin. Terminez le jeu.
code source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档-配对游戏</title>
<style type="text/css">
table{
margin:15px auto 15px;
background: rgba(60,180,100,0.3);
color: blue;
width: 500px;
height: 500px;
}
hr{
width: 600px;
height: 5px;
background: orange;
}
h2{
text-align: center;}
td{
text-align: center;
background: rgba(160,80,10,0.1);
width: 100px;
height: 100px;
}
footer{
margin:0px auto;
text-align: center;
background: rgba(0,100,100,0.2);
padding: 10px;
width: 500px;
}
</style>
</head>
<body>
<h2>配对游戏<hr></h2>
<table>
<script>
var cols=5,rows=4;
for(var i=0;i<rows;i++){
str="<tr>";
for(var j=0;j<cols;j++){
var sid="img"+((cols*i)+j)
str+='<td id="'+sid+'" οnclick="showimg('+((cols*i)+j)+')"'+'>'
str+='</td>'
}
str+="</tr>";
document.write(str)
}
</script>
</table>
<footer>
用时：<span id="gameTime"></span>   
<input type="button" value="开始游戏" onclick="init()">
</footer>
<script type="text/javascript">
var length=cols*rows //表格单元格数目
var map=[] //存储单元格里的内容
var user=[] //存储每个单元格是否可以翻开的状态
var times=0;
var newsatrt;
var firstIndex=0,secondIndex=0;//点击第一张、第二张图片的索引
var ctr=0;
var finished;
function $(x){
return document.getElementById(x)
}
for(var i=0;i<length/2;i++){
map[i]=i;
map[length/2+i]=i
}
// alert(map)
function init(){
for (var i=0;i<length;i++){
$("img"+i).innerHTML=''
user[i]=0;//是否显示图片，0为显示背面
}
// alert(map)
map.sort(function(){
return Math.random()-0.5})
// alert(map)
times=0; //计时器变量清零
$("gameTime").innerHTML=times+'秒'
newsatrt=true; //标记为新开局
}
function showimg(x){
if (newsatrt) {
start()
newsatrt=false;
}
$("img"+x).innerHTML=map[x]
// alert(x)
if (ctr==0) {
ctr++
firstIndex=x //记录第一张图片索引
}else{
if (firstIndex!=x) {
secondIndex=x;//记录第二张图片索引
ctr=0;
check()
}
}
}
function start(){
times+=1
$("gameTime").innerHTML=times+'秒';
setTimeout('start()',1000)
}
function check(){
if (map[firstIndex]==map[secondIndex]) {
finished++;
user[firstIndex]=1;
user[secondIndex]=1;//不能再翻
ctr=0;
}else if(user[firstIndex]==0){
$('img'+firstIndex).innerHTML=' ';
firstIndex=secondIndex;
secondIndex=0;
ctr++ //标记已经点击了一张
}
if (finished==length/2) {
clearTimeout(startTime);
if(confirm("恭喜你！再来一局？")==true){
init()
}
}
}
</script>
</body>
</html>
JavaScript réalise l'affichage dynamique des données de table
Exemple de description : Afficher différentes données dans le tableau en fonction de la sélection de l'utilisateur
code source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<style type="text/css">
</style>
</head>
<body>
<h3>动态显示表格数据</h3>
<table style="width: 300px;height: 300px;border: 3px solid green;text-align: center;">
<script>
for(var i=0;i<5;i++){
str_tab='<tr>'
for(var j=0;j<5;j++){
str_tab+='<td id='+"td"+(i*5+j+1)+' style="background: orange;">'+'</td>'
}
str_tab+='</tr>'
document.write(str_tab)
}
</script>
</table>
<input type="button" value="奇数" onclick="td_num('odd')">
<input type="button" value="偶数" onclick="td_num('even')">
<input type="button" value="全部" onclick="td_num('all')">
<script type="text/javascript">
var arr=new Array();
// var arr=[]等效上句
function $(x){
return document.getElementById(x);
}
for(var i=0;i<25;i++){
arr[i]=i+1;
}
// alert(arr)
function write(){
for(var i=0;i<25;i++){
$("td"+(i+1)).innerHTML=arr[i]
}
}
function td_num(x){
switch (x){
case 'odd':
for(var i=0;i<25;i++){
if(i%2==0){
arr[i]=i+1;
}else{
arr[i]=""}
}
break;
case 'even':
for(var i=0;i<25;i++){
if(i%2==1){
arr[i]=i+1;
}else{
arr[i]=""}
}
break;
case 'all':
for(var i=0;i<25;i++){
arr[i]=i+1;
}
break;
}
write()
}
</script>
</body>
</html>
Analyse du code source
1. Spécifiez dynamiquement chaque cellule du tableau id, puis obtenez chaque cellule idvia , puis attribuez une valeur à l'innerHTML à l'intérieur.
2. Obtenez un tableau, stockez d'abord les données à affecter à l'innerHTML de la cellule dans le tableau, puis affectez-les par lots à l'innerHTML de la cellule à partir du tableau.
3. Écrivez une fonction pratique pour idfaire passer des éléments element.
Les balises html peuvent-elles transmettre des paramètres via différentes valeurs d'attribut ?
Réponse : Oui, les balises html peuvent transmettre des paramètres via divers attributs (tels que id, value, etc.) ou distinguer différents éléments, car les attributs peuvent être ajoutés dynamiquement.
Comment html spécifie-t-il dynamiquement l'attribut id d'un élément (en plus de la méthode régulière) ?
Réponse : Il est très facile d'ajouter un idattribut .str_tab+='<td id='+"td"+(i*5+j+1)+' >'+'</td>'
Deux façons de créer un tableau en js ?
Réponse : Objets Array() et []. var arr=new Array(); var arr=[]Équivalent de la phrase précédente.
Comment écrire une fonction idpersonnalisée elementobtenue en obtenant ?
Réponse : function $(x){ return document.getElementById(x); }.
Comment passer des paramètres aux fonctions appelées par des événements dans des balises en html (comme les événements de clic) ?
Réponse : Vous pouvez écrire directement les paramètres dans la fonction, tels que des entiers et des chaînes, des chaînes entre guillemets, des guillemets simples et doubles.onclick="td_num('odd')"。function td_num(x){}