(附源码)HTML+JavaScript+Canvas编写2D小游戏

原创

已于 2024-06-23 22:40:29 修改 · 2k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

于 2024-06-16 17:04:32 首次发布

Canvas简介

Canvas是HTML5中的标签，用以生成图像。这里的生成图像有点类似于我们自己在纸面上绘画，需要指定渲染位置以及大小等参数，同时，这也使得一旦元素被绘制出来，便再也无法编辑，只能擦除后重新绘制。

Canvas支持的浏览器

除IE8及更早版本外，其余浏览器如IE9、Edge、Chrome、FireFox、 Safari等支持Canvas。

预期结果

其中，(1)为游戏新加载时显示的图像，有两个大小为80px*100px的矩形，一个半径为15px的红色小球；(2)当鼠标左键被按下时，木棍增长，最高不超过Canvas页面外；(3)松开鼠标左键，木棍倒下，如果木棍顶端正好位于另外一个矩形顶部范围内，游戏继续，清除页面内容，开始生成下一个矩形；(4)如果木棍顶端没有到达或超出矩形顶部范围，游戏结束，弹出“重新开始”按钮。

项目结构

包含HTML主页面stickGrow.html、css样式文件stick.css和JavaScript文件stick.js。

HTML主页面：stickGrow.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Horizon Project</title>
		<link rel="stylesheet" href="./stick.css">
	</head>
	<body>
		<div class="con">
			<div class="score">0</div>
			<canvas width="400px" height="600px" id="cvs"></canvas>
			<button class="restart">重新开始</button>
		</div>
	</body>
</html>
<script src="./stick.js"></script>

Canvas使用<Canvas>标签创建，并直接向其赋值：宽width和高height。创建用来显示得分的div--”score“，其内部赋初始值0。最后是“重新开始”按钮。运行后得到如下结果：

按照正常使用习惯，我们接下来要将得分和按钮移动进Canvas内，且暂时隐藏“重新开始”按钮，因此需要使用css来完成。

css样式文件：stick.css

body{
	margin: 0;
	padding: 0;
	background-color: black;
}

.con{
	width: 400px;
	height: 660px;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
}

.score{
	width: 180px;
	height: 60px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	color: #eb4b16;
	font-size: 60px;
	position: relative;
	top: 120px;
	text-shado