[html]代码库
<!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>
[源代码打包下载]
会python真的可以为所欲为0(回)
250天前
这里还有人吗1(回)
435天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
660天前
鸽子
0(回)
744天前
images.zip(免费下载)[33 次下载]
初级程序员
by: wosm 发表于：2021-12-15 08:38:23 顶(2) | 踩(1) 回复
程序很棒
回复评论