用canvas制作的躲避球小游戏html5源码

最新推荐文章于 2024-04-13 17:21:50 发布

mazai5080

最新推荐文章于 2024-04-13 17:21:50 发布

阅读量3.2k

点赞数

分类专栏：前端源码文章标签： css3 javascript html5

本文链接：https://blog.csdn.net/mazai5080/article/details/124418205

版权

前端源码专栏收录该内容

102 篇文章 25 订阅

订阅专栏

大家好，今天给大家介绍一款，用canvas制作的躲避球小游戏html5源码（图1）。送给大家哦，获取方式在本文末尾。

图1

按上下左右键可以控制红球的移动躲避绿色小球，按ctrl可以加大绿球的速度，游戏会自动计时，红球碰撞到绿球游戏结束（图2）

图2

源码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10142，需要的朋友，关注文末公众号，搜索10142，即可获取。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 游戏</title>
<script language="javascript" type="text/javascript">
//定义键盘值
var KEY = { D: 68, W: 87, A: 65, S:83, RIGHT:39, UP:38, LEFT:37, DOWN:40, QUICK:17};
//定义输入对象
var input = {
	right	: false,
	up		: false,
	left	: false,
	down	: false,
	quick	: false
};
//小球对象
var player = {
	speed	: 1,
	qspeed	: 2,
	left	: 0,
	top		: 0,
	xleft	: 0,
	dleft	: 0,
	xtop	: 0,
	dtop	: 0,
	r		: 5
}
player.init = function(){
	this.xleft = this.r;
	this.xtop = this.r;
	this.dleft = $("myCanvas").width