html5游戏开发--动静结合(一)-动态画面的实现

2024-06-01 13:48

本文主要是介绍html5游戏开发--动静结合(一)-动态画面的实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、前言
  很久没写文章了。。。也不知大家还记不记得以前给大家的承诺——写几篇有关 html 5开发 游戏 的文章。今天总算有时间了,不过我还得抓紧时间,因为种种原因,明天我还得投入紧张的工作之中。
  言归正传,现在让我们来说说html5开发游戏。有的朋友认为html5开发游戏不就是用 JAVA script开发吗?游戏中的图片可以用<img>贴上去吗?何必还用什么html5嘛。(或许大家都不是这样认为的,但我初学html5时就是这样想的。因此才出现了前面我写的有关javascript开发《三国志曹操传》的系列文章)但并不是这样的,html5开发游戏主要用的是<canvas>标签,<canvas>里的图片是不可以拖动复制的,而<img>是可以的。因此这就体现了html5开发游戏的关键。不过在<canvas>里贴图可不是用一个src属性可以解决的,它要用javascript贴上图片。。。毕竟开发游戏可不是那么简单的工程嘛。。。(废话又多说了两句,不过以前曾有为朋友对我说,正是有了这些废话,才使文章"生动"起来的)
  接下来我要向大家揭示html5开发游戏的内幕。

  
二、"动"的体现
  html5究竟是怎样使静态的图片变为动态的呢?请看以下分析。
  首先我们准备几张图片http://www.shengshiyouxi.com:  
  
01.png 02.png 03.png
还是老图片,不过不是老代码:
  main.js里的代码:
  window.onload = function(){
setInterval(function(){main();}, 150);
};

var pic1 = "./01.png";
var pic2 = "./02.png";
var pic3 = "./03.png";

var picArry = [pic1, pic2, pic3];

var newImgName = new Image();
newImgName.src = pic1;

var picArrsub = 0;

function main(){
var cElem = document.getElementById("CANVAS");
var cxt = cElem.getContext("2d");

cxt.clearRect(0, 0, 300, 300); 
cxt.drawImage(newImgName,100,100);
cxt.save();
//处理图片

if(picArrsub >= picArry.length - 1){
  picArrsub = 0;
}else{
  picArrsub += 1;
}

newImgName.src = picArry[picArrsub];
}以上是鄙人写的javascript代码,但是众所周知,既然是叫html5而不是javascript5,说明html代码也至关重要。
  
  接下来是html5代码:
  <!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="./main.js"></script>
</head>
<body>

<canvas id="CANVAS" width="300px" height="300px" style="border:2px solid #c3c3c3; z-index:1;">
Your browser does not support the canvas element. Please update your browser or download other browsers support html5.
</canvas>


</body>
</html>解释一下:
  
  <canvas>是html5新加标签,估计就是专门为开发游戏设计的。首先我们得对这个新加进来的标签添加id属性,这样就方便大家在javascript里操作了。具体一些信息可以看看w3cschool: http://www.w3school.com.cn/html5/html_5_canvas.asp
  html代码就解释到此,接下来讲讲javascript里的代码:
  var pic1 = "./01.png";
var pic2 = "./02.png";
var pic3 = "./03.png";

var picArry = [pic1, pic2, pic3];这段写得较明了,同样是把几张图片放进数组,这样方便以后循环播放图片。
  
  var newImgName = new Image();
newImgName.src = pic1;这段代码是建立一个贴图片的区域,并且给src赋值为pic,也就是刚才定义的变量,也就是./01.png
  
  function main(){
var cElem = document.getElementById("CANVAS");
var cxt = cElem.getContext("2d");

cxt.clearRect(0, 0, 300, 300); 
cxt.drawImage(newImgName,100,100);
cxt.save();
//处理图片

if(picArrsub >= picArry.length - 1){
  picArrsub = 0;
}else{
  picArrsub += 1;
}

newImgName.src = picArry[picArrsub];
}
  这一段代码是该 程序 的主要部分。   游戏论坛:http://www.jiushun8.com贴图,切换图片,处理图片都在这里。首先我取出canvas的id,然后绘图,图的src在一个用if()...else的死循环中反复切换,每切换一次就用setInterval()重复调用main()函数,由于src切换,因此重复调用main()时,又会重新绘图,导致图片无限的循环切换。
  cxt.clearRect(0, 0, 300, 300); 
cxt.drawImage(newImgName,100,100);
cxt.save();这段代码是什么意思呢?首先为了不让画出的图不出现重叠——drawImage()函数画出的图是不会因下次要画图象而把上次画的清空的。所以如果不主动清空画布,那就会出现这次画的叠在上次画的上面,因此我首先用clearRect()函数把画布清空,这样的话就不会有重叠了。(cleatRect语法如下:cleatRect(移至的x坐标,移至的y坐标, 清空部分的宽度, 清空部分的高度);)
  
  drawImage想必大家都知道,具体语法如下:drawImage(要画出对象的名称, 移至的x坐标, 移至的y坐标);
  
  
  
  

 

                                                

这篇关于html5游戏开发--动静结合(一)-动态画面的实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1021182

相关文章

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

PostgreSQL中MVCC 机制的实现

《PostgreSQL中MVCC机制的实现》本文主要介绍了PostgreSQL中MVCC机制的实现,通过多版本数据存储、快照隔离和事务ID管理实现高并发读写,具有一定的参考价值,感兴趣的可以了解一下... 目录一 MVCC 基本原理python1.1 MVCC 核心概念1.2 与传统锁机制对比二 Postg

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri

C++高效内存池实现减少动态分配开销的解决方案

《C++高效内存池实现减少动态分配开销的解决方案》C++动态内存分配存在系统调用开销、碎片化和锁竞争等性能问题,内存池通过预分配、分块管理和缓存复用解决这些问题,下面就来了解一下... 目录一、C++内存分配的性能挑战二、内存池技术的核心原理三、主流内存池实现:TCMalloc与Jemalloc1. TCM

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取