类打地鼠canvas小游戏

最新推荐文章于 2023-03-25 15:59:16 发布

m0_37943126

最新推荐文章于 2023-03-25 15:59:16 发布

阅读量695

点赞数

分类专栏：个人技术博客文章标签： canvas css3 html 前端游戏

本文链接：https://blog.csdn.net/m0_37943126/article/details/67668593

版权

个人技术博客专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML代码部分：

<!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>canvas小游戏_打地鼠</title>
<script src="main.js"></script>
</head>

<body οnlοad="drawcanvas()">
<canvas id="canvas" style="border:2px green solid">
您的浏览器不支持canvas，请您更换后使用。
</canvas>
<div style="float: right; border: 2px red solid; width: 200px; height: 100px;">
<p id="countdown" style="font-size:80px;text-align:center;padding:0;margin:0;">30s</p>

</div>
<div style="float: right; border: 2px red solid; width: 200px; height: 100px;">
<div>
<a style="font-size: 20px;">你的成绩是：</a>
<span id="scope" style="font-size: 35px;">0</span>
</div>

<div>
<audio src="2734.wav" controls="controls" id="audio" style="display: none">
您的浏览器不支持audio
</audio>

<audio src="error.mp3" controls="controls" id="audio1" style="display: none">
您的浏览器不支持audio
</audio>

<audio src="readygo.wav" controls="controls" id="audio2" style="display:none">
您的浏览器不支持audio
</audio>

</audio>
<audio src="bgm.wav" controls="controls" id="audio3" style="display: none">
您的浏览器不支持audio
</audio>
</div>
</div>
<div style="border:2px solid #808080;float:right; width:390px;height:220px;margin-top:-450px;padding:10px;">
<a>您选择的难度是：</a>
<select id="test">
<option>简单</option>
<option>一般</option>
<option>困难</option>
<option>贼难</option>
<option>变态难</option>
</select>
<input type="button" οnclick="start()" style="width:200px;height:100px" value="30s练手速，点击开始"/>
<div style="width:250px;color:red">游戏规则：点击游戏开始后，点击出现红叉；若点击成功则+1分，反之-1分。</div>
</div>
<img src="dishu.gif" id="dishu" />

</body>

</html>

main.js部分

var mousex;//鼠标的XY轴坐标
var mousey;
var num =5;//一起性出现几个地鼠
var circle = new Array();//地鼠
var grade = "";//成绩
var ck;//用于判断是否正确点击
function update() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//画布大小
canvas.width = 800;
canvas.height = 600;
for (var i = 0; i < num; i++) {
circle[i] = {
x: Math.floor(Math.random() * 8) * 100 + 50,
y: Math.floor(Math.random() * 6) * 100 + 50,
mouse: false,
}
}
drawcanvas();
show();
//定一个监听器
canvas.addEventListener("mousemove", updatecanvas, false);
canvas.addEventListener("click", response, false);
}
//实时更新鼠标当前的位置的XY坐标
function updatecanvas(e) {
mousex = e.pageX - 8;
mousey = e.pageY - 8;
show();
}
//画目标点（画地鼠）
function show() {
// var img = new Image();
//img.src = "dishu.gif";
for (var i = 0; i < circle.length; i++) {
var context = canvas.getContext("2d");
context.save();//保存当前的路劲
//两只地鼠
context.beginPath();
context.lineWidth = 3;
context.strokeStyle = "gray";
context.fillStyle = "red";
context.arc(circle[i].x, circle[i].y, 40, 0, 2 * Math.PI, true);
// context.drawImage(img, circle[i].x - 25, circle[i].y - 30, 50, 50)
//鼠标是否在目标内的检测
if (context.isPointInPath(mousex, mousey)) {
circle[i].mouse = true;
ck = true;
}
else {
circle[i].mouse = false;
ck = false;
}
context.fill();
context.stroke();
context.closePath();
//画布外边框的绘制
context.beginPath();
context.lineWidth = 5;
context.strokeStyle = "white";
context.moveTo(circle[i].x - 28, circle[i].y - 28);
context.lineTo(circle[i].x + 28, circle[i].y + 28)
context.moveTo(circle[i].x + 28, circle[i].y - 28);
context.lineTo(circle[i].x - 28, circle[i].y + 28)
context.fill();
context.stroke();
context.closePath();
context.restore();
}
}
//点击时做出响应点击正确或者错误加分或者扣分
function response() {
var scope = document.getElementById("scope");//成绩
var aio = document.getElementById("audio");
var aio1 = document.getElementById("audio1");
var context = canvas.getContext("2d");
for (var i = 0; i < circle.length; i++) {
if (circle[i].mouse == true) {
circle.splice(i, 1);
grade = grade + 1;//打地鼠的成绩
scope.innerHTML = grade;//显示成绩的值
aio.play();
context.clearRect(0, 0, 800, 600);
// alert(circle.length);
drawcanvas();
show();
return;
}
}
if (ck == false) {
aio1.play();
grade = grade - 1;
scope.innerHTML = grade;
}
}
//画背景
function drawcanvas() {
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
//定义画布的格子
for (var i = 100; i <= 800; i = i + 100) {
context.strokeStyle = "green";
context.beginPath();
context.lineWidth = 1;
context.moveTo(0, i);
context.lineTo(800, i);
context.stroke();
context.closePath();
}
for (var i = 100; i <= 800; i = i + 100) {
context.beginPath();
context.lineWidth = 1;
context.moveTo(i, 0);
context.lineTo(i, 800);
context.stroke();
context.closePath();
}
//定义各个格子的黄色的圆
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 6; j++) {
var hole = context.createRadialGradient(50 + i * 100, 50 + j * 100, 30, 50 + i * 100, 50 + j * 100, 40);
hole.addColorStop(0, "#ffd800");
hole.addColorStop(1, "white");
context.beginPath();
context.lineWidth = 1;
context.strokeStyle ="gray";
context.fillStyle = hole;
context.arc(50 + i * 100, 50 + j * 100, 40, 0, 2 * Math.PI, true);
context.fill();
context.stroke();
context.closePath();
}
}
}
//开始函数
function start() {
var canvas = document.getElementById("canvas");
var a = document.getElementById("countdown");//倒计时对象
var b = document.getElementById("test"); //难度对象
var c = 30;
var aio2 = document.getElementById("audio2");
var aio3= document.getElementById("audio3");
aio2.play();
aio3.play();
aio3.volume = 0.2;
//重置成绩
if(parseInt(grade)!= 0) {
grade= 0;
document.getElementById("scope").innerHTML = grade;
}
//countdown秒倒计时
var time = setInterval(function () {
c--;
a.innerHTML = c;
if (a.innerHTML == 0) {
clearInterval(time);
a.innerHTML = 30;
}
}, 1000);
//选择难度
if (b.value == "简单") {
update();
show();
var timer = setInterval(update, 6000);//总分25
setTimeout(function () {
clearInterval(timer);
aio3.pause();
if (grade>20) {
alert("哇。。"+grade+"分，老牛逼了。");
}
else{
alert("才" + grade + "分，还要继续努力呀");
}
canvas.removeEventListener("mousemove", updatecanvas, false);
}, 30000);
}
if (b.value == "一般") {
update();
show();
var timer = setInterval(update, 5000);//总分30
setTimeout(function () {
aio3.pause();
clearInterval(timer);
if (grade >30) {
alert("哇。。" + grade + "分，老牛逼了。");
}
else {
alert("才" + grade + "分，还要继续努力呀");
}
canvas.removeEventListener("mousemove", updatecanvas, false);
}, 30000);
}
if (b.value == "困难") {
update();
show();
var timer = setInterval(update, 3000);//总分50
setTimeout(function () {
aio3.pause();
clearInterval(timer);
if (grade > 38) {
alert("哇。。" + grade + "分，老牛逼了。");
}
else {
alert("才" + grade + "分，还要继续努力呀");
}
canvas.removeEventListener("mousemove", updatecanvas, false);
}, 30000);
}
if (b.value == "贼难") {
update();
show();
var timer = setInterval(update, 2000);//总分75
setTimeout(function () {
aio3.pause();
clearInterval(timer);
if (grade > 45) {
alert("哇。。" + grade + "分，老牛逼了。");
}
else {
alert("才" + grade + "分，还要继续努力呀");
}
canvas.removeEventListener("mousemove", updatecanvas, false);
}, 30000);
}
if (b.value == "变态难") {
update();
show();
var timer = setInterval(update, 1000);//总分150
setTimeout(function () {
aio3.pause();
clearInterval(timer);
if (grade > 25&&grade<=35) {
alert("哇。。" + grade + "分，那么快都有"+grade+"分，");
}
if (grade > 35) {
alert("哇。。" + grade + "分，老牛逼了，那么快的手速！！！！");
}
if (grade > 0 && garde <= 25) {
alert("才" + grade + "分，还要继续努力呀");
}
else {
alert(grade + "分，突然觉你有点宛如一个智障了");
}
canvas.removeEventListener("mousemove", updatecanvas, false);
}, 30000);
}
}