文档章节

HTML5——canvas制作游戏接住小球

axingqi
 axingqi
发布于 2017/06/30 20:57
字数 1476
阅读 2
收藏 0
点赞 0
评论 0

        先来一张效果图并完整版代码下载地址:HTML5——canvas制作游戏接住小球

       

         游戏的整体逻辑是随机在上面生成障碍物,当小球碰到障碍物时障碍物消失,当全部障碍物被消灭时赢得游戏,而当小球掉到木板以下则输掉游戏。

         先从页面说起,比较简单的代码,只有一个div一个canvas,就不多做解释了。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>move_ball</title>
<style type="text/css">
     div{
         text-align:center;
         margin-top:150px;
     }
     #view{
         border:1px solid #ccc;
     }
</style>
</head>
<body>
<div>
     <canvas id="view" height="500px" width="500px"></canvas>
     <script type="text/javascript" src="move_ball.js"></script>
</div>
</body>
</html>
          然后是游戏界面,小球和木板部分我定义了全局变量来存储他们的左上角坐标,因为这个坐标是不断变化的。而障碍物部分则用一个二维数组存储,然后用随机数给二维数组赋初值,0代表该处无障碍物,1代表该处有障碍物。
var mat_x=30*margin_width;
var mat_vx=0;
var ball_x=5*box_width;
var ball_y=5*box_width;
var ball_vx=3;
var ball_vy=5;
var display=new Array();
for ( var i = 0; i < 10; i++) {
	display[i]=new Array();
	for ( var j = 0; j < 3; j++) {
		var temp=Math.round(Math.random());
		display[i][j]=temp;
	}	
}
          绘制部分的代码就不贴了,下面就说说主要逻辑。首先是木板的移动,这里主要是通过键盘的左右箭头来控制,因为要调用js的键盘监听事件。具体代码如下:      
document.onkeyup=function(event){
     mat_vx=0;
 };
 document.onkeydown=function(event){
     var e = event || window.event || arguments.callee.caller.arguments[0];
     if(e && e.keyCode==37){                    //向左移动
    	 mat_vx=-3;
     }
     if(e && e.keyCode==39){                    //向右移动
    	 mat_vx=3;
     }
  
 };
            通过得到的移动速度改变小球坐标:
function moveMat(){
	 if (mat_x+mat_vx<=margin_width) {
			mat_x=margin_width;
		}else if(mat_x+mat_vx>=width-3*box_width-3*margin_width) {
    		 mat_x=width-3*box_width-3*margin_width;
		}else{
			mat_x+=mat_vx;
		}
 }
         然后是小球移动的代码,一开始我们给小球定义一个x轴方向的速度vx,一个y轴方向的速度vy,让小球一开始就动起来。然后我们判断运动后小球的位置,当小球运动到左右两边时,x轴方向的速度vx变为它的相反数,同理,运动到上方时,则y轴方向的速度变为它的相反数。而当小球撞击木板时(碰撞解说看下面,这里暂不解说了),y轴的速度必定改变,x轴的速度则视情况而定。如果小球和木板x轴的速度同向,即都大零,或都小于零,则x轴速度不变。否则x轴速度等于小球速度加上木板速度。(当小球运动到下方而没撞击木板时,游戏结束,因此不在此处进行判断):      
function changeBall(){
	if (ball_x<=margin_width||ball_x>=width-margin_width-box_width) {
		ball_vx=-ball_vx;
	}
	if(ball_y<=margin_width){
		ball_vy=-ball_vy;
	}
	if(ball_x>=mat_x-box_width&&
	   ball_x<=mat_x+4*box_width+3*margin_width&&
	   ball_y<=height-2*margin_width-box_width*2+5&&
	   ball_y>=height-2*margin_width-box_width*2-5
	){
		if (ball_vx>0&&mat_vx<0||ball_vx<0&&mat_vx>0) {
			ball_vx=ball_vx+mat_vx;
		}else if (ball_vx==0) {
			ball_vx=mat_vx;
		}	
		ball_vy=-ball_vy;
	}
	ball_x=ball_x+ball_vx;
	ball_y=ball_y+ball_vy;
}
        然后是小球与障碍物的碰撞部分,要判断一个物体与另一个物体碰撞还是挺难的,所以我们先不这样判断,而是先判断一个点与一个物体发生碰撞,由于我们这里的障碍物使用的矩形,就拿矩形来说了。如果一个点的x坐标,大于矩形最小的x坐标,小于矩形最大的x坐标且点的y坐标小于矩形最小的y坐标,大于矩形最大的y坐标,则点与矩形发生了碰撞了。可能这么说还是有人不明白,所以笔者画了一张图加以解释:

                                                           

        明白了点与矩形的判断,我们再来看看小球与障碍物的判断,这里笔者仍把小球看作一个矩形,具体是取小球的外切矩形的四个顶点的坐标,拿这四个顶点依次去与障碍物判断,只要有一个顶点与障碍物发生碰撞,小球即与障碍物发生了碰撞。由于取的是外切矩形的顶点,所以不太严谨,有强迫症的朋友可以去计算小球的边缘的坐标。

        当发生碰撞后,需要处理两件事,一是障碍物消失:我们前面说过,障碍物存在二维数组里,1代表有障碍物,0代表无障碍物,所以这里只要把对应的数赋值为0即可。二是小球方向改变:y轴速度改变,则x轴速度不变。x轴速度改变,则y轴速度不变。因为有点麻烦,笔者想了好久没有想到办法解决,这里笔者又偷了一点懒,用一个随机数来判断是否改变。如果诸位读者有什么好的解决办法,还望与笔者分享一下,不胜感激。

function checkImpact(){          //碰撞检测
	for ( var i = 0; i < 10; i++) {
		for ( var j = 0; j < 3; j++) {
			if (display[i][j]==1) {
				var x1=margin_width+i*(margin_width+box_width);
				var y1=margin_width+(j+1)*(margin_width+box_width);
				var x2=(1+i)*(margin_width+box_width);
				var y2=(j+2)*(margin_width+box_width);
				if (ball_x>=x1&&ball_x<=x2&&ball_y>=y1&&ball_y<=y2|| 
					ball_x+box_width>=x1&&ball_x+box_width<=x2&&ball_y>=y1&&ball_y<=y2|| 
					ball_x>=x1&&ball_x<=x2&&ball_y+box_width>=y1&&ball_y+box_width<=y2|| 
					ball_x+box_width>=x1&&ball_x+box_width<=x2&&ball_y+box_width>=y1&&ball_y+box_width<=y2
				) {
					display[i][j]=0;
					if (Math.round(Math.random())==0) {
						ball_vy=-ball_vy;
					}else{
						ball_vx=-ball_vx;
					}
				}
			}			
		}	
	}	
}
            最后部分就是判断输赢了。只有当障碍物全部被消灭时,才能赢得游戏,而当还存在障碍物,小球却掉到下方时输掉游戏并结束。具体代码如下:

function checkOver(){
	 var flag=false;
	 for ( var i = 0; i < 10; i++) {
			for ( var j = 0; j < 3; j++) {
				if (display[i][j]==1) {
					flag=true;
				}
			}	
		}	
	 if (!flag) {
		alert("你赢了!");
		window.clearInterval(f);
	}
	 if (ball_y>=height) {
		 alert("你输了!");
		 window.clearInterval(f);
	}
 }
             另外:完整版代码也已上传,有兴趣的可以下载看下,谢谢! HTML5——canvas制作游戏接住小球

           


© 著作权归作者所有

共有 人打赏支持
axingqi
粉丝 0
博文 21
码字总数 9949
作品 0
茂名
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/23 ⋅ 0

《WebGL编程指南》学习笔记——2.使用元素

《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 WebGL编程指南学习笔记2使用 canvas 元素 下小节我们正...

hushhw ⋅ 2017/12/16 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

【重磅】IT界大牛 —— 廖雪峰加盟开课吧,Web全栈视频限时领取

2018年,互联网行业风起云涌,IT工程师如果仅凭传统开发思维,无法突破固有知识体系,终将会被社会所淘汰。会跨平台混合应用开发、微信小程序、Web应用、pc以及手机炫酷网页的HTML5全栈开发工...

vm199zkg3y7150u5 ⋅ 05/23 ⋅ 0

html5-web本地存储

在html5中为我们提供了一种本地缓存机制,它将取代我们的cookie,并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage,和...

zting科技 ⋅ 2017/01/10 ⋅ 0

26、《每周一点canvas动画》——3D旋转与碰撞

各位同学实在不好意思,最近忙着面试找工作,耽搁了一个星期。由于前一篇文章的关注的量比较多,让我决定以后的文章尽量多加一些高质量的DEMO和配图。可能这比较耗费时间,但质量才是王道,希...

qq_39759115 ⋅ 04/17 ⋅ 0

php canvas 前端JS压缩,获取图片二进制流数据并上传

效果图(canvas压缩图片会失真): 参考: php canvas 前端JS压缩,获取图片二进制流数据并上传 https://www.cnblogs.com/-mrl/p/8708114.html js+php如何实现上传图片 https://www.jianshu....

豆花饭烧土豆 ⋅ 05/30 ⋅ 0

Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗 ⋅ 2017/03/04 ⋅ 0

本地存储之localStorage 、sessionStorage、globalStorage

HTML5 提供了四种在客户端存储数据的新方法,即 localStorage 、sessionStorage、globalStorage、Web Sql Database。 本文介绍前面三个,这三个相对比较简单,理解和操作都比较容易 一,loc...

浩爷 ⋅ 2015/09/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部