直接上代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字游戏</title>
<style>
#wenzi{
position: absolute;
top: 10px;
left: 10px;
width: 300px;
height: 300px;
word-break:break-all;
}
#rongqi{
position:relative;
width: 320px;
height: 320px;
}
#anniu{
position: absolute;
bottom: 10px;
right: 10px;
}
img{
width: 320px;
height: 320px;
}
</style>
<script>
window.function(){
function $(id){
return document.getElementById(id);
}
//这里是放剧情的
var juqing = ['111111111111111111111111111111111',
'22222222222222222222222222222222222',
'33333333333333333333333333333333333'];
//这里是放图片地址的 对应上面的剧情数量
var tupian = ['111.jpg','222.jpg','333.jpg'];
//这个切换内容的下标
var index = 0;
//这个是打印速度
var ste = 100;
$("anniu").onclick = function(){
j = 1;
var _this = this;
_this.style.display='none';
if(index<juqing.length){
var j=1;
$("tupian").src = tupian[index];
// 启动打字机
siT();
function siT(){
setTimeout(function(){
j++;
console.log(j);
if(j>=juqing[index].length){
index++;
_this.style.display='block';
return;
}
siT();
},ste);
$("wenzi").innerHTML = juqing[index].substring(0,j);
};
}else{
document.write("游戏结束，请刷新页面")
}
};
}
</script>
</head>
<body>
<div id="rongqi">
<img id="tupian" src="" >
<div id="wenzi">故事从这里开始111111111111111111111111111111111111111111111111111111 </div>
<button id="anniu">下一步</button>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
