大学生的小乐趣：html画布制作贪吃蛇小游戏

最新推荐文章于 2024-05-14 10:20:04 发布

我有颗小粒的痣

最新推荐文章于 2024-05-14 10:20:04 发布

阅读量3.8k

点赞数 12

分类专栏：网页前端文章标签： html5 javascript canvas 游戏贪吃蛇

本文链接：https://blog.csdn.net/weixin_40722661/article/details/78386808

版权

源代码已存放在github上：https://github.com/WYKXLDZ/CollegeJoy/tree/master/snake

最终效果：

做贪吃蛇游戏需要Html5，部分Css美化,重要的是JavaScript的应用，因为我们主要是运用Html5的Canvas标签来打造游戏的，所以还是在JavaScript上的笔墨较多

首先搭建好框架

<!DOCTYPE html>
<html>
<head>
	<title>snake</title>

	<style type="text/css">
	body{
        background:#333;
    }
	#canvas_frame{
        height: 500px;
        width: 500px;
        margin: auto;
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 10px;
	}
	canvas{
		background:#673ab7;
	}
	#start_button{
		height:40px;
		width:150px;
		border:0px;
		background:#000;
		color:white;
		line-height:40px;
		font-size:15px;
	}
	</style>
</head>
<body>
	<div id="canvas_frame">
		<canvas id="mycanvas" width="500" height="500"></canvas>
	</div>
	<section style="height:40px;width:100%;text-align:center;">
		<button id="start_button" onclick="moveSnake();">start</button>
	</section>

	<script type="text/javascript">
/*javascript代码区*/
	</script>
</body>
</html>

然后在javascript代码区创建画布Dom对象：

	var canvas = document.getElementById('mycanvas');
	var ctx = canvas.getContext('2d');

创建蛇对象：

	var snake = {
		head : { x : 15 * 3, y : 0 },
		body : [{ x : 15 * 2, y : 0 },{ x : 15 * 1, y : 0 },{ x : 0, y : 0 }],
		speed : 100,
		direction: "right",
	};

注意点：蛇对象中的body是一个数组，数组内的元素是代表蛇每个节在画布上的X坐标和Y坐标，snake.body[0]为最靠近head的节，依此类推。。

描绘蛇：

	function drawSnake(){
		ctx.clearRect( 0, 0, game.width, game.height );
		var headImg = new Image();
		var headSrc = "./snake_head_min_" + snake.direction +".png";/*存贮蛇图片的位置,用于动态改变head的图片位置*/
		headImg.src= headSrc;
		ctx.drawImage(headImg, snake.head.x, snake.head.y );
		for( var i = 0; i <= snake.body.length - 1; i++){
			var cell = new Image();
			cell.src = "./snake_body_min.png";
			ctx.drawImage(cell, snake.body[i].x, snake.body[i].y );
		}
	}

注意点：

1.每次描绘蛇之前都需要将原有的图画清空------ ctx.clearRect( 0, 0, 450, 450); clearRect()用法详见:HTML5 canvas clearRect() 方法；

2.这里我采用的不是填充矩形的方法来实现画蛇，而是采用描绘图像的方法：用法详见：

最低0.47元/天解锁文章

我有颗小粒的痣

关注

12
点赞
踩
36

收藏

觉得还不错? 一键收藏
18
评论
大学生的小乐趣：html画布制作贪吃蛇小游戏

最终效果：做贪吃蛇游戏需要Html5，部分Css美化,重要的是JavaScript的应用，因为我们主要是运用Html5的Canvas标签来打造游戏的，所以还是在JavaScript上的笔墨较多首先搭建好框架： snake #canvas_frame{ height:500px; width:500px; margin:auto; backg
复制链接

扫一扫

专栏目录