Document
#score {
position: absolute;
top: 450px;
left: 100px;
font-size: 30px;
}
得分: 0
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
// 水印canvas
var canvas2 = document.createElement('canvas')
var ctx2 = canvas2.getContext('2d')
// 定义变量
var w = 100
var blocks = []
var flag = false
var speed = 2
var num = 0
var requestId = 0
canvas.width = 100 * 3
canvas.height = 100 * 4
canvas.style.border = '5px solid black'
canvas2.width = 100 * 3
canvas2.height = 100 * 4
canvas2.style.border = '5px solid black'
canvas2.style.position = 'absolute'
canvas2.style.left = '9px'
canvas2.style.top = '9px'
document.body.appendChild(canvas)
document.body.appendChild(canvas2)
// 计分栏
var score = document.querySelector('#score')
draw_line()
ready_game()
// 游戏结束
function game_over() {
alert('游戏结束，请重新开始!')
ready_game()
}
// 动画
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = 'black'
blocks.forEach(function (val, index) {
ctx.fillRect(val.x, val.y += speed, w, w)
// if (val.y > canvas.height) {
// blocks.splice(index, 1)
// }
})
if (blocks.length === 0) {
ctx.fillStyle = 'black'
var x = ~~(Math.random() * 3) * w
var obj = { x: x, y: -100 }
ctx.fillRect(obj.x, obj.y, w, w)
blocks.unshift(obj)
addClick_event(obj)
}
if (blocks[0].y > 0) {
ctx.fillStyle = 'black'
var x = ~~(Math.random() * 3) * w
var obj = { x: x, y: -100 }
ctx.fillRect(obj.x, obj.y, w, w)
blocks.unshift(obj)
addClick_event(obj)
}
speed = num / 10 + 2
requestId = requestAnimationFrame(animate)
if (blocks[blocks.length - 1].y >= canvas.height) {
// 结束动画
cancelAnimationFrame(requestId)
game_over()
}
}
// 开始游戏
function start_game() {
blocks.pop()
num++
score.textContent = '得分: ' + num
flag = true
animate()
}
// 方块移动
function destroy_block(e) {
if (!flag) return
var cli_x = e.x, cli_y = e.y
blocks.forEach(function (val, index) {
if (cli_x > val.x && cli_x < val.x + w && cli_y > val.y && cli_y < val.y + w) {
if (index === blocks.length - 1) {
blocks.pop()
num++
score.textContent = '得分: ' + num
}
}
})
}
// 在指定位置添加click事件
function addClick_event(obj) {
canvas2.addEventListener('click', function (e) {
var cli_x = e.x - 10
var cli_y = e.y - 10
if (cli_x > obj.x && cli_x < obj.x + w && cli_y > obj.y && cli_y < obj.y + w && obj.flag && !flag) {
start_game()
} else destroy_block(e)
})
}
// 准备开始游戏
function ready_game() {
blocks = []
flag = false
speed = 2
num = 0
ctx.clearRect(0, 0, canvas.width, canvas.height)
score.textContent = '得分: ' + num
ctx.fillStyle = 'black'
var x = 0
for (var i = 0; i < canvas.height; i += w) {
x = ~~(Math.random() * 3) * w
var obj = { x: x, y: i }
ctx.fillRect(x, i, w, w)
if (i == 300) {
ctx.fillStyle = 'white'
ctx.font = '20px consolas'
ctx.fillText('开始游戏', x + 10, i + w / 2)
obj.flag = true
}
addClick_event(obj)
blocks.push(obj)
}
}
// 划线
function draw_line() {
ctx.strokeStyle = 'black'
for (var i = w; i < canvas.height; i += w) {
ctx.moveTo(0, i)
ctx.lineTo(canvas.width, i)
ctx.stroke()
}
for (var i = w; i < canvas.width; i += w) {
ctx.moveTo(i, 0)
ctx.lineTo(i, canvas.height)
ctx.stroke()
}
ctx2.drawImage(canvas, 0, 0, canvas.width, canvas.height)
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史