飞机大作战游戏 1----（运用H5和Js制作）

飞机大作战一

首先建立一个div将canvas包住使其居中：

<div style="text-align: center;">
<canvasid="canvas"width="480px"height="650px"></canvas>
</div>

接下来是在script标签中进行

首先我们需要获取画布的对象和工具

var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")

第一步：初始化数据

定义游戏的初始状态

var START=0;        /*加载*/
var STARTING = 1;   /*加载中*/
var RUNNING = 2;    /*游戏开始*/
var PAUSE = 3;      /*暂停*/
var GAMEOVER = 4;   /*结束*/

开始加载状态：

           var start=START;
//         设置宽和高var WIDTH=480;var HEIGHT=650;
//         设置游戏得分var score=0;
//         设置飞机生命值var life = 5;

设置背景

先获取到图片的对象

将图片的数据用一个定义对象列出来

var bg={img:img,width:480,height:852}

再利用构建函数来绘制背景

因为背景图片是滚动的所以利用两张图片先后放入画布

当一张图片快要走出画布时，到达这个零界点，将此张图片返回到列一张图片的后面

使用paint方法绘制，step方法让图片运动起来

function Bg(unm){this.width=unm.width;this.height=unm.height;this.Image=unm.img;
//              第一张图片的位置this.x1=0;this.y1=0;
//              第二张图片位置this.x2=0;this.y2=-this.height;
//              绘制的方法paintthis.paint=function(){context.drawImage(this.Image,this.x1,this.y1);context.drawImage(this.Image,this.x2,this.y2);}
//              运动的方法stepthis.step=function(){this.y1++;this.y2++;if(this.y1==this.height){this.y1=-this.height}if(this.y2==this.height){this.y2=-this.height}}}

//          创建背景对象var sky=new Bg(bg)

绘制最外层的log

var log=new Image();log.src="img/start.png"

使用定时器调用函数

 setInterval(function(){
sky.paint();
sky.step();）1000}

效果图：

转载于:https://www.cnblogs.com/xuhanghang/p/10115933.html

飞机大作战游戏 1----（运用H5和Js制作）相关推荐

Python—飞机大作战游戏(附源代码及素材)
目录过程说明: 主函数键盘控制创建类 01.飞机基类 02.子弹基类 03. Hero飞机类 04.enemy飞机类源代码及素材过程说明: 应用到的库: import pyg ...
scratch飞机大作战
西瓜编程课又开始了!本课我们要做一个游戏--飞机大作战游戏效果:1.用上下左右键来操控飞机,空格键按下后能发射子弹. 2.敌机各式各样,打败蓝敌机获得升级子弹的黄能量豆 ...
cocos creator2.1.3休闲游戏《星球飞刀大作战》源码H5+安卓+IOS三端源码
cocos creator2.1.3休闲游戏<星球飞刀大作战>源码H5+安卓+IOS三端源码,开发脚本为typeScript方便扩展和阅读,支持cocos creator2.X版本,完整的 ...
[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲（四大界面之间的跳转与玩家飞机的移动）
一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...
python进阶应用：飞机大作战小游戏完整代码实现（初级）
飞机大作战(初级) 完整代码如下: 注意,需要在对应同一个文件中放入相应的游戏需要用的图片及音效.否则可能报错 # 导入pygame库 import pygame import random# 设置常 ...
基于LabVIEW的飞机大作战小游戏(可做毕设)
一.前言 Python是目前相当流行的一门编程语言,网上有人用Python做了一个<飞机大作战>的小游戏,并且出了一份视频教程,很有意思."基于Python的飞机大作战小游戏&q ...
python基于pygame的飞机大作战小游戏
基于pygame的飞机大作战小游戏,适合新手,不能直接运行,只能在命令行进入当前游戏目录,输入python game.py才能够运行,尚不知道是什么原因游戏截图如下,我们用黄色的圆圈代表敌机, 代码 ...
Java窗体小游戏开发飞机大作战Java小游戏开发源码
Java窗体小游戏开发飞机大作战Java小游戏开发源码
python小项目之飞机大作战
** 第一步:导入pygame 模块 ** 飞机大作战image数据集:https://pan.baidu.com/s/1pMM0beb (windows环境+python3.7) win+R调出命令 ...

飞机大作战游戏 1----（运用H5和Js制作）

飞机大作战游戏 1----（运用H5和Js制作）相关推荐

最新文章

热门文章