Html/Javascript game animated background 游戏动态背景图：卷轴效果（附代码）

游戏的背景图如果是动态的，效果会好很多，最简单的做法是让背景图有一种卷轴效果，即看起来背景图一直是从上往下，或者从右往左移动.以前用python 做过，这里把python 写为Javascript就可以了。主要是用到Javascript 的drawImage（）。把任一背景图与以.html 的程序放在一个文件夹就可以运行。代码如下：

<!DOCTYPE html>
<html><head>    </head><body><!-- The canvas for the panning background --><canvas id="background" width="600" height="360">Your browser does not support canvas. Please try again with a different browser.</canvas>
<script>var bkground_img=new Image();
var canvas = document.getElementById("background");
var ctx = canvas.getContext("2d");
bkground_img.src="space_bg.png";class Background {constructor(img,ctx,canvas,vert) {this.img=img;this.ctx=ctx;this.canvas=canvas;this.vert=vert;this.x=0;this.y=0;this.speed=0.5;}draw(){if (this.vert) {this.y+=this.speed;this.ctx.drawImage(this.img,this.x,this.y,this.canvas.width,this.canvas.height);this.ctx.drawImage(this.img,this.x,this.y-this.canvas.height,this.canvas.width,this.canvas.height);if (this.y>=this.canvas.height) this.y=0;}else {this.x-=this.speed;this.ctx.drawImage(this.img,this.x,this.y,this.canvas.width,this.canvas.height);this.ctx.drawImage(this.img,this.x+this.canvas.width,this.y,this.canvas.width,this.canvas.height);if (this.x<=-this.canvas.width) this.x=0;}}}bk=new Background(bkground_img,ctx,canvas,1);
function animate() {window.requestAnimationFrame(animate);bk.draw();
}animate();</script>
</body>
</html>

Html/Javascript game animated background 游戏动态背景图：卷轴效果（附代码）相关推荐

vue 项目中使实现粒子动态背景图
在vue中,实现粒子动态背景图的效果首先安装插件 npm install vue-particles --save-dev 在main.js 文件中进行引用注册 // 动态粒子 import Vu ...
Creator2D横版游戏(2)背景图随主角移动 | 单独相机拍UI
Creator2D横版游戏(2)背景图随主角移动上次教程做好了人物左右走,这次来做背景移动本次目标 1.背景图跟随角色移动 2.限制背景图移动范围,不出黑边移动背景的脚本放在canvas上说是 ...
设计背景图的效果主要体现在那几个方面？
设计背景图在整个设计中站的地位效果是很大的,即使是一个纯白色的背景也对设计的整体有很大的影响,如果你对设计背景图这方面话有点欠缺的化不妨看看. 设计背景图的效果主要体现在那几个方面? 1.凸显主体背 ...
微信小程序展示动态背景图(含三目运算符)
微信小程序展示背景图片一.微信小程序展示背景图片的类型二.语法书写 1.简单展示 2.动态背景图片一.微信小程序展示背景图片的类型当在小程序开发中,本地的背景图片也是可以展示的,但是在真机运行 ...
HTML + CSS实现动态背景的登录效果
一.动态背景的登录效果图由于背景是在不断的切换的,就不一一截图展示啦. 二.文件结构展示三.源码区 1.html文档(index.html) <!DOCTYPE html> <h ...
项目看板开发经验分享(一)——光伏绿色能源看板（可复用组件、条件动态背景图、flex布局应用、v-for遍历列表多重绝对定位）
今天新开一个系列,专门介绍近期工作中开发的几个比较酷炫的看板的开发思路与经验分享.第一节我们就来介绍下这个光伏绿色能源看板,整体浏览如下: UED提供的原设计图,这波还原的还不错吧? 那就直接进入正题 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
Unity3d C#利用材质(Material)贴图的偏移实现2D游戏单背景图无限移动背景效果功能（含源码）
前言 2D的游戏背景基本是一张图,前后可以无缝拼接的那种,无限的背景滚动的效果,可以通过多张的图拼接起来,随着相机移动动态的创建/移位背景图可以实现,不过,本文介绍的方法是使用单张Sprite实现,具 ...
模仿CSDN黑暗帝国动态背景的vue项目(附源码)
开发工具:Webstorm 技术栈:vue.html.canvas 实现效果(其实这里面的是动态变换的,只是没有截成GIF动图): 实现步骤: (1)在这里的项目我是用VueCli3脚手架进行搭建的. ...

Html/Javascript game animated background 游戏动态背景图：卷轴效果（附代码）

Html/Javascript game animated background 游戏动态背景图：卷轴效果（附代码）相关推荐

最新文章

热门文章