javascript飞机大战-----002游戏引擎
基本html布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.game{
position:relative;
width: 320px;
height: 568px;
margin: 50px auto;
background: url('image/bg.png');
}
.game>img,.score,.life{
position: absolute;
}
.score{
top: 20px;
}
.life{
right: 0;
top: 20px;
}
.life{width:60px;}
.life img{float: left;}
</style>
</head>
<body>
<div class="game">
<div class="score">得分:0</div>
<div class="life">
<img src="data:image/heart.png" alt="">
<img src="data:image/heart.png" alt="">
<img src="data:image/heart.png" alt="">
</div>
</div>
</body>
</html>
效果展示
游戏引擎engine.js
/*
游戏引擎
*/
var Engine = {
//刚开始的游戏状态
gameStatus:false,
//所以敌机
enemy:{},
//子弹
bullet:{},
//得分
score:0,
//背景图片
game:document.querySelector('.game'),
//初始化
init:function(){
this.gameStart();
},
//游戏开始
gameStart:function(){
var _this = this;
//点击图片的时候判断游戏状态
this.game.onclick = function(){
if(!_this.gameStatus){
_this.gameStatus = true;
//移动移动
_this.bgMove();
}
}
},
//背景移动
bgMove:function(){
var y=0;
var _this = this;
this.bgTimer = setInterval(function(){
y+=2;
_this.game.style['background-position-y']=y+'px';
},50)
}
};
Engine.init();
如果做到这的话点击game背景会移动
javascript飞机大战-----002游戏引擎的更多相关文章
- javascript飞机大战-----009游戏结束
/* 游戏引擎 */ var Engine = { //刚开始的游戏状态 gameStatus:false, //所以敌机 enemy:{}, //子弹 bullet:{}, //得分 scroe:0 ...
- canvas绘制“飞机大战”小游戏，真香！
canvas是ArkUI开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活.高效等优点,被广泛应用于UI界面开发中. 本期,我们将为大家介绍canvas组件的使用. 一.canvas介绍 1 ...
- javascript飞机大战-----001分析
1.游戏引擎 首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子 ...
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)
整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...
- javascript 飞机大战完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用面向对象的编程方式实现飞机大战小游戏，java版
概述 本文将使用java语言以面向对象的编程方式一步一步实现飞机大战这个小游戏 本篇文章仅供参考,如有写的不好的地方或者各位读者哪里没看懂可以在评论区给我留言 或者邮件8274551712@qq.co ...
- javascript飞机大战-----0010完整版代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript飞机大战-----008积分
/* 创建敌机: */ function Enemy(blood,speed,imgs,scroe){ //敌机left this.left = 0; //敌机top this.top = 0; // ...
- javascript飞机大战-----007爆炸效果
要检验什么时候碰撞,我们必须了解什么时候不相撞.以上四种情况是不相撞的时候 首先在引擎里面写好什么时候碰撞什么时候不碰撞 /* 游戏引擎 */ var Engine = { //刚开始的游戏状态 ga ...
随机推荐
- 数据库之“on”“where”区别
数据库在通过连接两张或者多张表返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户 在使用inner join(内连接)没有区别,但是 在使用left jion时,on和where条件的 ...
- TensorFlow基础笔记(9) Tensorboard可视化显示以及查看pb meta模型文件的方法
参考: http://blog.csdn.net/l18930738887/article/details/55000008 http://www.jianshu.com/p/19bb60b52dad ...
- wamp5多站点配置教程
wamp5多站点配置教程 第一要做的是安装第二个apache服务一.找到Apache2的htppd.conf文件.例如:我的wamp是安装在G盘的,我的就是G:\wamp\Apache2\conf目录 ...
- free 和delete 把指针怎么啦？
别看 free 和 delete 的名字恶狠狠的(尤其是 delete),它们只是把指针所指的内存给 释放掉,但并没有把指针本身干掉. 发现指针 p 被 free 以后其地址仍然不变(非 NULL), ...
- jquery -- checkbox选中无选中状态
最近在工作中使用jquery操作checkbox,使用下面方法进行全选.反选: var ischecked=allCheckObj.is(':checked'); ischecked?checksOb ...
- DexClassLoader
DexClassLoader加载自己写的第三方jar包,例如金山毒霸需要加载ksremote.jar. 现在将DexClassLoader加载jar包成果分享一下. 1.新建Android工程,封 ...
- 内网DNS投毒技术劫持会话
工具列表: tcpdump Ferret Hamster node closurether 拓扑环境: 攻击机:Kali 10.10.10.237 被攻击机: win7 10.10.10.232 因为 ...
- 【Python】添加注册表信息脚本
http://wrox.cn/article/1004030/ # -*- coding: utf-8 -*- """ Created on Tue Jun 02 16: ...
- asp.net mvc forms身份认证
web.config配置 <authentication mode="Forms"> <forms loginUrl="~/Login/Index&qu ...
- 告诉你html5比普通html多了哪些东西？