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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设