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 ...
随机推荐
- css的id选择器与thinkphp结合
<head> <style type="text/css"> #a2{ border:1px solid blue; width:140px; height ...
- C# 属性事件一些设置说明
大致列举一些常用的属性或事件的一些修饰 用法类似,主要是对属性的进一步设置 [Browsable(true)] public bool Enable {get;set;} 顺便说一下事件的应用: pu ...
- tftp32作为dhcp服务器
/******************************************************************* * tftp32作为dhcp服务器 * 每次使用tftp进行文 ...
- Spring4 Web开发新特性
基于Servlet3开发. 针对RESTful开发,提供了@RestController,加在Controller上面,免除了每个@RequestMapping method上面的@ResponseB ...
- c# winform 自动关闭messagebox 模拟回车
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- VMware下Ubuntu与宿主Windows共享文件夹 （转至 http://blog.csdn.net/zz962/article/details/7706755）
概述 1.安装VMware Tool 2.设置共享 步骤 开始安装VMware Tool 显示如下画面(如果宿主无法访问外网,可能会出现一个更新失败,可以无视之) 通过下列命令解压.执行,分别是下面的 ...
- Windows7下4种方式快速显示桌面
1.Windows键+D快捷键直接显示桌面: 2.鼠标移到任务栏右下角直接显示桌面: 3.Windows键+空格快捷键显示桌面: 4.任务栏鼠标右键,选择“显示桌面”.
- 【View】之【SimpleWaveView】可多色可刷新的加速球、进度球【demo】
当前版本:SimpleWaveView_v1.0.20140618 先看效果图,这个加速球是动态的,并且当调用了myView.setRefresh(0.8F);方法后可以从当前值动态降到0再升到80% ...
- fatal error C1010: unexpected end of file while looking for precompiled header. Did you forget to add '#include "stdafx.h"' to your source?
解决方法:设置cpp文件的Precompiled Header属性设置为Not Using Precompiled Headers
- mysql数据库中，通过一条insert into语句，同时插入多个值
需求描述: 今天在看一本mysql的书籍,发现一个mysql中insert into好用的技巧,就是通过 1条insert into语句,插入多行数据,而不是多个insert into语句.在此记录下 ...