会python真的可以为所欲为0(回)
362天前
这里还有人吗1(回)
547天前这里还有人吗0(回)
547天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
772天前到处都是羊，不想上班0(回)
852天前
鸽子
0(回)
856天前<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta charset="UTF-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
<title>宇宙小猿</title> |
<style> |
body{ |
text-align: center |
} |
canvas{ |
margin: 0 auto |
} |
</style> |
</head> |
<body> |
<canvas id="main" width="396" height="644"></canvas> |
<script> |
var canvas = document.getElementById('main') |
var ctx = canvas.getContext('2d') |
var bgImg = new Image() |
bgImg.src = 'images/bg.png' |
var columnImg = new Image() |
columnImg.src = 'images/column.png' |
var groundImg = new Image() |
groundImg.src = 'images/ground.png' |
var monkeyImg = new Image() |
monkeyImg.src = 'images/1.png' |
var overImg = new Image() |
overImg.src = 'images/over.png' |
var readyImg = new Image() |
readyImg.src = 'images/ready.png' |
var canvasWidth = 396 |
var canvasHeight = 644 |
var ground ={ |
img: groundImg, |
x: 0, |
y: canvasHeight - 147, |
width: 803, |
height: 147 |
} |
var column ={ |
img: columnImg, |
x: canvasWidth, |
y: getColumnY(), |
width: 83, |
height: 1547, |
columnUp: 676, |
columnGap: 194 |
} |
var monkey ={ |
img: monkeyImg, |
x: 183, |
y: 200, |
v: 0, |
width: 53, |
height: 58 |
} |
var a = 500 |
var t = 1 / 60 |
const GAME_RUNNING = 1 |
const GAME_OVER = -1 |
const GAME_READY = 0 |
var gameState = GAME_READY |
var score = 0 |
window.onload = function(){ |
canvas.onclick = mouseClickHandler |
setInterval(gameHandler, 1000 / 60) |
} |
function gameHandler(){ |
if (gameState == GAME_READY){ |
ctx.drawImage(bgImg, 0, 0) |
ctx.drawImage(readyImg, 0, 0) |
ctx.drawImage(monkey.img, 183, 200) |
} else if (gameState == GAME_RUNNING){ |
ctx.clearRect(0, 0, canvasWidth, canvasHeight) |
ctx.drawImage(bgImg, 0, 0) |
ctx.drawImage(column.img, column.x, column.y) |
ctx.drawImage(ground.img, ground.x, ground.y) |
ctx.drawImage(monkey.img, monkey.x, monkey.y) |
ctx.font = '30px Arial' |
ctx.fillStyle = 'white' |
ctx.fillText(score,6,30) |
columnMove() |
groundMove() |
monkeyMove() |
checkHit() |
addScore() |
} else if (gameState == GAME_OVER){ |
ctx.drawImage(overImg, 0, 0) |
} |
} |
function columnMove(){ |
column.x = column.x - 1 |
if (column.x <= -column.width){ |
column.x = canvasWidth |
column.y = getColumnY() |
} |
} |
function groundMove(){ |
ground.x = ground.x - 1 |
if (ground.x <= -canvasWidth){ |
ground.x = 0 |
} |
} |
function getColumnY(){ |
var columnUp = 676 |
var columnGap = 194 |
var gap = 30 |
var minY = -(columnUp - gap) |
var maxY = -(columnUp + columnGap + gap - (canvasHeight - ground.height)) |
var y = parseInt(Math.random() * (maxY - minY) + minY) |
return y |
} |
function monkeyMove(){ |
var s = monkey.v * t + a * t * t / 2 |
monkey.y = monkey.y + s |
monkey.v = monkey.v + a * t |
} |
function mouseClickHandler(){ |
if (gameState == GAME_READY){ |
gameState = GAME_RUNNING |
} else if (gameState == GAME_RUNNING){ |
monkey.v = -210 |
} else if (gameState == GAME_OVER){ |
gameState = GAME_READY |
monkey.x = 183 |
monkey.y = 200 |
monkey.v = 0 |
column.x = canvasWidth |
ground.x = 0 |
column.y = getColumnY() |
score = 0 |
} |
} |
function checkHit(){ |
var monkeyTop = monkey.y |
var monkeyBottom = monkey.y + monkey.height |
if (monkeyTop <= 0 || monkeyBottom >= ground.y){ |
gameState = GAME_OVER |
} |
var minX = column.x - monkey.width |
var maxX = column.x + column.width |
var gapTop = column.y + column.columnUp |
var gapBottom = gapTop + column.columnGap |
if (monkey.x >= minX && monkey.x <= maxX){ |
if (monkeyTop <= gapTop || monkeyBottom >= gapBottom){ |
gameState = GAME_OVER |
} |
} |
} |
function addScore(){ |
var columnRight = column.x + column.width |
if(monkey.x - columnRight > 0 && monkey.x - columnRight <= 1){ |
console.log('小猿穿过了管道') |
score = score + 100 |
} |
} |
</script> |
</body> |
</html> |
