加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
index.html 3.75 KB
一键复制 编辑 原始数据 按行查看 历史
qianming 提交于 2020-03-19 10:11 . 加入手动调整地图方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遥感飞船</title>
<style>
body {
background: gray;
}
</style>
</head>
<body>
<!-- https://juejin.im/post/5e0ea3eff265da5d597e1124 -->
<canvas id="canvas" width="500" height="500" style="background:black;"><canvas>
<script>
class Ship {
constructor() {
this.x = 0
this.y = 0
this.v = 0
this.angle = 0
this.flag = false
}
draw(context) {
if (this.x < 0) {
this.x = context.canvas.width
} else if (this.x > context.canvas.width) {
this.x = 0
}
if (this.y < 0) {
this.y = context.canvas.height
} else if (this.y > context.canvas.height) {
this.y = 0
}
if (this.v >= 20) {
this.v = 20
}
var vx = this.v * Math.cos(this.angle)
var vy = this.v * Math.sin(this.angle)
this.x += vx
this.y += vy
context.save()
context.translate(this.x, this.y)
context.rotate(this.angle)
context.beginPath()
context.moveTo(-15, -10)
context.lineTo(-15, 10)
context.lineTo(10, 0)
context.closePath()
context.lineWidth = 2
context.strokeStyle = "white"
context.stroke()
if (this.v > 0) {
context.beginPath()
context.moveTo(-15, -5)
context.lineTo(-15 - this.v * (this.flag ? 1 : 3), 0)
context.lineTo(-15, 5)
context.closePath()
context.stroke()
this.flag = !this.flag
}
context.restore()
}
}
class Control {
constructor() {
this.xTail = 0
this.yTail = 0
this.xHead = 0
this.yHead = 0
this.visible = false
}
draw(context) {
if (!this.visible) return
context.save()
context.beginPath()
context.strokeStyle = "cyan"
context.lineWidth = 6
context.arc(this.xTail, this.yTail, 40, 0, Math.PI * 2)
context.stroke()
context.beginPath()
context.lineWidth = 2
context.arc(this.xTail, this.yTail, 60, 0, Math.PI * 2)
context.stroke()
context.beginPath()
context.arc(this.xHead, this.yHead, 40, 0, Math.PI * 2)
context.stroke()
context.restore()
}
}
function captureMouse(element) {
var mouse = { x: 0, y: 0 }
element.addEventListener('mousemove', function (event) {
var x = event.pageX - element.offsetLeft
var y = event.pageY - element.offsetTop
mouse.x = x
mouse.y = y
})
return mouse
}
var context = canvas.getContext('2d')
var ship = new Ship()
ship.x = canvas.width / 2
ship.y = canvas.height / 2
var control = new Control()
var mouse = captureMouse(canvas)
canvas.addEventListener('mousedown', function () {
control.xHead = control.xTail = mouse.x
control.yHead = control.yTail = mouse.y
control.visible = true
})
canvas.addEventListener('mousemove', function () {
if (control.visible) {
control.xHead = mouse.x
control.yHead = mouse.y
var dx = control.xHead - control.xTail
var dy = control.yHead - control.yTail
var d = Math.sqrt(dx * dx + dy * dy)
ship.v = d * 0.1
ship.angle = Math.atan2(dy, dx)
}
})
canvas.addEventListener('mouseup', function () {
control.visible = false
});
(function drawFrame() {
window.requestAnimationFrame(drawFrame)
context.clearRect(0, 0, canvas.width, canvas.height)
ship.draw(context)
control.draw(context)
})()
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化