小游戏--躲避怪物源码

最新推荐文章于 2023-03-23 12:33:12 发布

umbrella244

最新推荐文章于 2023-03-23 12:33:12 发布

阅读量2.8k

点赞数

分类专栏：小游戏文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_55648018/article/details/123075526

版权

小游戏专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<canvas id="gameCanvas" width="600" height="600">您的浏览器不支持Canvas</canvas>
<script type="text/javascript" >
//获取画布元素
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");

//定义游戏场景
var bgReady = false;
var bgImage = new Image();
bgImage.src = "img/bg.jpg";//背景图片
bgImage.onload = function(){
	bgReady = true;
}//图像装载完毕

//定义player对象样式
var playerReady = false;
var playerImage = new Image();
playerImage.src = "img/player.png";//玩家图片
playerImage.onload = function(){
	playerReady = true;
}//图像装载完毕

//定义怪物样式
var monsterReady = false;
var monsterImage = new Image();
monsterImage.src = "img/monster.png";//怪物图片
monsterImage.onload = function(){
	monsterReady = true;
}//图像装载完毕

//定义player初始参数
var player = {
	speed: 256,
	x: canvas.width/2,
	y: canvas.height/2
}

//定义怪物初始参数
function monster() {
	this.x = Math.random() * canvas.width;
	this.y = Math.random() * canvas.height;
	this.speed = 100;
	this.xDirection = 1;
	this.yDirection = 1;
	this.move = function (modifier) {
		this.x += this.xDirection * this.speed * modifier;
		this.y += this.yDirection * this.speed * modifier;
		if (this.x >= canvas.width - 32)
		{
			this.x = canvas.width - 32;
			this.xDirection = -1;
		}else if (this.x <= 0)
		{
			this.x = 0;
			this.xDirection = 1;
		}else if (this.y >= canvas.height - 32)
		{
			this.y = canvas.height - 32;
			this.yDirection = -1;
		}else if (this.y <= 0)
		{
			this.y = 0;
			this.yDirection = 1;
		}
	};
}

var monsterSum = 0;
var monsterList = new Array();
monsterList[monsterSum] = new monster();

var keysDown = {};

//添加键盘操作监控事件
addEventListener(
	"keydown", 
	function (e) {
		keysDown[e.keyCode] = true;
	}, 
	false
);
addEventListener(
	"keyup", 
	function (e) {
		delete keysDown[e.keyCode];
	}
);

//定义移动事件
var Move = function (modifier) {

	if (38 in keysDown) {
		player.y -= player.speed * modifier;
	}
	if (40 in keysDown) {
		player.y += player.speed * modifier;
	}
	if (37 in keysDown) {
		player.x -= player.speed * modifier;
	}
	if (39 in keysDown) {
		player.x += player.speed * modifier;
	}
	
	if (player.x >= canvas.width - 32) {
		player.x = 0;
	}else if (player.x <= 0) {
		player.x = canvas.width - 32;
	}
	if (player.y >= canvas.height - 32) {
		player.y = 0;
	}else if (player.y <= 0) {
		player.y = canvas.height - 32;
	}

	for (var i = 0; i <= monsterSum; i++) {
		monsterList[i].move(modifier);	
	}
}

//定义绘图事件
var Draw = function () {
	if (bgReady) {
		ctx.drawImage(bgImage, 0 ,0);
		if (playerReady) {
			ctx.drawImage(playerImage, player.x, player.y);
		}
		
		if (monsterReady) {
			for (var i = 0; i <= monsterSum; i++)
			ctx.drawImage(monsterImage, monsterList[i].x, monsterList[i].y);
		}
	}	
	ctx.fillStyle = "rgb(250, 250, 250)";
	ctx.font =  "24px Helvetica";
	ctx.textAlign = "left";
	ctx.textBaseline = "top";
	last = Date.now() - start;
	ctx.fillText(last/1000, 12, canvas.height-590);
}

//游戏
var Check = function () {
	
	if (monsterSum != Math.floor(last / 5000)){
		monsterSum ++;
		monsterList[monsterSum] = new monster();
	}

	for (var i = 0; i <= monsterSum; i++) {
		if (
			(monsterList[i].x - 32) <= player.x
			&& player.x <= (monsterList[i].x + 32)
			&& (monsterList[i].y - 32) <= player.y
			&& player.y <= (monsterList[i].y + 32)
		) {
			end = Date.now();
			alert("你被怪物捉到了，游戏结束");
			End();
		}
	}
}

var End = function () {
	if (bgReady) {
		ctx.drawImage(bgImage, 0 ,0);
	}
	window.clearInterval(timer);
	return;
}

var main = function () {
	var now = Date.now();
	var delta = now - then;
	Move(delta / 1000);
	Draw();
	Check();
	
	then = now;
}

var then = Date.now();
var start = then;
timer = setInterval(main, 1); 
</script>
</body>
</html>