ios加载html游戏,IOS中的webView加载HTML

在日常开发中,我们为了效率会用到很多很多的WebView,比如在做某个明细页面的时候我们返回给你的可能是一个html字符串,我们就需要将当前字符串展示到webView上面,所以我们对HTML标签需要有一定的认识,下面我们来一起用html标签和JS写一个打地鼠游戏,这里我们主要讲解HTML标签的书写,只要如何和webView适配涉及到响应式布局我们下次讲解:

259e49abe7917a0df5ea98009abed792.png

1、首先我们先新建一个html文件

0a7c6c1735860b33a2bcb6fa1ddcf98f.png

2 完整html标签并且设置编码格式为UTF-8

16a42d8fde480eb39cf1ca7d9285e2c5.png

3 在body里面增加十只老鼠图片,并且增加点击事件,当点击老鼠后触发JS函数οnclick="addScore(this);",代码如下:

932c8d2927a62c2bfd75e94ee26a798e.png

932c8d2927a62c2bfd75e94ee26a798e.png

932c8d2927a62c2bfd75e94ee26a798e.png

932c8d2927a62c2bfd75e94ee26a798e.png

932c8d2927a62c2bfd75e94ee26a798e.png

932c8d2927a62c2bfd75e94ee26a798e.png

932c8d2927a62c2bfd75e94ee26a798e.png

932c8d2927a62c2bfd75e94ee26a798e.png

932c8d2927a62c2bfd75e94ee26a798e.png

932c8d2927a62c2bfd75e94ee26a798e.png

4 先将所有的老鼠图片放入数组中,然后开启定时器,每秒调用两次该方法,并且随机显示八个老鼠图片

//展示老鼠

function showMouse(){

//隐藏所有的老鼠

hideAll();

//控制点击次数

times++;

//超过20此结束点击

if(times>20){

window.clearInterval(timer);

alert("游戏结束,得分"+score+"分");

return;

}

//获取所有的老鼠

var imgs=document.getElementsByTagName("img");

//随机的显示八只老鼠

for(var i=0;i<8;i++){

var tem=Math.random()*10;

tem= Math.round(tem);

var node=imgs[tem]

node.style.display="";

}

}

//隐藏所有老鼠

function hideAll(){

var imgs=document.getElementsByTagName("img");

for(var i=0 ;i

var tem=imgs[i];

tem.style.display="none";

}

}

5 每次点击我们需要隐藏当前的图片,并且增加分数,每点击一次老鼠增加一分

//增加分数

function addScore(cell){

cell.style.display="none";

score++;

document.getElementById("label").innerHTML=score+"分数";

}

6 html加载到webView中显示

UIWebView * web=[[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 375, 667)];

NSString * path=[[NSBundle mainBundle] pathForResource:@"mouse.html" ofType:nil];

NSData * data=[NSData dataWithContentsOfFile:path];

NSString * str=[[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];

web.scalesPageToFit=YES;

[web loadHTMLString:str baseURL:nil];

[self.view addSubview:web];

以上所述是小编给大家介绍的IOS中的webView加载HTML的相关知识,希望对大家有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值