HTML+CSS+JS实现贪吃球小游戏 , 欢迎探讨

YJLTF 2018-11-10 10:07:30

周末闲来无事 , 写了个贪吃球小游戏 , 主要用canvas画布加上javascript逻辑实现 , 分享于此 , 欢迎探讨 .
代码如下 :



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>贪吃球大作战</title>

<style>

#d01{

	width: 606px;

	margin: 20px auto;

}

#c01{

	border-top: 3px solid #80ffff;

	border-right: 3px solid #00ff00;

	border-bottom: 3px solid #ff0000;

	border-left: 3px solid #ff8080;

	background-color: black;

}

#d02{

	width: 606px;

	margin-top: 5px;

	margin-bottom: 5px;

	text-align: center;

	font-size:12px;

	font-style: italic;

}

#i01{

	display: block;

	margin-left: 200px;

	float: left;

}

#i02{

	display: block;

	margin-right: 200px;

	float: right;

}

</style>

</head>

<body onkeydown="doKeyDown(event)">

	<div id="d01">

		<canvas id="c01" width="600" height="500"></canvas><!--画布-->

		<div id="d02"></div><!--提示框-->

		<input type="button" value="重新开始" onClick="rest()" id="i01"> 

		<input type="button" value="游戏说明" onClick="explain()" id="i02">

	</div>

	<script type="text/javascript">

		var canvas = document.getElementById("c01");

		var context = canvas.getContext("2d");

		var tooltip = document.getElementById("d02");

		var Serpengo = {//红色贪吃球

			"x" : 100,

			"y" : 100,

			"r" : 8,

			"color" : "red"

		}

		var Circle = {//蓝色小球

			"x" : 50,

			"y" : 50,

			"r" : 4,

			"color" : "blue"

		}

		var Rect = {//绿色方块

			"x" : 200,

			"y" : 200,

			"width" : 8,

			"height" : 8,

			"color" : "green"

		}

		function rest() {//重置

			Serpengo.r = 8;

			draw();

			drawFood();

		}

		function draw() {

			var width = 600;

			var height = 500;

			//清空画布

			context.clearRect(0, 0, width, height);

			//绘制贪吃球

			context.fillStyle = Serpengo.color;

			context.beginPath();

			context.arc(Serpengo.x, Serpengo.y, Serpengo.r, 0, Math.PI * 2, true);

			context.fill();

		}

		window.addEventListener("load", draw, true);

		function doKeyDown(event) {

			var flag=false;//接触旗帜

			switch (event.keyCode) {

			case 38://上键头

				if(Serpengo.y<=0) {//边界判断

					break;

				}

				Serpengo.y -= 4;

				draw();

				break;

			case 40://下键头

				if(Serpengo.y>=500) {//边界判断

					break;

				}

				Serpengo.y += 4;

				draw();

				break;

			case 37://左键头

				if(Serpengo.x<=0) {//边界判断

					break;

				}

				Serpengo.x -= 4;

				draw();

				break;

			case 39://右箭头

				if(Serpengo.x>=600) {//边界判断

					break;

				}

				Serpengo.x += 4;

				draw();

				break;

			}

			if ((Serpengo.x - Circle.x) * (Serpengo.x - Circle.x)

					+ (Serpengo.y - Circle.y) * (Serpengo.y - Circle.y) <= (Serpengo.r + Circle.r)

					* (Serpengo.r + Circle.r)) {//判断红色贪吃球与蓝色小球是否接触

				circleRandom();

				Serpengo.r += 2;

				flag=true;

			}

			if ((Serpengo.x - Rect.x) * (Serpengo.x - Rect.x)

					+ (Serpengo.y - Rect.y) * (Serpengo.y - Rect.y) <= (Serpengo.r + 6)

					* (Serpengo.r + 6)) {//判断红色贪吃球与绿色方块是否接触

				rectRandom();

				Serpengo.r += 2;

				flag=true;

			}

			if (Serpengo.r > 200) {//贪吃球上限设置

				Serpengo.r = 200;

			}

			if(flag){//接触到了就重画

				draw();

			}

			drawFood();

		}

		function drawFood() {

			drawCircle();

			drawRect();

		}

		function drawCircle() {

			context.fillStyle = Circle.color;

			context.beginPath();

			context.arc(Circle.x, Circle.y, Circle.r, 0, Math.PI * 2, true);

			context.fill();

		}

		window.addEventListener("load", drawCircle, true);

		function circleRandom() {

			Circle.x = Math.random();

			Circle.x = Math.ceil(Circle.x * 600);

			Circle.y = Math.random();

			Circle.y = Math.ceil(Circle.y * 500);

		}

		function drawRect() {

			context.fillStyle = Rect.color;

			context.beginPath();

			context.rect(Rect.x, Rect.y, Rect.width, Rect.height);

			context.fill();

		}

		window.addEventListener("load", drawRect, true);

		function rectRandom() {

			Rect.x = Math.random();

			Rect.x = Math.ceil(Rect.x * 600);

			Rect.y = Math.random();

			Rect.y = Math.ceil(Rect.y * 500);

		}

		var showhelp = false;

		function explain() {

			showhelp = !showhelp;

			if (showhelp) {

				tooltip.innerHTML = "用键盘的上、下、左、右键移动红色贪吃球，吃掉蓝色小球或者绿色方块，可以让红色贪吃球变大，直到红色贪吃球半径大至所设置的上限。";

			} else {

				tooltip.innerHTML = "贪吃球大作战";

			}

		}

	</script>

</body>

</html>