用js 写一个棍子闯关的游戏
时间: 2023-12-10 10:05:20 浏览: 34
好的,以下是一个简单的棍子闯关游戏的实现。
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Stick Hero Game</title>
<style type="text/css">
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<button id="start">Start</button>
<button id="jump">Jump</button>
<script type="text/javascript" src="game.js"></script>
</body>
</html>
```
JavaScript:
```javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var game = {
score: 0,
stickWidth: 10,
stickHeight: 100,
speed: 3,
state: "waiting",
hero: {
x: 100,
y: canvas.height - 100,
width: 50,
height: 50,
jumping: false,
jumpSpeed: 0,
jumpHeight: 150,
maxJumpHeight: 150,
gravity: 8,
landed: true,
landingPosition: 0
},
obstacle: {
x: canvas.width - 50,
y: canvas.height - 100,
width: 50,
height: 100,
speed: 3,
passed: false
}
};
function drawHero(){
ctx.fillStyle = "black";
ctx.fillRect(game.hero.x, game.hero.y, game.hero.width, game.hero.height);
}
function drawObstacle(){
ctx.fillStyle = "red";
ctx.fillRect(game.obstacle.x, game.obstacle.y, game.obstacle.width, game.obstacle.height);
}
function drawStick(){
var hero = game.hero;
var obstacle = game.obstacle;
var stickHeight = Math.min(hero.jumpHeight, hero.maxJumpHeight);
var stickWidth = stickHeight / 4;
if(obstacle.x - hero.x - hero.width < stickWidth){
stickWidth = obstacle.x - hero.x - hero.width;
stickHeight = stickWidth * 4;
}
ctx.fillStyle = "black";
ctx.fillRect(hero.x + hero.width, hero.y + hero.height/2 - game.stickWidth/2, stickWidth, game.stickWidth);
}
function drawScore(){
ctx.fillStyle = "black";
ctx.font = "30px Arial";
ctx.fillText("Score: " + game.score, 10, 30);
}
function clearCanvas(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function updateHero(){
var hero = game.hero;
if(hero.jumping){
hero.jumpSpeed -= hero.gravity;
hero.jumpHeight += hero.jumpSpeed;
if(hero.jumpHeight <= 0){
hero.jumping = false;
hero.landed = false;
hero.landingPosition = hero.x + hero.width;
hero.jumpHeight = 0;
hero.jumpSpeed = 0;
}
}
else if(!hero.landed){
if(hero.x + hero.width >= hero.landingPosition){
hero.landed = true;
game.score++;
game.obstacle.passed = false;
game.obstacle.speed += 0.5;
}
}
}
function updateObstacle(){
var obstacle = game.obstacle;
obstacle.x -= obstacle.speed;
if(obstacle.x + obstacle.width < 0){
obstacle.x = canvas.width;
obstacle.passed = false;
}
}
function checkCollision(){
var hero = game.hero;
var obstacle = game.obstacle;
if(obstacle.x - hero.x - hero.width < game.stickWidth && !hero.jumping && !hero.landed){
var stickHeight = Math.min(hero.jumpHeight, hero.maxJumpHeight);
var stickWidth = stickHeight / 4;
if(obstacle.x - hero.x - hero.width < stickWidth + obstacle.width && !obstacle.passed){
game.state = "gameover";
}
}
}
function gameLoop(){
clearCanvas();
if(game.state === "playing"){
updateHero();
updateObstacle();
checkCollision();
drawHero();
drawObstacle();
drawStick();
drawScore();
}
else if(game.state === "gameover"){
ctx.fillStyle = "black";
ctx.font = "50px Arial";
ctx.fillText("Game Over", canvas.width/2 - 150, canvas.height/2);
ctx.font = "30px Arial";
ctx.fillText("Score: " + game.score, canvas.width/2 - 75, canvas.height/2 + 50);
}
}
function startGame(){
game.state = "playing";
game.score = 0;
game.obstacle.x = canvas.width - 50;
game.obstacle.passed = false;
game.obstacle.speed = 3;
game.hero.x = 100;
game.hero.y = canvas.height - 100;
game.hero.jumping = false;
game.hero.landed = true;
game.hero.landingPosition = 0;
game.hero.jumpHeight = 0;
game.hero.jumpSpeed = 0;
}
function jump(){
var hero = game.hero;
if(hero.landed){
hero.jumping = true;
hero.jumpSpeed = 20;
}
}
document.getElementById("start").addEventListener("click", function(){
startGame();
});
document.getElementById("jump").addEventListener("click", function(){
jump();
});
setInterval(gameLoop, 1000/60);
```
实现的功能包括:棍子长度随着英雄跳跃高度改变,棍子长度不能超过障碍物位置,英雄在跳跃和落地后的状态更新,障碍物的位置和速度更新,游戏结束判断和分数统计等。
这是一个简单的实现,可以根据需要进行改进和优化。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)