采用画布制作JS小游戏之疯狂打地鼠
平嘉熙
开始界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
}
canvas {
border: 1px solid red;
display: block;
}
img {
display: none;
}
</style>
<script>
window.onload = function () {
let canvas = document.getElementsByTagName("canvas")[0]
let ctx = canvas.getContext("2d")
//背景图
let start = {
start: document.getElementById("start"),
x: 0,
y: 0,
width: canvas.width,
height: canvas.height
}
function drawCome() {
ctx.fillText('开始游戏', 350, 265)
ctx.fillText(`操作说明`, 350, 305)
}
//绘制背景
function drawStart() {
ctx.drawImage(start.start, start.x, start.y, start.width, start.height)
// ctx.fillStyle = "#f00"
// ctx.font = " 18px 华文琥珀"
// ctx.fillText('开始游戏',350,265)
}
drawStart()
function drawSecond() {
// ctx.fillStyle = "#f00"
// ctx.font = " 18px 华文琥珀"
// ctx.fillText(`操作说明`,350,305)
}
drawSecond()
// 监听点击事件
canvas.addEventListener("click", function (event) {
getMousePos(canvas, event);
});
function getMousePos(canvas, event) {
//console.log(hamsters.hamsters[0].x, hamsters.hamsters[0].y)
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left * (canvas.width / rect.width);
var y = event.clientY - rect.top * (canvas.height / rect.height);
if (x > 306 && x < 459 && y > 245 && y < 272) {
//console.log("b")
//draw()
window.open("game.html", "_parent")
}
if (x > 307 && x < 458 && y > 288 && y < 318) {
console.log("d")
//draw()
window.confirm("1、点击开始按钮开始游戏"+"\n"+
"2、当地鼠出现后用鼠标进行点击,点击上加1分,否则不加分,时间60秒"+"\n"+
"3、更多新玩法尽情期待！")
}
}
//绘制开始游戏按钮
ctx.fillStyle = "#000"
ctx.font = "20px 华文行楷"
ctx.fillText(`开始游戏`, 340, 265)
//绘制说明文档按钮
ctx.fillStyle = "#000"
ctx.font = "20px 华文行楷"
ctx.fillText(`说明文档`, 340, 305)
}
</script>
</head>
<body>
<canvas width="800px" height="500px"></canvas>
<img id="start" src="./img/start.jpg" alt="">
</body>
</html>
游戏界面
<canvas id="mycanvas" height="500px" width="800px" class="m-margin-top-tiny"> </canvas>
<img id="initbg" src="./img/bg.png">
<img id="hamster1" src="./img/ds1.png">
<img id="hamster2" src="./img/ds2.png">
类似资料：