html5实现微信打飞机游戏
互联网 & 发布时间： 14:48:16 & 作者：佚名 &
这篇文章主要介绍了html5实现微信打飞机游戏,需要的朋友可以参考下
html5实现微信的打飞机游戏,利用这个小游戏学习一个HTML5吧，这是开发WEB的一个方向代码如下:// JavaScript Documentvar c = document.getElementById("dotu");var cxt = c.getContext("2d");var img = newImg("./assets/bg_01.jpg");cxt.drawImage(img,0,0,480,800);
var flivverLog = 0;var flivver1 = newImg("./assets/flivver.png");var flivver2 = newImg("./assets/flivver2.png");var flivver3 = newImg("./assets/flivver3.png");
// 用于记录游戏的时间，越到后面越快var time1 = 0;var time2 = 80;
// 积分var jifen = 0;
function getSudu(){
var number = parseInt(Math.random()*10);
if(number & 5 && number & 0){
return 1;}// 飞机的对象function flivverObj(hp,ewidth,eheight,eimg,esudu){
// 随机的X
this.x = parseInt(Math.random()*460+1);
this.y = 0;
this.hit = 0;
// 是否死亡
this.over = 0;
this.width =
this.height =
this.img =
this.sudu =}
// 获取飞机function getFlivver(type){
switch(type){
return new flivverObj(100,50,30,flivver1,getSudu());
return new flivverObj(500,70,90,flivver2,getSudu());
return new flivverObj(,flivver3,getSudu());
}}function cartridge(x,y){
this.y = }
function gameover(){
window.clearTimeout(fps);
//$('#dotu').fadeOut();
$('.content').css('position','relative');
$('.content').append('&span style="position: top:5 left:2 font-size:150 color:#cc0000;
text-align:center" id="sil"&&/span&');
$('#sil').html('你').hide().fadeIn(1000,function(){
$(this).html('你屎').hide().fadeIn(1000,function(){
$(this).html('&a href="javascript：location.reload();" style="color:#cc0000" title="重新开始"&你屎了&/a&' + jifen
+ ' 分').hide().fadeIn();
(function(cxt){
var dotu = {nums:0};
// 用于存放小飞机
var flivver = new Array();
var flivverImg = newImg("./assets/flivver.png");
var me = {x:240,y:750};
var meImg = newImg('assets/me.png');
var cartridges = new Array();
var cartridgeImg = newImg('./assets/cartridge.png');
var boo1 = newImg('./assets/boo1.png');
var over = newImg('./assets/over.png');
dotu.update = function(){
dotu.setTimes();
// 设置背景
dotu.setBg();
// 设置小飞机
dotu.setFlivver();
dotu.setMe();
dotu.cartridge();
cxt.font = "italic 20px 微软雅黑";
cxt.strokeText("积分：" + jifen, 10, 30);
$('#fjs').html(flivver.length);
$('#zds').html(cartridges.length);
$('#scfj').html("1000/" + time2 + " 毫秒");
dotu.setTimes = function(){
// 100 秒 1个档位
if(time1 == 1000){
time1 = 0;
time2 = (time2 == 20) ? 20 : time2 - 20;
* 设置移动的背景
dotu.setBg = function(){
dotu.nums++;
if(dotu.nums == 800){
dotu.nums = 0;
// 画布的背景
cxt.drawImage(img,0,dotu.nums,480,800);
cxt.drawImage(img,0,dotu.nums - 800,480,800);
dotu.setFlivver = function(){
// 生成飞机
if(dotu.nums % time2 == 0){
flivverLog++;
if(flivverLog % 6 == 0){
flivver.push(getFlivver(2));
}else if(flivverLog % 13 == 0){
flivver.push(getFlivver(3));
flivver.push(getFlivver(1));
for(a in flivver){
flivver[a].y += flivver[a].
// 如果超出屏幕将该小飞机删除
if(flivver[a].y & 780){
flivver.splice(a, 1);
// 将小飞机画到画布上
// 小飞机死亡
if(flivver[a].over & 0){
flivver[a].over --;
if(flivver[a].over & 20){
cxt.drawImage(boo1,flivver[a].x + flivver[a].width/2 - 20
,flivver[a].y + flivver[a].height / 2 -10,41,39);
}else if(flivver[a].over & 2){
cxt.drawImage(over,flivver[a].x + flivver[a].width/2 - 20 ,flivver[a].y + flivver[a].height / 2 -10,40,43);
flivver.splice(a, 1);
cxt.drawImage(flivver[a].img,flivver[a].x,flivver[a].y,flivver[a].width,flivver[a].height);
// 判断自己是否死亡
if( me.x & (flivver[a].x - flivver[a].width + 20) && (me.x) &(flivver[a].x + flivver[a].width - 20) && (me.y) & (flivver[a].y + flivver[a].height + 20) && (me.y + 72) & (flivver[a].y - 20)){
gameover();
if(flivver[a].hit & 0){
cxt.drawImage(boo1,flivver[a].x + flivver[a].width/2 - 20 ,flivver[a].y + flivver[a].height / 2 -10,41,39);
//cxt.drawImage(boo1,flivver[a].x + 5 ,flivver[a].y,41,39);
flivver[a].hit--;
// 更新自己的距离
dotu.setMe = function(){
cxt.drawImage(meImg,me.x,me.y,64,72);
// 更新子弹方法
dotu.cartridge = function(){
if(dotu.nums % 10 == 0){
cartridges.push(new cartridge(me.x + 30,me.y));
for(i in cartridges){
// 飞到顶部就将OBJ删除掉
if(cartridges[i].y & 0){
cartridges.splice(i, 1);
cartridges[i].y -= 20;
// 将小飞机画到画布上
cxt.drawImage(cartridgeImg,cartridges[i].x,cartridges[i].y,7,17);
// 子弹碰到飞机的情况
for(j in flivver){
if(flivver[j].over & 0){
if(cartridges[i].x & flivver[j].x && cartridges[i].x & flivver[j].x+ flivver[j].width && cartridges[i].y &
flivver[j].y && cartridges[i].y -flivver[j].height & flivver[j].y){
flivver[j].hit = 10;
$('#isdz').html('打中了编号' + j);
if(flivver[j].hp & 1){
flivver[j].hp -= 80;
flivver[j].over = 40;
jifen += 50000;
// 子弹消失
cartridges.splice(i, 1);
// 绑定鼠标事件
c.addEventListener('mousemove', function onMouseMove(evt) {
me.x = evt.layerX - $('#dotu').offset().left - 32;
me.y = evt.layerY -
$('#sbX').html(me.x);
$('#sbY').html(me.y);
fps = setInterval(dotu.update, ); }(cxt))
function newImg(src){
var obj = new Image();
obj.src =}
//setInterval(h.update, 1000/65);
代码如下:&!DOCTYPE html&&html xmlns="&a href="http://www.w3.org/1999/xhtml"&http://www.w3.org/1999/xhtml&/a&"&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&打飞机 - 多途&/title&&script type="text/javascript" src="./jquery.min.1.7.1.js"&&/script&&style&body{padding:0; margin:0; text-align:center}.content{border:1px #000 width:480 margin:0 height:800 display: font-size:72}.info,.blog{border:1px #000 position: top:5 right:5 width:150 text-align:left}.blog{ left:10 background:#000; text-align: width:100px}.blog a{ color: #FFF; text-decoration: font-size:15 }&/style&&/head&&body&&div class="content"&&canvas id="dotu" width="480" height="800"&&/canvas&&/div&&div class="blog"&&a href="/"&回到博客首页&/a&&/div&&div class="info"&
鼠标X：&span id="sbX"&&/span&鼠标Y：&span id="sbY"&&/span&小飞机数:&span id="fjs"&&/span&子弹数:&span id="zds"&&/span&打中:&span id="isdz"&&/span&生成飞机时间:&span id="scfj"&&/span&
&/div&&script type="text/javascript" src="./dotu_game.js"&&/script&&/body&&/html&
大家感兴趣的内容
12345678910
最近更新的内容微信创业猜想：社交游戏将引爆微信HTML5游戏
[问题点数：40分]
本版专家分：0
CSDN今日推荐
本版专家分：0
匿名用户不能发表回复！|
CSDN今日推荐HTML5游戏探讨，如何让微信游戏只能运行在微信中 极客标签 | 在线编程知识分享学习平台
发布于，阅读503次，收藏 1次，评论条 - 来自
HTML5游戏探讨，如何让微信游戏只能运行在微信中
大致文件布局，一个html文件，一个loading.js，在loading.js中加载其他需要的js和css。至于具体的速度的话，建议cdn或者一个域中最多加载6个js文件。在loading.js中加载js和css之前，检测是不是微信游览器，是的话，go。不是则跳转到提示。
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
if(!isWeiXin()){
location.href="http://www.gbtags.com";
&&当然上面的方法只是预防用户，对于开发者来说，破解太简单，或许最后用微信的fromname MD5加密生成的token验证资源文件。有朋友有好的简单方法来预防html5游戏的山寨问题不？
互联网金融从业者
极客主页：
已上传的图片列表：
尚未上传任何图片...
在线调试地址范例
例如：http://www.gbtags.com/gb/debug/bc4a78a6--b7cb-649ce1bda104.htm
以后再转发，立刻下载！Pages: 1/3
主题 : 微信上运行html5游戏，分享朋友圈后，造成微信闪退
级别: 新手上路
UID: 300014
可可豆: 121 CB
威望: 115 点
在线时间: 94(时)
发自: Web Page
来源于&&分类
微信上运行html5游戏，分享朋友圈后，造成微信闪退&&&
用cocos2d js3.6.1做了一个微信小游戏，放到微信浏览器上运行，分享朋友圈后，微信闪退，这个情况只发生在IOS版的微信上，求在线的大神解答疑问
级别: 新手上路
UID: 300014
可可豆: 121 CB
威望: 115 点
在线时间: 94(时)
发自: Web Page
打完包，1.5M，是不是资源太大了
级别: 新手上路
UID: 300014
可可豆: 121 CB
威望: 115 点
在线时间: 94(时)
发自: Web Page
没有人遇到过这样的的问题吗？
级别: 新手上路
UID: 300014
可可豆: 121 CB
威望: 115 点
在线时间: 94(时)
发自: Web Page
还没有解决。。。。。
级别: 新手上路
可可豆: 77 CB
威望: 67 点
在线时间: 38(时)
发自: Web Page
级别: 新手上路
可可豆: 77 CB
威望: 67 点
在线时间: 38(时)
发自: Web Page
触控是真正垃圾啊，，，帖子回复都bug，，我想说的是，cocos-js就是扯淡的，，到ios上全是bug，，各种闪退，浏览器卡死，你这问题我也遇到了，没解决触控一向自己做完的东西瞅都不瞅一眼就放上去了，，  
级别: 新手上路
可可豆: 3 CB
威望: 3 点
在线时间: 4(时)
发自: Web Page
不知道咱们遇到的是不是同一个问题。我也遇到过分享好友或朋友圈闪退的问题，后来把project.json里面的renderMode设为1就正常了。0是默认，1是canvas 2是webGL所以估计是微信在ios8下对webGL的支持还不够完善
级别: 新手上路
UID: 300014
可可豆: 121 CB
威望: 115 点
在线时间: 94(时)
发自: Web Page
回 5楼(qq) 的帖子
bug是比较多
级别: 新手上路
UID: 300014
可可豆: 121 CB
威望: 115 点
在线时间: 94(时)
发自: Web Page
回 6楼(gdzdb) 的帖子
完美解决问题，真的是这个问题
级别: 新手上路
UID: 300014
可可豆: 121 CB
威望: 115 点
在线时间: 94(时)
发自: Web Page
回 6楼(gdzdb) 的帖子
太感谢了，困扰我好几天
Pages: 1/3
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版先锋游戏知道信息频道欢迎您
微信HTML5游戏是怎么实现刷单的
[老虎] [ 2:57:52] (<span id="tgd) (<span id="tfd) &&
昵称： 验证码：
评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述
其它网游相关知识
其它网游其他问题
其它网游资讯